echarts 柱状堆叠图（图例和x轴都是动态的）

问题描述：

echarts柱状堆叠图，是很常用的图表，官网的例子很简单。图例（legend），x轴（xAxis）都是写死的。但是一般实际应用中都是动态的。下面就举个例子，实现图例和x轴都是动态的柱状堆叠图。

echarts 官网柱状堆叠图示例

实现思路及步骤：

思路：通过官网的例子，我们能知道

xAxis 是一个数组
series 是一个数组对象其中name需要对应着的是图例，有几个图例 series里就应该有几个项。需要把你的数据处理成和例子数据结构一样的。
stack 这个属性很重要 Documentation - Apache ECharts stack API，官网的例子里是三个柱状图并列。stack 相同的就会堆叠在一起（stack 有几个他就会有几排并列，官网例子里有Ad,Search Engine他就有两个堆叠，去掉没有 stack属性的就能看到了）。

知道了这些就很清晰了。

第一步就是遍历数据，找出 x轴的数据（切记要去重）
遍历数据生成 series

其实就是对数据的处理。

示例：

把这样的数据做成堆叠图

let data = [{ 日期: '2022-08-16', 要素名称: '空调液加注-正压压力', 报警总次数: 15 },{ 日期: '2022-08-16', 要素名称: '空调液加注-正压检漏值', 报警总次数: 3 },{ 日期: '2022-08-16', 要素名称: '刹车液加注-正压压力', 报警总次数: 5 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空值', 报警总次数: 6 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空时间', 报警总次数: 6 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-加注量', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '空调液加注-正压压力', 报警总次数: 45 }, ,{ 日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-含水量', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '空调液加注-二次抽真空值', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-正压压力', 报警总次数: 15 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-加注量', 报警总次数: 6 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-正压压力', 报警总次数: 23 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 3 },{ 日期: '2022-08-18', 要素名称: '空调液加注-加注量', 报警总次数: 3 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-精真空值', 报警总次数: 6 },{ 日期: '2022-08-18', 要素名称: '空调液加注-正压压力', 报警总次数: 69 },{ 日期: '2022-08-18', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 3 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-含水量', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-正压压力', 报警总次数: 31 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-精真空值', 报警总次数: 12 },{ 日期: '2022-08-19', 要素名称: '空调液加注-正压压力', 报警总次数: 99 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '空调液加注-正压检漏值', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '空调液加注-真空检漏值', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-加注量', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-含水量', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏时间', 报警总次数: 6 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '空调液加注-加注量', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '空调液加注-正压检漏值', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '空调液加注-真空检漏值', 报警总次数: 15 },];

代码：

把该代码复制到官网例子里就能看到效果。

let data = [{ 日期: '2022-08-16', 要素名称: '空调液加注-正压压力', 报警总次数: 15 },{ 日期: '2022-08-16', 要素名称: '空调液加注-正压检漏值', 报警总次数: 3 },{ 日期: '2022-08-16', 要素名称: '刹车液加注-正压压力', 报警总次数: 5 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空值', 报警总次数: 6 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-二次抽真空时间', 报警总次数: 6 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-加注量', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '空调液加注-正压压力', 报警总次数: 45 }, ,{ 日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-含水量', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '空调液加注-二次抽真空值', 报警总次数: 3 },{ 日期: '2022-08-17', 要素名称: '刹车液加注-正压压力', 报警总次数: 15 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-加注量', 报警总次数: 6 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-正压压力', 报警总次数: 23 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 3 },{ 日期: '2022-08-18', 要素名称: '空调液加注-加注量', 报警总次数: 3 },{ 日期: '2022-08-18', 要素名称: '刹车液加注-精真空值', 报警总次数: 6 },{ 日期: '2022-08-18', 要素名称: '空调液加注-正压压力', 报警总次数: 69 },{ 日期: '2022-08-18', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 3 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-含水量', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-正压压力', 报警总次数: 31 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-精真空值', 报警总次数: 12 },{ 日期: '2022-08-19', 要素名称: '空调液加注-正压压力', 报警总次数: 99 },{ 日期: '2022-08-19', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '空调液加注-正压检漏值', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '空调液加注-正压检漏时间', 报警总次数: 6 },{ 日期: '2022-08-19', 要素名称: '空调液加注-真空检漏值', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-加注量', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-含水量', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏值', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-正压检漏时间', 报警总次数: 6 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏时间', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '空调液加注-加注量', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '刹车液加注-真空检漏值', 报警总次数: 9 },{ 日期: '2022-08-20', 要素名称: '空调液加注-正压检漏值', 报警总次数: 12 },{ 日期: '2022-08-20', 要素名称: '空调液加注-真空检漏值', 报警总次数: 15 },];console.log(data)let date = []; //x轴日期let lenged = []; //series的个数let s = [];data.map((item) => {date.push(item["日期"]);lenged.push(item["要素名称"]);});date = [...new Set(date)]; //去重lenged = [...new Set(lenged)];console.log(date, lenged)let series = [];lenged.map((item) => { //生成  serieslet obj = {name: item,type: "bar",stack: "As",emphasis: {focus: 'series'},data: []};series.push(obj);});console.log(series)data.map((item) => {//对series 的data进行处理series.map((item1) => {if (item1.name == item["要素名称"] && date.indexOf(item["日期"]) > -1) {item1.data[date.indexOf(item["日期"])] = item["报警总次数"]};})})option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: date}],yAxis: [{type: 'value'}],series: series
};

echarts 柱状堆叠图（图例和x轴都是动态的）相关推荐

python pyecharts Bar柱状堆叠图
柱状堆叠图,适合两个商家直接比较 attr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋" ...
用Python pyecharts v1.x 绘制图形（一）:柱状图、柱状堆叠图、条形图、直方图、帕累托图、饼图、圆环图、玫瑰图
文章目录关于pyecharts 柱状图堆叠柱状图条形图直方图帕累托图(复合图) 饼图圆环图玫瑰图下一节关于pyecharts pyecharts是一个用于生成echart(百度开源的 ...
echarts入门常用图表（柱状堆叠图）
echarts堆叠图柱状图的核心代码是在series中设置stack,拿官网的示例来讲,stack里内容相同的为一组堆叠效果图步骤步骤一:引入echarts.js <script src= ...
ECharts 柱状排名图柱子上方显示文字与图标
直接上干货! 效果如下: 代码如下: methods: 中的方法 initChart() {let that = this;const fontColor = '#00D8FE'this.chart ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
一.图表布局条形(柱状)图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例.SwiftUI 对探索不同布局和预览实时视图结果是很友好的,很容易将部分内容提取到子视图中,以便每个部分都很 ...
使用 D3.js 创建柱状堆积图
柱状堆积图项目地址使用 D3.js 创建的图表: 使用 D3.js 创建根据值域颜色渐变的地图 D3.js 中动态计算 x 轴 y 轴的宽度以及偏移量在 Ember.js 项目中由浅入深使用 D ...

echarts 柱状堆叠图（图例和x轴都是动态的）

问题描述：

实现思路及步骤：

示例：

代码：

echarts 柱状堆叠图（图例和x轴都是动态的）相关推荐

最新文章

热门文章