关于vue引入echarts实现双柱柱状图嵌套_echarts嵌套柱子-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44191425/article/details/122305870

本文介绍了如何在Vue项目中利用ECharts实现一个部门数据的双柱柱状图。首先展示了效果图，然后讲解了创建div并设置id，引入ECharts的相关步骤。接着，将图表逻辑封装到独立的JS文件中，并定义图表配置，包括自适应屏幕大小的处理。为了优化视觉效果，使用了内置滚动条，并调整了滚动条的位置。同时，对于数据过多的情况，可以通过设置滚动条范围来避免挤压。最后，提到了在数据为0时如何进行特殊处理，以满足产品需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天想说一下这个怎么实现，还是那句话，只有你想不到，没有产品不敢想的，先上效果图。

在这里插入图片描述
一个部门对应的数据是双柱的~

应产品需求，得实现~

定一个div 并且设置一个id <div class="department-graph" id="departmentTotalGraph"></div>

在这个页面组件里面引入 import * as echarts from 'echarts';

把我们要实现的图标的option抽出来单独写成了一个js文件然后引入 import {Option ,} from './config'

先定义一下

data(){
   
	return:{
   
		departmentTotalChart: null,
	}
}

initGraph() {
   
	 const departmentTotalDom = document.getElementById('departmentTotalGraph')
	 this.departmentTotalChart = echarts.init(departmentTotalDom)
	 
	 //中间的一些数据需要自己处理一下,处理好了就setOption
	 			处理数据
	 //数据处理好了
	 
	 this.departmentTotalChart.setOption(Option )
	 、、监听 重绘
	 window.removeEventListener("resize", this.chartResize);
      window.addEventListener("resize", this.chartResize);
}

有时候图标需要自适应大小屏，那就监听一下

chartResize(){
   
      this.departmentTotalChart.resize();
    }

提一下，之前望说了，很多时候由于布局所在的宽高受限，但是数据有很多的情况下，吧所有数据显示都会显得非常挤，于是我们可以在option里面设置一下

dataZoom: [{
   
      type: 'inside',
      show: true,
      realtime: true,
      "height": 12,
      start: 0,
      end:100,
      bottom: '2%',
    },
    {
   
      type: 'inside',
      realtime: true,
      "height": 12,
      start: 0,
      end: 100
    }
  ],

这个type有三个值，官网有明确解释，看你怎么需要，我们ui说滚动条不好看，所以放了内置。

在这里插入图片描述
处理的时候也可以判断一下数据，如果多的话，超过多少便可以把滚动条其实位置和结束位置自定一下，例如：

if (this.departmentNameList.length > 3) {
   
          Option.dataZoom = {
   
            type: 'inside',
            sho