vue echart折线图
时间: 2023-11-09 14:03:42 浏览: 42
要在 Vue 中使用 ECharts 折线图,需要先安装 ECharts 和 Vue-ECharts 两个依赖包。安装命令如下:
```
npm install echarts vue-echarts
```
安装完成后,在需要使用折线图的组件中引入 Vue-ECharts,并注册为组件。然后在模板中使用 `<vue-echarts>` 标签,并通过 props 传入 ECharts 的配置项和数据即可。
以下是一个简单的示例代码:
```vue
<template>
<div>
<vue-echarts :options="chartOptions"></vue-echarts>
</div>
</template>
<script>
import VueECharts from 'vue-echarts'
export default {
components: {
VueECharts
},
data() {
return {
chartOptions: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
}
}
</script>
```