echarts折线图
时间: 2023-06-29 09:19:27 浏览: 149
ECharts折线图是一种常见的数据可视化图表类型,可以用于显示数据随时间或其他连续变量的趋势。使用ECharts绘制折线图需要先准备好数据,然后在ECharts中配置相应的图表参数。
以下是一个简单的ECharts折线图的示例代码:
```javascript
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '折线图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20, 5]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在这个示例中,我们通过ECharts提供的`init`方法初始化了一个图表实例,并指定了图表容器的DOM元素。然后,我们配置了图表的各个参数,如标题、数据提示、图例、X轴、Y轴和数据系列等。最后,我们使用`setOption`方法将配置项应用到图表中,从而显示出折线图。
你可以根据自己的需求,修改相应的配置项和数据,实现自定义的ECharts折线图。
阅读全文