echarts堆叠柱状图
注意:本文为vue的写法效果图:图例(legend)和提示框(tooltip)的配置,在另一篇文章已经讲到(传送门),这里主要讲柱状堆叠的实现。stack:数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。代码实现:legendList:["UNKNOWN", "SUCCESS","FAILED"];const myChart = echarts.init(this.$refs.veH
·
注意:本文为vue的写法
效果图:
图例(legend)和提示框(tooltip)的配置,在另一篇文章已经讲到(传送门),这里主要讲柱状堆叠的实现。
stack
:数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
代码实现:
legendList:["UNKNOWN", "SUCCESS","FAILED"];
const myChart = echarts.init(this.$refs.veHistogramChart);
const seriesData = [];
this.legendList.forEach((item, index) => {
seriesData[index] = {
name: item,
type: "bar",
barWidth: 5,
stack: "INFO", // stack相同的子元素将堆叠在一起
emphasis: {
focus: "series",
},
data: [1,0.2,0.5,5.6,8,9,...],
};
});
this.options.series = seriesData;
myChart.setOption(this.options);
更多推荐
已为社区贡献12条内容
所有评论(0)