使用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);