echarts一个坐标制作多个图
时间: 2023-11-21 17:04:46 浏览: 67
可以使用 echarts 的多个 series 来实现在一个坐标系中绘制多个图。
例如,我们可以使用以下代码来在一个坐标系中绘制一条折线和一个柱状图:
```javascript
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 定义折线图的数据
var lineData = [10, 20, 30, 40, 50, 60, 70];
// 定义柱状图的数据
var barData = [20, 30, 40, 50, 60, 70, 80];
// 定义 x 轴的数据
var xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月'];
// 绘制折线图
myChart.setOption({
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [{
name: '折线图',
type: 'line',
data: lineData
}, {
name: '柱状图',
type: 'bar',
data: barData
}]
});
```
在上面的代码中,我们通过 `series` 属性来定义了两个图表,一个是折线图,另一个是柱状图。通过设置 `xAxis` 和 `yAxis` 来定义坐标系的坐标轴,通过设置 `data` 来定义每个图表的数据。最后,将所有的配置传给 `setOption` 方法来生成图表。
你也可以通过添加更多的 `series` 来绘制更多的图表,只需要在数据和类型上进行相应的设置即可。
阅读全文