Echarts实现中国地图、省份地图及对应数据展示
一、概述
首先ECharts 是一个使用 JavaScript 实现的开源可视化库。兼容当前绝大部分浏览器,而且提供大量可交互、可高度个性化定制的图表,满足开发者各种需求。
今天主要展示echarts地图功能。echarts内置了世界地图、中国及各个省市自治区地图数据,可通过标准GeoJson扩展地图类型。
二、echarts实现中国地图
先看实现效果
中国地图数据展示
实现步骤
首先要给echarts提供一个容器。
导入echarts和中国地图的js数据,当然有需求的可以在main文件中按需引入。
import echarts from "echarts";
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
实例化echarts对象
this.myEchart = echarts.init(this.$refs.myEchart);
参数设置,因为项目需求需要添加阴影和单独设置地图边框,所以实际上是2张地图重叠,下面那张地图做阴影和边框处理。
let option = {
tooltip: {
show: false
},
geo: {
map: "china",
roam: false,// 一定要关闭拖拽
zoom: 1