echarts折线双Y双X对比图实例
时间: 2023-09-12 15:11:40 浏览: 102
很高兴为您提供echarts折线双Y双X对比图实例。您可以参考以下代码实现:
```javascript
// 初始化echarts
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '折线双Y双X对比图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销量', '利润']
},
xAxis: [{
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '销量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} 件'
}
}, {
type: 'value',
name: '利润',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value} 万元'
}
}],
series: [{
name: '销量',
type: 'line',
data: [120, 132, 101, 134, 90, 230]
}, {
name: '利润',
type: 'line',
yAxisIndex: 1,
data: [25, 30, 20, 35, 18, 40]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
以上代码的实现效果是:展示一个折线双Y双X对比图,其中x轴展示月份,左侧y轴展示销量,右侧y轴展示利润。通过添加不同颜色的线条和图例,方便查看两个数据之间的对比情况。
希望以上内容能对您有所帮助!
阅读全文