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;
        // 最小值 1
        let 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;