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

Isoke ·

更新时间:2024-09-20

· 1204 次阅读

全局安装echarts

将echarts绑定在原型上(main.js文件中)

准备画布

地图配置option

中国地图包（china.json）

总结

全局安装echarts

npm i echarts --save

将echarts绑定在原型上(main.js文件中)

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

option = {
    // 地图背景色
    backgroundColor: "#ccd3e4",
    geo: {
        map: 'china',
    },
    tooltip: {
        trigger: 'item',
        // 自定义提示框的内容
        /** 这里自定义显示的值是data中value数组的第二个值
         * 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
                    },
                },
            },
        },
    ]
}

中国地图包（china.json）

去除了海南多余的地方的中国地图

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注软件开发网的更多内容!

VUE Echarts 方法地图

1024 个赞