vue使用echarts实现地图的方法详解

npm i echarts --save

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

<template>
  <div ref="openinGChart" style="height: 600px;"></div>
</template>

<script>
import china from "../store/china.json";
export default {
	methods: {
		initCharts() {
			   // 初始化中国地图
		      this.$echarts.reGISterMap("china", china);
		      // 获取dom节点
		      let openingChart= this.$echarts.init(this.$refs.openingChart);
		      // option配置写在最下面的
		      openingChart.setOption(option);
		      window.addEventListener("resize", () => {
		        openingBankChart.resize();
		      });
		}
	},
	mounted() {
		this.initCharts();
	}
}
</script>

option = {
    // 地图背景色
    backgroundColor: "#ccd3e4",
    geo: {
        map: 'china',
    },
    tooltip: {
        trigger: 'item',
        // 自定义提示框的内容
        
    },
    series: [
        {
            type: 'map',
            map: 'china',
            geoIndex: 1,
            showLegendSymbol: false, // 存在legend时显示
            tooltip: {
                show: false
            },
            label: {
                nORMal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            roam: false,

            itemStyle: {
                normal: {
                    areaColor: "#aaa",
                    borderColor: "#ccd3e4",
                    borderWidth: 1,
                },
                emphasis: {
                    areaColor: "#aaa",
                },
            },
        }, {
            name: '省份总额度',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [{
                name: "深圳",
                value: [121.15, 31.89, 12],
            },
            {
                name: "武汉",
                value: [109.781327, 39.608266, 29]
            }],
            symbolSize: 20,
            symbol: 'circle',
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            showEffectOn: "render",
            itemStyle: {
                normal: {
                    color: {
                        type: "radial",
                        colorStops: [
                            {
                                offset: 0,
                                color: "#e5c68b",
                            },
                            {
                                offset: 0.8,
                                color: "#6e96d4",
                            },
                            {
                                offset: 1,
                                color: "#6e96d4",
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },

        },
    ]
}