要实现横轴为多个系列项,每个系列项拥有的柱子数量不等的自定义柱状图,可以使用ECharts的堆叠柱状图(Stacked Bar Chart)。

首先,确保已经引入了ECharts库。

接下来,创建一个包含数据的数组,每个元素代表一个系列项,每个系列项包含一个name和一个data属性。name表示系列项名称,data表示该系列项对应的柱子的高度。

例如,数据格式如下:

var data = [
  {
    name: '系列1',
    data: [10, 20, 30]
  },
  {
    name: '系列2',
    data: [15, 25, 35, 45]
  },
  {
    name: '系列3',
    data: [5, 15]
  }
];

然后,创建一个空的option对象,并设置xAxis和yAxis的相关属性。

var option = {
  xAxis: {
    type: 'category',
    data: ['柱子1', '柱子2', '柱子3', '柱子4']
  },
  yAxis: {
    type: 'value'
  },
  series: []
};

接下来,遍历data数组,为每个系列项创建一个series对象,并设置其type为'bar',name为系列项的名称,data为系列项的数据。

for (var i = 0; i < data.length; i++) {
  var seriesObj = {
    type: 'bar',
    name: data[i].name,
    data: data[i].data
  };
  option.series.push(seriesObj);
}

最后,使用echarts.init初始化一个图表实例,并使用setOption方法将option设置给图表实例。

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

这样就实现了一个自定义柱状图,横轴为多个系列项,每个系列项拥有的柱子数量不等的效果。

echarts自定义柱状图的形式根据数据格式横轴为多个系列项每个系列项拥有的柱子数量不等。

原文地址: https://www.cveoy.top/t/topic/jdxI 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录