目标需要实现上图所示的新疆区域
1、首先需要下载echarts与echarts-gl依赖
npm install echarts --save
npm install echarts-gl -- save
2、相关vue文件中引入echarts与新疆省界的geojson
import * as echarts from 'echarts';
import xinjiang from "./xinjiang.json";
3、定义div
<div id="main"></div>
4、最终实现
var option = {
geo: [{
map: 'JS',
zlevel: 5,
label: {
show: true,
textStyle: {
color: '#eee',
fontWeight: 'bold'
}
},
itemStyle: {
color: '#38BA99', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#67EECE', // 边框颜色
}
},
{
map: 'JS',
top: '12%',
itemStyle: {
color: '#28543E', // 背景
borderColor: '#46D2AE', // 边框颜色
shadowColor: '#679380', // 外部阴影
shadowBlur: '65'
}
}
]
// 地图
let chart = echarts.init(document.getElementById('main'));
echarts.registerMap('JS', xinjiang);
chart.setOption(option);
