vue echerts 中国地图热力图

vue echerts 中国地图热力图

效果图展示

<template>
<div id="chinaEcharts" ref="chinaEcharts" v-loading='loading2'  class="leftEcharts" style="height:400px;"></div>
</template>

后台给的格式是这种

我是想要对照着改变 原本的格式是这种

[
    {"name":"南海诸岛","value":0},
    {"name": "北京", "value": 0},
    {"name": "天津", "value": 0},
    {"name": "上海", "value": 0},
    {"name": "重庆", "value": 0},
    {"name": "河北", "value": 0},
    {"name": "河南", "value": 0},
    {"name": "云南", "value": 0},
    {"name": "辽宁", "value": 0},
    {"name": "黑龙江", "value": 0},
    {"name": "湖南", "value": 0},
    {"name": "安徽", "value": 0},
    {"name": "山东", "value": 0},
    {"name": "新疆", "value": 0},
    {"name": "江苏", "value": 0},
    {"name": "浙江", "value": 0},
    {"name": "江西", "value": 0},
    {"name": "湖北", "value": 0},
    {"name": "广西", "value": 0},
    {"name": "甘肃", "value": 0},
    {"name": "山西", "value": 0},
    {"name": "内蒙古", "value": 0},
    {"name": "陕西", "value": 0},
    {"name": "吉林", "value": 0},
    {"name": "福建", "value": 0},
    {"name": "贵州", "value": 0},
    {"name": "广东", "value": 0},
    {"name": "青海", "value": 0},
    {"name": "西藏", "value": 0},
    {"name": "四川", "value": 0},
    {"name": "宁夏", "value": 0},
    {"name": "海南", "value": 0},
    {"name": "台湾", "value": 0},
    {"name": "香港", "value": 0},
    {"name": "澳门", "value": 0}
]

<script>
	import { Province_count} from '@/api/api.js';
	const elementResizeDetectorMaker = require("element-resize-detector");
	import 'echarts/map/js/china.js'  //echarts下载下来自身携带的china.js, 如果是npm下载的直接引入包里面的就可以，另外h5可以直接下载下来引入
	import echarts from 'echarts'
	export default {
    name: '',
    data() {
        return {
            loading2:true
        };
    },
    mounted(){   
        // 热力图
        this.getProvince_count()
     },
    created() {
    },
    methods: {
        getProvince_count(){
            Province_count().then(res=>{
                const {ReturnCode,Data}=res
                if(ReturnCode==200){
                    // console.log(Data.rows,'o02002')
                    let maxNum=Data.rows[0].value
                    for (const i in Data.rows) {
                        // console.log(Data.rows[i].name,'Data.rows[i].name')
                        if(Data.rows[i].name=='内蒙古自治区'){
                            Data.rows[i].name='内蒙古'
                        }else if(Data.rows[i].name=='宁夏回族自治区'){
                            Data.rows[i].name='宁夏'
                        }else if(Data.rows[i].name=='黑龙江省'){
                                Data.rows[i].name='黑龙江'
                        }else{
                            Data.rows[i].name=(Data.rows[i].name).substring(0,2)
                        }
                    }
                    for (const j in province) {
                        for (const m in Data.rows) {
                            if(province[j].name==Data.rows[m].name){
                                province[j].value=Data.rows[m].value
                            }
                        }
                    }
                    this.chinaEcharts(province,maxNum)
                }
                this.loading2=false
            })
        },

    //    热力图
    chinaEcharts(dataList,maxNum) {
      let this_ = this;
      let myChart = echarts.init(document.getElementById('chinaEcharts'));
      let resizeTimer = null;
      let option = {
            tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
            visualMap: {
                min: 0,
                max: maxNum,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],//取值范围的文字
                inRange: {
                    color: ['#e0ffff', '#006edd']//取值范围的颜色
                },
                show:true//图注
            },
            geo: {
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom:1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '信息量',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };
      myChart.setOption(option);
    
      window.addEventListener('resize', function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
          myChart.resize();
        }, 100)
      })
    },
    }
};
</script>