echarts堆积柱状图

最新推荐文章于 2024-05-15 11:06:01 发布

happysmartgirl

最新推荐文章于 2024-05-15 11:06:01 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/happysmartgirl/article/details/127965737

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一次写echarts 堆积柱状图,需求的这样的：
x轴有两列，并且鼠标移上去显示不同的内容。

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      return params[0].name == 'A' ? 'A' : 'B';
    }
  },
  xAxis: {
    type: 'category',
    data: ['A', 'B']//x轴两个类型
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 0],//代表A类型值的120，B类型值是0，这样A类型会有数据，B类型则不会显示柱子
      type: 'bar',
      stack: 'A',//值相同的会堆积在一起
      barMaxWidth: 40//柱状图的宽度
    },
    {
      data: [120, 0],
      type: 'bar',
      stack: 'A',
      barMaxWidth: 40
    },
    {
      data: [120, 0],
      type: 'bar',
      stack: 'A',
      barMaxWidth: 40
    },
    {
      data: [120, 0],
      type: 'bar',
      stack: 'A',
      barMaxWidth: 40
    },
    {
      data: [0, 200],
      type: 'bar',
      stack: 'B',
      barMaxWidth: 40
    },
    {
      data: [0, 200],
      type: 'bar',
      stack: 'B',
      barMaxWidth: 40
    },
    {
      data: [0, 200],
      type: 'bar',
      stack: 'B',
      barMaxWidth: 40
    },
    {
      data: [0, 200],
      type: 'bar',
      stack: 'B',
      barMaxWidth: 40,
      barGap: '-100%' 
    }
  ]
};

option && myChart.setOption(option);

在这里插入图片描述
不加barGap:‘-100%’

因为

值虽然为0，但是也占空间，为了让X轴文字与柱状图对齐，所以要加barGap:‘-100%’