用echarts代码生成两个y轴的柱状图
时间: 2023-08-10 18:37:06 浏览: 74
好的,以下是使用 ECharts 生成两个 Y 轴的柱状图的示例代码:
```
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
tooltip: {},
legend: {
data:['销量','利润']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: [
{
name: '销量',
type: 'value'
},
{
name: '利润',
type: 'value'
}
],
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '利润',
type: 'bar',
yAxisIndex: 1,
data: [2, 10, 18, 4, 3, 6]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
上面的代码中,我们使用了 ECharts 的 `yAxis` 配置项来创建两个 Y 轴,分别对应销量和利润。在 `series` 配置项中,我们将两个柱状图的 `yAxisIndex` 分别设置为 0 和 1,以便与对应的 Y 轴对应。最后,我们调用 `setOption` 方法将配置项应用到图表中。
阅读全文