echarts - Echarts折线图:跨多个系列添加平均/总线
问题描述
我有一个 Echarts 折线图,它在一个时间跨度上有多个系列/线,并且想添加选项以包括平均线和/或总线。我没有看到任何内置的东西可以做到这一点,但我想在我重新发明轮子并自己进行计算并将它们添加为另一个系列之前我会问。
Echart 的线系列有一个 markLine 选项,可以显示该单数系列的平均值,但这会导致每条数据线出现多条扁平线。这不是我想要的,我想要所有系列的平均值。
解决方案
通常这是不可能的,因为 markLine 仅存在于系列上下文中,但您可以使隐藏的加法系列由所有其他系列的平均值组成,结果将与您想要的相同。
例如:
var data = {
series01: [7, 7, 4, 5, 8, 2, 3, 5, 5, 9, 4, 3, 5, 9],
series02: [4, 9, 4, 5, 8, 4, 1, 2, 2, 6, 5, 4, 8, 3],
series03: [9, 6, 2, 4, 8, 3, 5, 4, 3, 7, 1, 2, 3, 9],
}
var seriesData = function(data) {
return Object.keys(data).map(key => {
return {
id: key,
data: data[key],
type: 'bar'
}
})
};
var option = {
xAxis: {
data: ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12", "c13"],
type: 'category',
},
yAxis: {
type: 'value'
},
tooltip: {},
series: seriesData(data),
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
/* Calculate average series data */
var avrSeriesData = function(data) {
values = Object.values(data);
transposed = values[0].map((r, i) => values.map(c => c[i]));
avrByRow = transposed.map(row => {
var rowSum = row.reduce((a, b) => a + b);
return Math.round(rowSum / row.length);
});
return avrByRow
};
var avrSeries = {
id: 'avrSeries',
type: 'bar',
data: avrSeriesData(data),
barWidth: 0.1,
barGap: 0.1,
barCategoryGap: 0.1,
color: 'transparent',
markLine: {
show: true,
data: [{
name: 'average line',
type: 'average'
}],
lineStyle: {
color: 'red'
},
}
};
myChart.setOption({
series: avrSeries
});
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
推荐阅读
- c++ - 我的代码无法将输入验证为整数
- javascript - 如何在JS中存储链接并通过html动态打开?
- ios - 观察者类没有收到通知
- sql-server - SQL Server、LIKE 与 RTRIM 性能
- php - 在登陆 URL 中通过修剪 PHP $_GET 获取哈希
- javascript - 如何在javascript中更新对象中的对象内的值?
- java - Tomcat 8.5 日志记录不忽略类
- email - Google App Engine 邮件配额不明确
- ios - 获取 UIAlertAction 的大小
- laravel - PhpSpreadsheet : 如何使用 Laravel 存储盘保存电子表格?