echarts之河南省市地图(根据数据大小控制颜色显示变化)

直接上代码:

var mapOption = {
    tooltip: {
        show: true  //鼠标经过提示

    },
    visualMap: {
        show: false,
        min:10,
        max: 50, //控制根据返回值  控制数量
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['#0062cd', '#093EE5', '#0B33A9']  //显示颜色
        }
    },
    bmap: {},
    series: [{
            name: '数量',
            layoutCenter: ['50%', '50%'],
            layoutSize: '80%',
            aspectScale: 1,
            type: 'map',
            mapType: 'henan', // 自定义扩展图表类型
            zoom: 1.4,
            label: {
                show: true,
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#fff',
                        fontFamily: 'Microsoft YaHei',
                    }
                },
                emphasis: {
                    show: true,
                    color: '#fff',
                },
            },

            itemStyle: {
                normal: {
                    areaColor: "#0062CD", //改变地图里面的颜色
                    borderColor: '#91CCF0',//边框颜色
                    borderWidth: 1.5,//边框宽度
                    shadowColor: '#093493',
                    shadowBlur: 2,
                    opacity: 1,
                    label: {
                        show: true,
                    }
                },
            },

            data: [{
                name: '郑州',
                value: 150,
            }, {
                name: '洛阳',
                value: 117
            }, {
                name: '开封',
                value: 53
            }, {
                name: '信阳',
                value: 123
            }, {
                name: '驻马店',
                value: 135
            }, {
                name: '南阳',
                value: 128
            }, {
                name: '周口',
                value: 151
            }, {
                name: '许昌',
                value: 17
            }, {
                name: '平顶山',
                value: 33
            }, {
                name: '新乡',
                value: 0
            }, {
                name: '漯河',
                value: 63
            }, {
                name: '商丘',
                value: 21
            }, {
                name: '三门峡',
                value: 22
            }, {
                name: '济源',
                value: 49
            }, {
                name: '焦作',
                value: 27
            }, {
                name: '安阳',
                value: 2
            }, {
                name: '鹤壁',
                value: 0
            }, {
                name: '濮阳',
                value: 35
            }, {
                name: '开封',
                value: 53
            }],
        },
        // {
        //     name: 'Top 5',
        //     type: 'effectScatter',
        //     coordinateSystem: 'bmap',
        //     data: convertData(data.sort(function(a, b) {
        //         return b.value - a.value;
        //     }).slice(0, 6)),
        //     data: pointData,
        //     symbolSize: function(val) {
        //         return val[2] / 10;
        //     },
        //     showEffectOn: 'emphasis',
        //     rippleEffect: {
        //         brushType: 'stroke'
        //     },
        //     hoverAnimation: true,
        //     label: {
        //         formatter: '{b}',
        //         position: 'right',
        //         show: true
        //     },
        //     itemStyle: {
        //         color: '#f4e925',
        //         shadowBlur: 10,
        //         shadowColor: 'red'
        //     },
        //     zlevel: 1
        // },
    ],
};
 $.getJSON('./henan.json', function(csJson) { //引入你需要绘画的地图json表
     echarts.registerMap('henan', csJson);
     var myEcharts = echarts.init(document.getElementById("map"))
     myEcharts.setOption(mapOption)
 });

看下效果图:
在这里插入图片描述
最后,想要河南省地图json文件的小伙伴,欢迎给我留言,我会一一发给你们。

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值