vue+Echarts 地圖散點圖

寫在前頭：在使用Echarts的時候，一定要給Echarts添加一個容器，讓他有一個展示的位置

爲實現一個疫情數據狀態點分佈圖，採用了vue+Echarts得辦法實現，大致效果：

新建一個js文件，存放Echarts得各種配置

var data =[
    {name:"北京",value:"93.59"},
    {name:"天津",value:"98.42"},
    {name:"河北",value:"97.56"},
    {name:"山西",value:"97.47"},
    {name:"內蒙古",value:"83.08"},
    {name:"遼寧",value:"98.63"},
    {name:"吉林",value:"91.96"},
    {name:"黑龍江",value:"80.30"},
    {name:"上海",value:"94.51"},
    {name:"江蘇",value:"99.54"},
    {name:"浙江",value:"99.92"},
    {name:"安徽",value:"99.39"},
    {name:"福建",value:"99.16"},
    {name:"江西",value:"99.89"},
    {name:"山東",value:"98.22"},
    {name:"河南",value:"98.28"},
    {name:"湖北",value:"93.38"},
    {name:"湖南",value:"99.61"},
    {name:"廣東",value:"99.18"},
    {name:"廣西",value:"99.21"},
    {name:"海南",value:"96.43"},
    {name:"重慶",value:"98.96"},
    {name:"四川",value:"99.47"},
    {name:"貴州",value:"98.64"},
    {name:"雲南",value:"97.84"},
    {name:"西藏",value:"100.00"},
    {name:"陝西",value:"85.95"},
    {name:"甘肅",value:"98.56"},
    {name:"青海",value:"100.00"},
    {name:"寧夏",value:"100.00"},
    {name:"新疆",value:"96.05"},
];

function randomData() {
    return Math.round(Math.random()*500);
}
var geoCoordMap={
    '北京':[116.46,39.92],
    '天津':[117.2,39.13],
    '河北':[114.48,38.03],
    '山西':[112.53,37.87],
    '內蒙古':[111.65,40.82],
    '遼寧':[123.38,41.8],
    '吉林':[126.57,43.87],
    '黑龍江':[126.63,45.75],
    '上海':[121.48,31.22],
    '江蘇':[120.62,31.32],
    '浙江':[120.19,30.26],
    '安徽':[117.27,31.86],
    '福建':[119.3,26.08],
    '江西':[115.89,28.68],
    '山東':[117,36.65],
    '河南':[113.65,34.76],
    '湖北':[114.31,30.52],
    '湖南':[113,28.21],
    '廣東':[113.23,23.16],
    '廣西':[108.33,22.84],
    '海南':[110.35,20.02],
    '重慶':[106.54,29.59],
    '四川':[104.06,30.67],
    '貴州':[106.71,26.57],
    '雲南':[102.73,25.04],
    '西藏':[91.11,29.97],
    '陝西':[108.95,34.27],
    '甘肅':[103.73,36.03],
    '青海':[101.74,36.56],
    '寧夏':[106.27,38.47],
    '新疆':[87.68,43.77],
}
var convertData = function(data){
    var res = [];
    for(var i = 0;i < data.length;i ++){
        var geoCoord = geoCoordMap[data[i].name];
        if(geoCoord){
            res.push({
                name:data[i].name,
                value: geoCoord.concat(Number(data[i].value))
            });
        }
    }
    return res;
}
export default{
    title: {
        padding: 20,
        text: '省級當前治癒率分佈圖',
        subtext: '截止至2020年2月5日中午',
        x: 'left',
        textStyle: {
            color: '#fff'
        },
        subtextStyle: {
            fontStyle: 'italic'
        }
    },
    tooltip:{
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
        formatter: function (params) {
            var value = (params.value[2] + '').split('.');
            return '治癒率' + '<br/>'+ params.name + ':' + value + '%';
        }
    },
    legend:{
        show: false,
        orient: 'vertical',
        left: 'left',
        data:['']
    },
    visualMap: {
        min: 0,
        max: 100,
        pieces: [{
                min: 99,
                max:100
            },
            {
                min: 80,
                max: 99
            },
            {
                min: 60,
                max: 80
            },
            {
                min: 40,
                max: 60
            },
            {
                min: 20,
                max: 40
            },
            {
                min: 0,
                max: 20
            },
        ],
        inRange: {
            color: ['#780000', '#fb0300', '#e59306','#d7e573', '#8abda7', '#2396cf']
        },
        textStyle: {
            color: '#fff'
        }
    },
    //定義了一個座標系
    geo: {
        map: 'china',
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            //未激活樣式
            normal: {
                areaColor: 'white',
                borderColor: 'black'
            },
            //激活樣式
            emphasis: {
                areaColor: 'white'
            }
        }
    },
    selectedMode: 'single',
    series : [{
        name: '治癒率',
        type: 'scatter',
        symbolSize: 10,//控制點的大小
        coordinateSystem: 'geo',
        data: convertData(data),//加載數據

        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        }
    }]

}

在vue頁面引入該js文件，同時要引入echarts和china.js

<template>
	<!--爲echarts準備一個具備大小的容器dom-->
	<div id="main" style="width: 100%;height: 500px;">
    </div>
</template>
<script>
    import echarts from 'echarts'
    import '../../../node_modules/echarts/map/js/china.js';
	import optionMap from '../../../public/map'
	export default {
		name: '',
		data() {
			return {
			
			}
    	},
		methods:{
			initEchart(){
				var mapchart = echarts.init(document.getElementById('main'));
				mapchart.setOption(optionMap);
				window.οnresize=function(){
                    // resizeMyChartContainer();
                    mapchart.resize();
                }
			}
		},
		mounted() {
			this.initEchart()
		},
	}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		background-color:coral;
	}
</style>