Vue + ECharts 生成可点击的数据可视化全国地图

前言

使用Vue + echarts 生成一个可点击的可视化全国地图。

一、安装 echarts

 npm install echarts 

Tips：如果安装的为 5.0 以上版本，需将低版本中的 map 文件夹复制粘贴进 node_modules 中的 echarts 文件夹中。

点此获取 map：

https://gitee.com/zhou_meng_zhao/backup/tree/master

二、html & css

<div id="map"></div>

#map {
    width: 1000px;
    height: 800px;
    margin: 24px auto 0;
}

三、js 引入 echarts

// 地图
import * as echarts from "echarts/core";
import china from "echarts/map/json/china.json";
import {
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
} from "echarts/components";
import "echarts/extension/bmap/bmap";
import { MapChart } from "echarts/charts";

四、初始化地图

mounted() {
    this.initMap();
  },
  methods: {
    // 初始化 echarts
    initMap() {
      echarts.use([
        ToolboxComponent,
        TooltipComponent,
        VisualMapComponent,
        GeoComponent,
        MapChart,
      ]);
      var chartDom = document.getElementById("map");
      var mapChart = echarts.init(chartDom);
      var option;
      echarts.registerMap("china", china);
      mapChart.setOption(
        (option = {
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 1,
            borderType: "solid",
          },
          tooltip: {
            trigger: "item",
          },
          geo: [
            {
              // 绘制geo地图
              map: "china",
              selectedMode: "single",
              roam: false, // 是否可缩放
              aspectScale: 0.8,
              layoutCenter: ["50%", "50%"], // 地图在画布所处位置
              layoutSize: 1000,
              label: {
                // 文字基本样式
                show: false,
                color: "#0A62FF",
                fontSize: "0",
              },
              itemStyle: {
                borderColor: "#fff",
              },
              emphasis: {
                label: {
                  color: "#0A62FF",
                },
                itemStyle: {
                  areaColor: "#FB923C",
                },
              },
              select: {
                itemStyle: {
                  areaColor: "#FB923C",
                },
              },
              regions: [
                //隐藏南海诸岛
                {
                  name: "南海诸岛",
                  itemStyle: {
                    // 隐藏地图
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                  label: {
                    show: false, // 隐藏省份文案，false 不隐藏
                  },
                },
                {
                  name: "江西",
                  itemStyle: {
                    areaColor: "#B5D1FC",
                  },
                },
                {
                  name: "四川",
                  itemStyle: {
                    areaColor: "#B5D1FC",
                  },
                },
              ],
            },
          ],
        })
      );
      mapChart.dispatchAction({
        type: "geoSelect",
        name: "四川",
      });
      option.geo[0].regions[1].selected = true;
      option && mapChart.setOption(option);
      mapChart.on("click", function (params) {
        console.log(params);
      });
    },
  },

Tips：echarts 5.0 版本的参数和以往写法有所区别，可能会引起一些警告报错，此地图是引入 echart 5.0，具体配置写法可参考对应文档参看。

geo: https://echarts.apache.org/zh/option.html#geo

map: https://echarts.apache.org/zh/option.html#series-map