目標(biāo)需要實(shí)現(xiàn)上圖所示的新疆區(qū)域
1肢藐、首先需要下載echarts與echarts-gl依賴(lài)
npm install echarts --save
npm install echarts-gl -- save
2敛劝、相關(guān)vue文件中引入echarts與新疆省界的geojson
import * as echarts from 'echarts';
import xinjiang from "./xinjiang.json";
3担孔、定義div
<div id="main"></div>
4椭蹄、最終實(shí)現(xiàn)
var option = {
geo: [{
map: 'JS',
zlevel: 5,
label: {
show: true,
textStyle: {
color: '#eee',
fontWeight: 'bold'
}
},
itemStyle: {
color: '#38BA99', // 背景
borderWidth: '1', // 邊框?qū)挾? 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);
