快捷導(dǎo)航

vue使用echarts實現(xiàn)地圖的方法詳解

更新時間：2022年03月24日 15:11:20 作者：HerayChen

這篇文章主要為大家詳細(xì)介紹了vue使用echarts實現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

全局安裝echarts

npm i echarts --save

將echarts綁定在原型上(main.js文件中)

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

準(zhǔn)備畫布

<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節(jié)點
		      let openingChart= this.$echarts.init(this.$refs.openingChart);
		      // option配置寫在最下面的
		      openingChart.setOption(option);
		      window.addEventListener("resize", () => {
		        openingBankChart.resize();
		      });
		}
	},
	mounted() {
		this.initCharts();
	}
}
</script>

地圖配置option

option = {
    // 地圖背景色
    backgroundColor: "#ccd3e4",
    geo: {
        map: 'china',
    },
    tooltip: {
        trigger: 'item',
        // 自定義提示框的內(nèi)容
        /** 這里自定義顯示的值是data中value數(shù)組的第二個值
         * formatter(params) {
                return (
                "<div>" +
                params.data.name +
                " <br> " +
                "省份總額度：" +
                params.data.value[2] +
                "（萬元）</div>"
                );
            }
         */
    },
    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
                    },
                },
            },

        },
    ]
}