<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: '云南企業(yè)信息',
        },
        tooltip: {
            trigger: 'item',
            formatter: '<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: '云南企業(yè)信息',
            type: 'map',
            mapType: 'yunnan', // 自定義擴(kuò)展圖表類型
            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>

這是我寫出來的

怎么做出下面的效果