vue2 echarts默认只显示一条折线数据
时间: 2023-09-10 14:06:48 浏览: 110
echarts 世界地图(地图飞线,地图数据展示,热力显示)
3星 · 编辑精心推荐
如果您想要在Vue2中使用Echarts显示多条折线数据,可以按照以下步骤进行操作:
1. 在Vue组件中引入Echarts和需要显示的数据。
```javascript
import echarts from 'echarts'
export default {
data() {
return {
chartData: [
{
name: '折线一',
data: [10, 20, 30, 40, 50],
type: 'line'
},
{
name: '折线二',
data: [20, 30, 40, 50, 60],
type: 'line'
}
]
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
let myChart = echarts.init(this.$refs.chart)
myChart.setOption({
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value'
},
series: this.chartData
})
}
}
}
```
2. 在Vue组件的模板中添加Echarts的容器。
```html
<template>
<div ref="chart" style="width: 100%; height: 300px;"></div>
</template>
```
在以上代码中,我们将需要显示的数据存储在了Vue组件的data中,然后在mounted钩子函数中调用了initChart方法,该方法使用Echarts的init方法初始化图表,并将数据传递给setOption方法进行配置,最后将图表渲染到模板中的容器中。
希望以上代码能够对您有所帮助!
阅读全文