echarts绘制中国地图

安装依赖

1. 下载 echarts

npm i echarts

2. 下载 china.js

https://gitee.com/xiao-zhe-is-not-lazy/assets

基础使用

import { defineComponent, onMounted, reactive } from "vue";
import { option } from "./config";
import * as echarts from "echarts";
import "@/assets/js/china";
import { cityData } from "./data";

export default defineComponent({
  setup() {
    let myEcharts;
    const state = reactive({
      option: null,
    });
    const methods = {
      init() {
        methods.initEcharts();
        state.option.series[0].data = cityData;
        // 重新设置option
        myEcharts.setOption(state.option);
      },
      // 初始化echarts
      initEcharts() {
        // 初始化echarts实例
        myEcharts = echarts.init(document.getElementById("map-echarts"));
        state.option = option;
        // 使用刚指定的配置项和数据显示图表。
        myEcharts.setOption(state.option);
      },
    };

    onMounted(() => {
      methods.init();
    });
  },
});

config:

export const option = {
  geo: {
    map: "china", // 地图类型
    zoom: 1, // 缩放级别
    roam: true, // 是否开启鼠标缩放和平移漫游
    top: "15%",
    left: "10%",
    // 地图标签的配置
    label: {
      normal: {
        show: true,
      },
      emphasis: {
        show: true,
      },
    },
  },
  // 悬浮窗
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      return params.name;
    },
  },
  legend: {
    orient: "horizontal", // 图例的方向
    left: "right", // 图例的位置
    data: ["路飞"], // 图例显示的数据，即图例项的名称列表
  },
  // 左下角图例
  visualMap: [
    {
      seriesIndex: 0,
      min: 0,
      max: 100,
      left: "left",
      top: "bottom",
      text: ["高", "低"], // 文本，默认为数值文本
      calculable: true,
      inRange: {
        color: ["#f4d7d2", "#f1674e"],
      },
    },
  ],
  series: [
    {
      geoIndex: 0,
      coordinateSystem: "geo",
      type: "map",
      name: "路飞",
      roam: true,
      itemStyle: {
        normal: {
          color: "#f1674e",
        },
      },
      label: {
        normal: {
          show: true,
        },
        emphasis: {
          show: true,
        },
      },
      tooltip: {
        formatter: function (params) {
          return `${params.name} ${params.value}%`;
        },
      },
      data: [],
    },
  ],
};

假数据 data

export const cityData = [
  { name: "澳门", code: "820000", value: 0 },
  { name: "香港", code: "810000", value: 0 },
  { name: "台湾", code: "710000", value: 0 },
  { name: "海南", code: "460000", value: 0 },
  { name: "宁夏", code: "640000", value: 0 },
  { name: "四川", code: "510000", value: 0 },
  { name: "西藏", code: "540000", value: 0 },
  { name: "青海", code: "630000", value: 0 },
  { name: "广东", code: "440000", value: 0 },
  { name: "贵州", code: "520000", value: 0 },
  { name: "福建", code: "350000", value: 0 },
  { name: "吉林", code: "220000", value: 0 },
  { name: "陕西", code: "610000", value: 0 },
  { name: "内蒙古", code: "150000", value: 0 },
  { name: "山西", code: "140000", value: 0 },
  { name: "甘肃", code: "620000", value: 0 },
  { name: "广西", code: "450000", value: 0 },
  { name: "湖北", code: "420000", value: 0 },
  { name: "江西", code: "360000", value: 0 },
  { name: "浙江", code: "330000", value: 0 },
  { name: "江苏", code: "320000", value: 0 },
  { name: "新疆", code: "650000", value: 0 },
  { name: "山东", code: "370000", value: 0 },
  { name: "安徽", code: "340000", value: 0 },
  { name: "湖南", code: "430000", value: 0 },
  { name: "黑龙江", code: "230000", value: 0 },
  { name: "辽宁", code: "210000", value: 0 },
  { name: "云南", code: "530000", value: 0 },
  { name: "河南", code: "410000", value: 0 },
  { name: "河北", code: "130000", value: 0 },
  { name: "重庆", code: "500000", value: 0 },
  { name: "上海", code: "310000", value: 0 },
  { name: "天津", code: "120000", value: 0 },
  { name: "北京", code: "110000", value: 0 },
];

更多的 option 的配置请参考：https://echarts.apache.org/zh/option.html#title