echarts 平滑曲线,多条曲线不要堆叠
时间: 2023-07-11 17:51:59 浏览: 53
要绘制 echarts 平滑曲线,多条曲线不要堆叠的图表,可以使用 echarts 官方提供的图表类型 `line`,并设置 `stack` 属性为 `null`,同时设置 `smooth` 属性为 `true`。具体实现步骤如下:
1. 引入 echarts 库和主题:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/theme/macarons.js"></script>
```
2. 创建一个包含多条曲线的 echarts 图表:
```javascript
var myChart = echarts.init(document.getElementById('chart'), 'macarons');
myChart.setOption({
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: 'A',
type: 'line',
smooth: true, // 平滑曲线
stack: null, // 不堆叠
data: [10, 12, 21, 54, 260, 830, 710]
}, {
name: 'B',
type: 'line',
smooth: true, // 平滑曲线
stack: null, // 不堆叠
data: [30, 182, 434, 791, 390, 30, 10]
}]
});
```
其中,`stack` 属性设置为 `null` 表示不堆叠,`smooth` 属性设置为 `true` 表示绘制平滑曲线。
3. 在 HTML 页面中创建一个容器来显示图表:
```html
<div id="chart" style="width: 600px;height:400px;"></div>
```
以上就是使用 echarts 绘制平滑曲线,多条曲线不要堆叠的基本步骤,你可以根据实际需求调整图表的样式和数据。