首页 前端知识 使用Echarts.js绘制中国地图

使用Echarts.js绘制中国地图

2024-03-05 09:03:10 前端知识 前端哥 440 229 我要收藏

使用Echarts.js绘制中国地图

一、页面效果

在这里插入图片描述

二、功能描述

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

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

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

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

*注意:

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

三、具体代码

html结构
<!-- 准备渲染echarts的画布 -->  
<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>
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);
    },
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);

四、相关资料

china.json地图数据

Echarts.js 配置文档

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3278.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!