echarts 平滑面积图
时间: 2023-07-08 16:56:07 浏览: 165
要制作 Echarts 平滑面积图,可以使用 Echarts 中的 line 和 area 组件。首先,需要设置数据源,包括 x 轴的数据和 y 轴的数据,如下所示:
```javascript
var data = {
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
yData: [120, 200, 150, 80, 70, 110, 130]
};
```
然后,需要设置 Echarts 的配置项,包括标题、x 轴和 y 轴的标签、图例等,如下所示:
```javascript
var option = {
title: {
text: 'Smooth Area Chart'
},
xAxis: {
type: 'category',
data: data.xData
},
yAxis: {
type: 'value'
},
legend: {
data: ['Data']
},
series: [{
name: 'Data',
type: 'line',
smooth: true,
areaStyle: {},
data: data.yData
}]
};
```
其中,smooth 属性设置为 true,表示要绘制平滑曲线,areaStyle 属性设置为空对象,表示要绘制面积图。最后,将数据源和配置项传入 Echarts 的初始化函数中,即可生成平滑面积图:
```javascript
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
```
以上就是制作 Echarts 平滑面积图的基本步骤。
阅读全文
相关推荐
















