Echarts地图添加柱状图解决方案

陈善强

已于 2022-11-25 16:51:42 修改

阅读量1.1k

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2022-11-24 17:41:57 首次发布

本文链接：https://blog.csdn.net/chenshanqiang/article/details/128023167

版权

本文介绍如何在Echarts地图上叠加柱状图，通过实例代码分享解决此类需求的经验，帮助前端开发者高效完成地图与柱状图的结合展示。

摘要由CSDN通过智能技术生成

在使用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