echarts 3D地图

通过echats echats-gl 实现的3D地图页面。

先上效果图：

1.通过外边js引入方式，引入必要的js压缩文件

<script src="/static/vue-v2/vue.js"></script>
<script src="/static/assets/echarts-v5/echarts.min.js"></script>
<script src="/static/assets/echarts-v5/echarts-gl.min.js"></script> 
2.新建mixins混入的map.js 文件`

var mixins = {
data() {
return {
city: [],//数据格式
min: 0,
max: 300,
currentMouseOverIndex: null,
hasMap: false,
cityJson: null,
regionCode: ‘tangshan’,
chart: ‘’,
};
},
watch: {
},
mounted() {
window.addEventListener(“resize”, this.handleWindowResize);
this.getJson(‘唐山市’)
},
methods: {
// 返回上一级
backHistory() {
this.getJson(‘唐山市’)
},
// 引入json
getJson(name,paramsData=[], isInit = true) {
//通过 fetch 方法引入json
fetch(/static/index/js/map/${name}.json)
.then(response => response.json())
.then(data => {
let cityData = [];
if (isInit) {
data.features.map(el => {
const obj = { //city数据格式
name: el.properties.name,
code: el.properties.adcode,
value: Math.floor(Math.random() * (500 - 100) + 100)
};
cityData.push(obj)
});
this.city = cityData;
}else{
this.city=paramsData
}

                this.cityJson = data;let alphabets = [];for (let i = 65; i <= 90; i++) {alphabets.push(String.fromCharCode(i));}let regionCode = ""for (let i = 0; i < 10; i++) {regionCode += alphabets[Math.floor(Math.random() * 25)];} //regionCode 随机生成的，地图名称要用到this.echartschange(regionCode, this.city);});},/*** 当窗口缩放时，echart动态调整自身大小*/handleWindowResize() {if (!this.chart) return;this.chart.resize();},handleData(city) {let max = Math.max.apply(Math,city.map((item) => {return item.value;}));this.max = Math.ceil(max / 7) * 7;// 最小值 1let min = Math.min.apply(Math,city.map((item) => {return item.value;}));this.min = Math.floor(min);},echartschange(regionCode, cityData) {this.chart && this.chart.clear();let city = cityData ? cityData : this.city;if (!city || city.length === 0) return;this.handleData(city);console.log('mainchart:', this.$refs.mainchart)let that = this;this.chart = echarts.init(this.$refs.mainchart);echarts.registerMap(regionCode, this.cityJson); let option = {tooltip: {formatter: function (params) {let result = "";result = `<div style="width:196px;height:120px;margin-top:-12px;background:#192E5E; "><div style="width:100%;overflow:hidden;font-size:16px;font-weight:bold;color: #12C49B;padding:10px 0 4px 0"> <span style="display:inline-block">${params.name}</span></div><div style="font-size:14px;padding:2px 0 2px 0"><span style="color:rgba(203, 255, 248, 1)">项目数量</span><span style="color:rgba(18, 196, 155, 1)">${params.data.value}</span></div> </div>`;return result;