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,与min
                    x: '',
                    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.length;i++){
                                        if(chityname.indexOf(end_obj[i].name)!=-1){
                                                return(`${chityname}<br>
                                                    站点数量:${end_obj[i].count}<br>
                                                    正常站点:${end_obj[i].good}<br>
                                                    告警站点:${end_obj[i].fault}<br>`)
                                        }
                                    }
                                }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要和地理位置中的一致对
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值