echarts 柱状图和折线图公用同一个y轴
时间: 2024-06-20 08:02:14 浏览: 110
Echarts 柱状图和折线图
5星 · 资源好评率100%
ECharts 是一个强大的数据可视化库,它支持创建各种图表类型,包括柱状图和折线图。如果你想让柱状图和折线图共享同一个 y 轴,可以使用 ECharts 的 ` yAxis` 对象的 `splitLine` 和 `scale` 属性,以及 `type` 属性设置为 `'category'` 或 `'value'`。
以下是一个基本的配置示例:
```javascript
option = {
xAxis: { // x轴配置
type: 'category', // 假设你有类别数据
data: ['Category1', 'Category2', 'Category3']
},
yAxis: { // 共享的 y 轴
type: 'value', // 如果你想共享数值轴
splitLine: { show: true }, // 显示分割线
scale: true, // 缩放功能,使不同系列的数据范围一致
},
series: [
{
name: 'Column Chart', // 柱状图
type: 'bar', // 设置柱状图
data: [20, 40, 60] // 数据
},
{
name: 'Line Chart', // 折线图
type: 'line', // 设置折线图
data: [10, 30, 50] // 数据
}
]
};
```
阅读全文