echarts地图修改高亮颜色及区域界线颜色

行政区域地图修改默认鼠标滑过颜色以及省份之间的边界线颜色记录

 

      myCharts.setOption({
                tooltip: {
                    triggerOn: 'click',
                    enterable: true,
                    formatter: function(params, ticket, callback) {
                        console.log(params.length)
                        let content = {
                            area: 1,
                            areaName: params.name
                        }
                        let result = that.$axios({
                            method: 'get',
                            url: that.getMapCompany,
                            params: content
                        }).then(res => {
                            console.log(params, content, 'log')
                        })
                        var tipHtml = '';
                        tipHtml = '<div style="width:200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                        +'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                        +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+ params.name +'</span>'+'</div>'
                        +'<div>'
                        +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
                        +'公司数量:'+'<span style="color:#f48225;margin:0 6px;">'+3+'</span>'+'个'+'</p>'
                        +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
                        +'被考核主体数量'+'<span style="color:#f4e925;margin:0 6px;">'+4+'</span>'+'个'+'</p>'
                        +'</div>'+'</div>';
                        return tipHtml;

                        return result;
                        
                        
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        zoom: 1,
                        label: {
                            show: true,
                            color: 'white',
                            fontSize: 10
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 2,//边际线大小
                                borderColor:'#00ffff',//边界线颜色
                                areaColor:'#09295b'//默认区域颜色
                            },
                            emphasis: {
                                show: true,
                                areaColor: '#3066ba',//鼠标滑过区域颜色
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                            
                        },
                    }
                ],
            })

  

posted @ 2020-11-18 15:02  紫诺花开  阅读(20665)  评论(0编辑  收藏  举报