实时折线图
option = {backgroundColor:'#2B2B2B',tooltip: {trigger: 'axis'},legend: {data:['频率'],textStyle:{color:'#FFF',fontSize:20}},xAxis: {type: 'category',boundaryGap: false,splitLine:{show:true,lineStyle:{type:'dotted'}},axisLabel:{textStyle:{color:'#FFF',fontSize:20}},axisLine:{lineStyle:{color:'#FFF'}},data: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','23:59']},yAxis: {type: 'value',axisLabel: {formatter: '{value} Hz',textStyle:{color:'#FFF',fontSize:20}},min:48.75,max:51.25,axisLine:{lineStyle:{color:'#FFF'}},splitLine:{show:true,lineStyle:{type:'dotted'}}},series: [{name:'频率',type:'line',symbol:'circle',itemStyle:{normal:{color:'#00FF00'}},data:[],markPoint: {symbolSize:1,data: [{type: 'max', name: '最大值',itemStyle:{normal:{color:'#00FF00'}}},{type: 'min', name: '最小值',itemStyle:{normal:{color:'#00FF00'}}}],label:{normal:{textStyle:{color:'#00ff00',fontSize:25}}}},lineStyle:{normal:{color:'#00FF00',width:3}},markLine: {lineStyle:{normal:{type:'solid',width:2}},data: [{type: 'average', name: '平均值',itemStyle:{normal:{color:'#FFFFFF'}}}],label:{normal:{textStyle:{color:'#FFF',fontSize:20}}}}},{name:'最大值',type:'line',symbol:'circle',symbolSize:1,itemStyle:{normal:{color:'red'}},lineStyle:{normal:{width:2}},data:[51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51,51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51],},{name:'最小值',type:'line',symbol:'circle',symbolSize:1,itemStyle:{normal:{color:'red'}},lineStyle:{normal:{width:2}},data:[49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49,49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49],}]};var index=0;setInterval(function () {if (index<=24) {option.series[0].data.push(Math.random().toFixed(2) * 2+49);} else {option.series[0].data=[];index=0;}index++;myChart.setOption(option, true);},1000);
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echart学习</title></head><body><p>------------------------</p><div id="main2" style="height:400px"></div> <!-- <script src="js/echarts-all.js" charset="utf-8"></script>--><script src="/echarts/3.8.5/echarts-mon.js"></script><script type="text/javascript">var myChart22 = echarts.init(document.getElementById('main2')); var option22 = {backgroundColor: '#2B2B2B',tooltip: {trigger: 'axis'},legend: {data: ['频率'],textStyle: {color: '#FFF',fontSize: 20}},xAxis: {type: 'category',boundaryGap: false,splitLine: {show: true,lineStyle: {type: 'dotted'}},axisLabel: {textStyle: {color: '#FFF',fontSize: 20}},axisLine: {lineStyle: {color: '#FFF'}},data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '23:59']},yAxis: {type: 'value',axisLabel: {formatter: '{value} Hz',textStyle: {color: '#FFF',fontSize: 20}},min: 48.75,max: 51.25,axisLine: {lineStyle: {color: '#FFF'}},splitLine: {show: true,lineStyle: {type: 'dotted'}}},series: [{name: '频率',type: 'line',symbol: 'circle',itemStyle: {normal: {color: '#00FF00'}},data: [],markPoint: {symbolSize: 1,data: [{type: 'max',name: '最大值',itemStyle: {normal: {color: '#00FF00'}}},{type: 'min',name: '最小值',itemStyle: {normal: {color: '#00FF00'}}}],label: {normal: {textStyle: {color: '#00ff00',fontSize: 25}}}},lineStyle: {normal: {color: '#00FF00',width: 3}},markLine: {lineStyle: {normal: {type: 'solid',width: 2}},data: [{type: 'average',name: '平均值',itemStyle: {normal: {color: '#FFFFFF'}}}],label: {normal: {textStyle: {color: '#FFF',fontSize: 20}}}}},{name: '最大值',type: 'line',symbol: 'circle',symbolSize: 1,itemStyle: {normal: {color: 'red'}},lineStyle: {normal: {width: 2}},data: [51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51],},{name: '最小值',type: 'line',symbol: 'circle',symbolSize: 1,itemStyle: {normal: {color: 'red'}},lineStyle: {normal: {width: 2}},data: [49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49],}]};var index22 = 0;setInterval(function() {if (index22 <= 24) {option22.series[0].data.push(Math.random().toFixed(2) * 2 + 49);} else {option22.series[0].data = [];index22 = 0;}index22++;myChart22.setOption(option22, true);}, 1000);</script></body></html>
彩虹效果
app.title = '随便玩玩儿,嘻嘻';var red = '#F00';var orange = '#F60';var yellow = '#FF0';var green = '#0C0';var cyan = '#17D4DE';var blue = '#2616D9';var purple = '#B013DC';var white = '#EFEFEF';var sky = '#88FFFF';var brown = '#D2691E';var duration = 5000;option = {title: {text: '彩虹',subtext: '作者: 断浪',},backgroundColor: '#88FFFF',series: [//红{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : red;}},legendHoverLink: false, //是否联动高亮 defult:truelabel: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},hoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [280, 250],startAngle: 180, //起始角度data: [{name: 'red',value: 10},{name: 'land1',value: 10}]},//橙{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : orange;}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},legendHoverLink: false, //是否联动高亮 defult:truehoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [250, 220],startAngle: 180, //起始角度data: [{name: 'orange',value: 10},{name: 'land2',value: 10}]},//黄{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : yellow;}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},legendHoverLink: false, //是否联动高亮 defult:truehoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [220, 190],startAngle: 180, //起始角度data: [{name: 'yellow',value: 10},{name: 'land3',value: 10}]},//绿{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : green;}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},legendHoverLink: false, //是否联动高亮 defult:truehoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [190, 160],startAngle: 180, //起始角度data: [{name: 'green',value: 10},{name: 'land4',value: 10}]},//青{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : cyan;}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},legendHoverLink: false, //是否联动高亮 defult:truehoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [160, 130],startAngle: 180, //起始角度data: [{name: 'green',value: 10},{name: 'land5',value: 10}]},//蓝{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : blue;}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},legendHoverLink: false, //是否联动高亮 defult:truehoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [130, 100],startAngle: 180, //起始角度data: [{name: 'blue',value: 10},{name: 'land6',value: 10}]},//紫{type: 'pie',animationDuration: duration,itemStyle: {color: function(data) {return data.dataIndex == 1 ? sky : purple;}},label: {normal: {show: false},emphasis: {show: false}},labelLine: {show: false},legendHoverLink: false, //是否联动高亮 defult:truehoverOffset: 0, //高亮时的偏移区域 defult:10center: ['50%', '70%'],radius: [100, 70],startAngle: 180, //起始角度data: [{name: 'purple',value: 10},{name: 'land7',value: 10}]},],};
中间带图片参数
var giftImageUrl = "data:image/png;base64,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";option = {backgroundColor: '#fff',tooltip: {trigger: 'item',formatter: "{b} : {d}% <br/> {c}"},graphic: {elements: [{type: 'image',style: {image: giftImageUrl,width: 130,height: 130},left: 'center',top: 'center'}]},/*legend: {orient: 'horizontal',icon: 'circle',bottom: 20,x: 'center',data: ['金融', '房地产', '专业服务业', '批发和零售业', '其他']},*/series: [{type: 'pie',radius: ['35%', '50%'],center: ['50%', '50%'],color: ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],data: [{value: 335,name: '金融'},{value: 310,name: '房地产'},{value: 234,name: '其他'},{value: 235,name: '批发和\n零售业'},{value: 254,name: '专业\n服务业'}],labelLine: {normal: {show: true,length: 20,length2: 20,lineStyle: {color: '#12EABE',width: 2}}},label: {normal: {formatter: '{c|{b}}\n{d|{d}%}',rich: {b: {fontSize: 16,color: '#12EABE',align: 'left',padding: 4},d: {fontSize: 16,align: 'left',padding: 2},c: {color: '#333',fontSize: 16,align: 'left',padding: 2}}}}}]};
双曲螺线
var data = [];for (var circle = 0; circle < 5; ++circle) {for (var i = 0; i <= 100; i++) {var theta = i / 100 * 360;var alpha = circle * 360 + theta;var r = Math.pow(Math.E, 0.003 * alpha);data.push([r, theta]);}}option = {title: {text: '双曲螺线'},polar: {},tooltip: {trigger: 'item'},angleAxis: {type: 'value',startAngle: 135,show: false},radiusAxis: {show: false,max: 225},series: [{coordinateSystem: 'polar',name: 'line',type: 'line',data: data,symbolSize: 0,symbol: 'circle',areaStyle: {normal: {color: new echarts.graphic.RadialGradient(0.64, 0.5, 1, [{offset: 0.1,color: 'rgba(255, 0, 0, 0.5)'}, {offset: 1,color: 'rgba(255, 255, 0, 0)'}], false)}},lineStyle: {normal: {color: '#C25353',width: 3}}}]};
echart 结合 百度地图
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="main" style="width: 100%;height:900px;"></div><script type="text/javascript" src="https://api./api?v=2.0&ak=k0sIRS3WbKwkon8rdEwGBPVeGq38QWDD"></script><script src="/echarts/3.8.4/echarts.min.js"></script><script src="/echarts/3.7.2/extension/bmap.min.js"></script><script>var myChart = echarts.init(document.getElementById('main'));var data = [{name: '海门', value: 99},{name: '鄂尔多斯', value: 122},{name: '招远', value: 162},{name: '舟山', value: 112},];var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};option = {backgroundColor: '#404a59',title: {text: '',left: 'center',textStyle: {color: '#fff'}},tooltip : {trigger: 'item'},bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true},series : [{name: 'Top 4',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 2;},rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#ff0000',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}]};myChart.setOption(option);// 获取百度地图实例，使用百度地图自带的控件var bmap = myChart.getModel().getComponent('bmap').getBMap();bmap.addControl(new BMap.MapTypeControl());//调用百度的方法，使用bmap对象var point = new BMap.Point(116.404, 39.915);bmap.centerAndZoom(point, 6);//创建小狐狸var pt = new BMap.Point(116.417, 39.909);var myIcon = new BMap.Icon("/jsdemo/img/fox.gif", new BMap.Size(300,157));var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注bmap.addOverlay(marker2); // 将标注添加到地图中//var geolocation = new BMap.Geolocation();//定位//geolocation.getCurrentPosition(function(r){// if(this.getStatus() == BMAP_STATUS_SUCCESS){//var mk = new BMap.Marker(r.point);//map.addOverlay(mk);//map.panTo(r.point);//InitMAP(r.point.lng,r.point.lat)//alert('您的位置：'+r.point.lng+','+r.point.lat);// }// else {//alert('failed'+this.getStatus());//InitMAP(120.331398,30.897445)// } //});</script></body></html>
geo地图 结合百度地图
