如何实现echart的堆叠图重叠，都从0开始

最新推荐文章于 2025-04-15 14:41:36 发布

码农小王123123

最新推荐文章于 2025-04-15 14:41:36 发布

阅读量1.1k

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_56666791/article/details/133694016

版权

文章讲述了如何在Vue应用中使用ECharts库创建堆叠图进行收益分析，通过调整series的stack属性、barGap和z属性解决了数据的重叠问题。

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

原因

为了实现年、季度、月的收益分析，我希望使用堆叠图来对比收益量
但是堆叠是按照上一个的终点作为下一个柱状图的起点的

解决

首先修改series的stack属性，多个柱状图同一个属性意味着会堆叠到一起，让不同的柱状数据都改成相互不一样的stack属性
修改后发现每个柱状图都分开了，并且从0开始
然后使用 barGap: ‘-100%’,//添加此配置项即为重叠效果
发现有的数据被覆盖了，被前面的数据挡住了
最后使用z这个属性设置前后
z:“3”,

代码

<template>
    <div>
        <div ref="chart" style="width:550px;height:150px"></div>
        
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import {sitegetAsyncMonthEarningData,groupgetAsyncMonthEarningData} from '../../../api/fenxi'

import { selectedStoreHook,useselectedStore } from "../../../store/modules/selected";


const store = useselectedStore();
onMounted(()=>{
     init(); // 将init函数调用移动到test赋值之后
    fetchData(); // 在mounted钩子函数中调用fetchData函数
   
})

const data =  ref();

var yearEarning = ref();
var seasonEarning = ref();
var monthEarning = ref();
let temp = null;
const fetchData = () => {
if(store.typeid==1){
  sitegetAsyncMonthEarningData().then(response => {
     //console.log(response);
      data.value=response.data;

      yearEarning.value =data.value.yearEarning;
      seasonEarning.value =data.value.seasonEarning;
      monthEarning.value =data.value.monthEarning;
      init(); // 将init函数调用移动到test赋值之后
});
}else if(store.typeid==2){
  groupgetAsyncMonthEarningData().then(response => {
     //console.log(response);
      data.value=response.data;
     
      yearEarning.value =data.value.yearEarning;
      seasonEarning.value =data.value.seasonEarning;
      monthEarning.value =data.value.monthEarning;
      init(); // 将init函数调用移动到test赋值之后

});
}else{
  sitegetAsyncMonthEarningData().then(response => {
     //console.log(response);
      data.value=response.data;

      yearEarning.value =data.value.yearEarning;
      seasonEarning.value =data.value.seasonEarning;
      monthEarning.value =data.value.monthEarning;
      init(); // 将init函数调用移动到test赋值之后
});
}
}
const chart = ref();



async function init() {
    var myChart = echarts.init(chart.value);
 

  var  option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
         scale: true,
         
         boundaryGap: [0, 0], // 将boundaryGap的值改为[0, 0]
        min: null, // 将min的值设置为null

    },
    yAxis: {
        type: 'category',
        data: ['收益']
    },
    series: [
        {
            name: '',
            type: 'bar',
            stack: '总量',
           
            z:"3",
            label: {
                show: true,
                position: 'top'
            },
            data: [monthEarning.value],
            barMinHeight: 0,
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量1',
            z:"2",
            barGap: '-100%',//添加此配置项即为重叠效果
            label: {
                show: true,
                position: 'bottom'
            },
            data: [seasonEarning.value],
            barMinHeight: 10,
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量2',
            z:"1",
            barGap: '-100%',//添加此配置项即为重叠效果
            label: {
                show: true,
                position: 'top'
            },
            data: [yearEarning.value],
             barMinHeight: 30,
        },
        
    ]
};

    myChart.setOption(option);
    
}

</script>