0

<template>

<div style="width:100%;height:770px;" id="yunnanmap"></div>

</template>

<script>
import echarts from 'echarts';
export default {

name: 'homeMap',
data() {
    return{}
},
mounted () {
    var map = echarts.init(document.getElementById('yunnanmap'));
    const chinaJson = require('../map-data/yunnan.json');
    echarts.registerMap('yunnan', chinaJson);
    map.setOption({
        backgroundColor: '#FFF',
          
        title: {
            text: '云南企业信息',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}'
        },
        series: [],
        geo: {
            map: 'yunnan',
            label: {
                emphasis: {
                    show: true
                }
            },
        },
        visualMap: {
                min: 0,
                max: 100,
                text:['High','Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                }
            },
         series: [
        {
            name: '云南企业信息',
            type: 'map',
            mapType: 'yunnan', // 自定义扩展图表类型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[{
                    name : "普洱",
                    value : 1
                }, {
                    name : "红河",
                    value : 5
                }, {
                    name : "文山",
                    value : 10
                }, {
                    name : "曲靖",
                    value : 15
                }, {
                    name : "楚雄",
                    value : 20
                }, {
                    name : "大理",
                    value : 25
                }, {
                    name : "临沧",
                    value : 30
                }, {
                    name : "迪庆",
                    value : 35
                }, {
                    name : "昭通",
                    value : 40
                }, {
                    name : "昆明",
                    value : 45
                }, {
                    name : "丽江",
                    value : 50
                }, {
                    name : "西双版纳",
                    value : 55
                }, {
                    name : "保山",
                    value : 60
                }, {
                    name : "玉溪",
                    value : 65
                }, {
                    name : "怒江",
                    value : 70
                }, {
                    name : "德宏",
                    value : 75
                }],
        }
    ]
    });
    window.addEventListener('resize', function () {
        map.resize();
    });
}

};
</script>

clipboard.png这是我写出来的

clipboard.png

怎么做出下面的效果

2个回答

0

已采纳

画地图的话,首先需要一份geojson文件,然后后端会返回每个区域的数据,那么怎么把这两个数据联系起来呢?
方法就是比对geojson文件里面的每个featurepropertiesname字段和后端返回的数据里面的dataname字段。
问题中的地图没有着色成功,原因就是geojson里面的相应字段和后端返回来的数据里面的字段并没有匹配上。

看你的截图,数据里面的name昭通,但是你的tooltip显示的是昭通市,其他区域也有同样的问题,比如数据里面是昆明,但是地图上显示的是昆明市

clipboard.png

clipboard.png

所以,
解决办法一:修改geojson或者后端返回数据里面的name值,使二者一致
解决办法二:使用nameMap,如

nameMap: {
    '昭通市': '昭通'
    '昆明市': '昆明'
    ...
}

下面截图参考echarts官网示例

clipboard.png

0

clipboard.png

撰写答案

Planets