echarts双宗坐标轴实现代码
时间: 2023-07-11 22:13:06 浏览: 101
echarts实现多维坐标轴
以下是一个使用 ECharts 实现双坐标轴的完整代码示例:
```javascript
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '温度和湿度变化趋势'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度', '湿度']
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
name: '温度',
axisLabel: {
formatter: '{value} °C'
}
},
{
type: 'value',
name: '湿度',
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '温度',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
yAxisIndex: 0
},
{
name: '湿度',
type: 'line',
data: [60, 65, 62, 68, 70, 75, 72],
yAxisIndex: 1
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
在这个示例中,我们通过 ECharts 的 API 创建了一个折线图,并通过 option 对象设置了图表的配置项和数据。其中,xAxis 和 yAxis 分别定义了两个坐标轴,而 series 中的两个数据系列则分别使用了不同的坐标轴。
最后,我们通过 `setOption()` 方法将配置项应用到图表中,从而实现了双坐标轴效果。
阅读全文