使用Echarts.js绘制中国地图

使用Echarts.js绘制中国地图

一、页面效果

二、功能描述

​ 1、展示中国所有省份，包括南海诸岛，确保领土完整，中国领土神圣且不可侵犯。

​ 2、每个省份根据对应数据的不同渲染不同的颜色，根据数据从小到大，对应底部视觉映射组件指定的颜色渐变区间内从浅到深。

​ 3、每个省份不可被选中，但鼠标hover会展示对应数据信息，且对应数据图形具有hover高亮样式。

​ 4、颜色渐变区间对应的数据区间，由数据列表的实际数据决定，最小值为0，最大值为数据列表的最大值。

*注意：

​ 1、当前案例是在Vue2中使用，echarts.js版本为5.3.2。

三、具体代码

html结构

  
<div class="china-map" id="map">div>

<script>
// 引入echarts依赖
import * as echarts from "echarts";
// 导入中国地图JSON数据
import mapJson from "@/assets/json/china.json";
script>

<style>
.china-map {
  height: 476px; /* 必须指定画布的高度 否则无法渲染 */
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

js渲染逻辑

    // 渲染地图函数（最大值参数可不传递，默认为10000）
showMap(dataList, maxValue = 10000) {
      // 判断是否已经存在实例 避免重复注册
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      if (!myChart) {
        myChart = echarts.init(document.getElementById("map"));
      }
  		// 注册地图
      echarts.registerMap("china", mapJson); 
      var option;
      option = {
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型-数据项图形hover触发
          formatter: "{b}：{c}人", // hover提示框展示的内容
        },
        // 视觉映射组件
        visualMap: {
          orient: "horizontal", // 显示方式-水平
          left: "center", // 距离容器左侧的位置-居中
          min: 0, // 数据最小值
          max: maxValue, // 指定数据最大值
          itemHeight: 200, // 组件高度-200px(设置显示方式为水平之后，组件高度即为宽度)
          inRange: {
            color: ["#c2e9ff", "#2662a9"], // 范围颜色-从小到大渐变颜色区间
          },
          hoverLink: false, // 是否启用数据项图形hover时的联动高亮效果。
          // text: ["高", "低"], // 组件两侧的文本
        },
        series: [
          {
            name: "中国", // 地图名称
            type: "map", // 系列类型-地图
            map: "china", // 地图类型-与registerMap注册地图的名字相同
            roam: false, // 是否开启鼠标缩放和平移漫游
            zoom: 1.08, // 当前视角的缩放比例
            select: {
              disabled: true, // 数据项图形是否能被选中
            },
            label: {
              normal: {
                show: false, // 是否在数据图形上展示省份名称
              },
            },
            data: dataList, // 渲染的数据列表
          },
        ],
      };
      option && myChart.setOption(option);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

js调用逻辑：

// 省略前置逻辑
// 从后端接口获取要渲染的数据列表 name-对应省份 value-对应数据量
const data = [
        {
          name: "内蒙古",
          value: 6666,
        },
        {
          name: "山东",
          value: 99999,
        },
        {
          name: "青海",
          value: 9999,
        },
        {
          name: "河北",
          value: 999,
        },
        {
          name: "新疆",
          value: 99,
        },
        {
          name: "西藏",
          value: 9,
        },
        {
          name: "四川",
          value: 69999,
        },
        {
          name: "黑龙江",
          value: 28848,
        },
        {
          name: "甘肃",
          value: 54321,
        },
        // 其他数据。。。。
];
// 获取数据列表的最大值
const maxValue = 100000;
// 调用渲染函数 渲染地图数据
this.showMap(data, maxValue);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

四、相关资料

china.json地图数据

Echarts.js 配置文档