前言
使用Vue + echarts 生成一个可点击的可视化全国地图。
一、安装 echarts
npm install echarts
Tips:如果安装的为 5.0 以上版本,需将低版本中的 map 文件夹复制粘贴进 node_modules 中的 echarts 文件夹中。
https://gitee.com/zhou_meng_zhao/backup/tree/master
二、html & css
<div id="map"></div>
#map {
width: 1000px;
height: 800px;
margin: 24px auto 0;
}
三、js 引入 echarts
// 地图
import * as echarts from "echarts/core";
import china from "echarts/map/json/china.json";
import {
ToolboxComponent,
TooltipComponent,
VisualMapComponent,
GeoComponent,
} from "echarts/components";
import "echarts/extension/bmap/bmap";
import { MapChart } from "echarts/charts";
四、初始化地图
mounted() {
this.initMap();
},
methods: {
// 初始化 echarts
initMap() {
echarts.use([
ToolboxComponent,
TooltipComponent,
VisualMapComponent,
GeoComponent,
MapChart,
]);
var chartDom = document.getElementById("map");
var mapChart = echarts.init(chartDom);
var option;
echarts.registerMap("china", china);
mapChart.setOption(
(option = {
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
borderType: "solid",
},
tooltip: {
trigger: "item",
},
geo: [
{
// 绘制geo地图
map: "china",
selectedMode: "single",
roam: false, // 是否可缩放
aspectScale: 0.8,
layoutCenter: ["50%", "50%"], // 地图在画布所处位置
layoutSize: 1000,
label: {
// 文字基本样式
show: false,
color: "#0A62FF",
fontSize: "0",
},
itemStyle: {
borderColor: "#fff",
},
emphasis: {
label: {
color: "#0A62FF",
},
itemStyle: {
areaColor: "#FB923C",
},
},
select: {
itemStyle: {
areaColor: "#FB923C",
},
},
regions: [
//隐藏南海诸岛
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
opacity: 0, // 为 0 时不绘制该图形
},
label: {
show: false, // 隐藏省份文案,false 不隐藏
},
},
{
name: "江西",
itemStyle: {
areaColor: "#B5D1FC",
},
},
{
name: "四川",
itemStyle: {
areaColor: "#B5D1FC",
},
},
],
},
],
})
);
mapChart.dispatchAction({
type: "geoSelect",
name: "四川",
});
option.geo[0].regions[1].selected = true;
option && mapChart.setOption(option);
mapChart.on("click", function (params) {
console.log(params);
});
},
},
Tips:echarts 5.0 版本的参数和以往写法有所区别,可能会引起一些警告报错,此地图是引入 echart 5.0,具体配置写法可参考对应文档参看。