在使用echarts做地图时,遇到了在地图上添加叠加柱状图的需求,当时遇到不少问题,为了有同样需求而无从下手的前端开发人员,能够高效完成开发,特此分享自己的一点经验
话不多说,先上代码:
<template>
<div class="page">
<span class="back" @click="back">返回</span>
<div ref="chartDiv" class="chartBox" id="chartBox"></div>
</div>
</template>
<script>
import mapJsonMap from '@assets/map/citysHash.js'
import geoCoordMap from '@assets/map/geoCoordMap.js'
import {
noRound } from '@/utils/index.js'
export default {
name: 'EmploymentIndustryFive',
data() {
return {
options: {
},
mapName: '河南省',
mapData: [],
chartObj: null,
isShow: ['河南省'],
xAxisCategory: ['数据A', '数据B', '数据C'],
inflationData: [100, 20, 10],
mapStack: ['河南省']
}
},
mounted() {
this.chartObj = this.$echarts.init(document.querySelector('#chartBox'))
this.drawMap(this.mapName)
// 响应式变化
this.chartObj.on('click', this.mapClick)
window.addEventListener('resize', () => this.chartObj.resize(), false)
},
methods: {
mapClick(arg) {
console.log('arg: ', arg)
this.drawMap(arg.name)
this.mapStack.push(arg.name)
},
back() {
console.log('length: ', this.mapStack.length)
if (this.mapStack.length > 1) {
this.mapStack = this.mapStack.slice(0, this.mapStack.length - 1)
this.drawMap(this.mapStack[this.mapStack.length - 1])
}
},
async drawMap(mapName) {
this