用javascript实现echarts的折线图
时间: 2023-11-23 14:55:45 浏览: 40
以下是使用JavaScript实现Echarts折线图的示例代码:
```javascript
// 引入Echarts库
import echarts from 'echarts'
// 获取DOM元素
const chartDom = document.getElementById('chart')
// 初始化Echarts实例
const myChart = echarts.init(chartDom)
// 配置Echarts参数
const option = {
title: {
text: '折线图示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销量']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
```
以上代码中,我们首先引入了Echarts库,然后获取了一个DOM元素作为图表的容器,接着初始化了一个Echarts实例,并配置了Echarts的参数,最后使用`setOption`方法将配置项和数据显示在图表中。