echarts--map ,地图显示、通过dataRange 动态改变地图上线的颜色,还没实践

function getEcharts(end_obj,pointsdata,linedata){// Step:3 conifg ECharts's path, link to echarts.js from current page.// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径require.config({paths: {echarts: './js'}});// Step:4 require echarts and use it in the callback.// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径require(['echarts','echarts/chart/map'],function (ec) {// --- 地图 ---var myChart2 = ec.init(document.getElementById('mapcontainer'));myChart2.setOption({title : {text: '',subtext: '',left: 'center',textStyle : {color: '#fff'}},tooltip : {trigger: 'axis',backgroundColor: 'rgba(0,0,0,.6)',padding: 14,textStyle:{color:'#fff'},fontSize: 12,lineHeight:20},dataRange: {/*min :min,max:max,*/calculable : false,//splitList控制线与点的颜色,start意思是大于等于,end是小于等于,当满足条件时可以改变颜色,这里是通过linedata与pointsdata,来改变的splitList: [{start: 6,  color:'2a2a2a'},{start: 4, end: 5,color:'#fa9c08'},{start: 3, end: 3,color:'#fc0c38'},{start: 2, end: 2,color:'#f1ff0e'}, {start: 1, end: 1,color:'#39f60e'},                   {start: 0, end: 0,color:'#d0d0d0'}, ],// color: ['#ff3333','#0af08c'], 如果不加splitList,也可以通过color,但是必须得有max,与minx: '',show: false,textStyle:{color:'#fff'}},layoutCenter: ['50%', '50%'],series : [{name: '湖南\n\n',type: 'map',roam: false,hoverable: true,clickable:true,mapType: '湖南',data:end_obj,//这是鼠标悬停的时候的数据tooltip : {trigger: 'item',formatter: function (params){var chityname = params.name;                       if(end_obj!=null){for(var i=0;i站点数量:${end_obj[i].count}
正常站点:${end_obj[i].good}
告警站点:${end_obj[i].fault}
`)}}}else{return chityname} },},itemStyle:{normal:{label:{show:true,textStyle: {color: 'rgba(255,255,255,0.7)',fontSize: 10}},borderColor:'rgba(104,183,239,0.7)',borderWidth:1,areaStyle:{color: 'rgba(104,183,239,0.2)'}},emphasis:{label:{show:true,textStyle: {color: 'rgba(255,255,255,1)',fontSize: 14}},areaStyle:{color:'rgba(0,0,0,0.6)'}}},markLine : {smooth:true,symbol: ['none', 'circle'], symbolSize : 1,itemStyle : {normal: {color:'#fff',borderWidth:1,borderColor:'rgba(30,144,255,0.5)'}},data : [],},geoCoord: {'长沙': [112.93,28.23],'株洲': [113.13,27.83],'湘潭': [112.93,27.83],'衡阳': [112.57,26.90],'邵阳': [111.47,27.25],'岳阳': [113.12,29.37],'常德': [111.68,29.05],'张家界': [110.47,29.13],'益阳': [112.32,28.60],'郴州': [113.02,25.78],'永州': [111.62,26.43],'怀化': [110.00,27.57],'娄底': [112.00,27.73],'湘西土家族苗族自治州': [109.73,28.32]},markPoint : {symbol:'emptyCircle',symbolSize : function (v){return 10 + 2*v },effect : { show: true,shadowBlur : 1},itemStyle:{ normal:{label:{show:true}},emphasis: {label:{position:'bottom'}}},data : pointsdata// 这是点的数据格式是[{name:'长沙',value:2},{name:'郴州',value:1}]}},{name: '',type: 'map',mapType: '湖南',data:[],markLine : {smooth:true,effect : {show: true,scaleSize: 2,period: 15,color: 'rgba(255,255,255,0.7)',shadowBlur: 5},itemStyle : {normal: {label:{show:false,color: '#333333',formatter: '{b}'},silent:true,borderWidth:1,lineStyle: { type: 'solid',shadowBlur: 3},},emphasis: {label:{show:false}}},data : linedata,// 这是线的数据格式是[[{name:'长沙'},{name:'郴州',value:1}],[{name:'长沙'},{name:'邵阳',value:1}]]},}]});window.addEventListener("resize",function(){ myChart2.resize();}) }); } // 有时候地图点的位置混乱了,如果定位没错的话,linedata 中的{name:'长沙'}的name要和地理位置中的一致对


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部