Draw a map of China using Echarts.js
1. Page effect
2. Function description
1. Display all provinces in China, including the South China Sea Islands, to ensure territorial integrity. China’s territory is sacred and inviolable.
2. Each province renders different colors according to the corresponding data. According to the data, from small to large, the color gradient interval specified by the corresponding bottom visual mapping component is from light to dark.
3. Each province cannot be selected, but the corresponding data information will be displayed when the mouse hovers, and the corresponding data graphics have a hover highlight style.
4. The data interval corresponding to the color gradient interval is determined by the actual data in the data list. The minimum value is 0 and the maximum value is the maximum value of the data list.
*Notice:
1, Current example is in use in . 5.3. 2, echarts.js version originalVue2
3. Specific codes
html structure
<!-- 准备渲染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 rendering logic
// 渲染地图函数（最大值参数可不传递，默认为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 calling logic:
// 省略前置逻辑
// 从后端接口获取要渲染的数据列表 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);