echarts图表柱状图平均线
时间: 2023-09-28 19:08:04 浏览: 119
您可以使用 Echarts 的平均线组件来在柱状图上绘制平均线。以下是一个示例代码:
```javascript
// 引入 Echarts
import echarts from 'echarts';
// 初始化图表实例
var myChart = echarts.init(document.getElementById('chart'));
// 模拟数据
var data = [120, 200, 150, 80, 70, 110, 130];
// 计算平均值
var average = data.reduce((a, b) => a + b) / data.length;
// 设置图表配置项
var option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
},
yAxis: {},
series: [
{
type: 'bar',
data: data,
markLine: {
data: [
{ yAxis: average, name: '平均线' }
]
}
}
]
};
// 渲染图表
myChart.setOption(option);
```
在上面的代码中,我们通过 `markLine` 属性设置了平均线,并将平均值作为 `yAxis` 坐标轴上的一个标记点。可以根据自己的需求修改代码中的数据和配置项,适配您的柱状图。
阅读全文