echarts折线图使用示例vue2
时间: 2023-10-26 19:46:31 浏览: 46
我了解您的要求,以下是echarts折线图的使用示例vue2:
1.安装echarts和vue-echarts插件
npm install echarts --save
npm install vue-echarts --save
2.在.vue文件中引入vue-echarts插件
import VueECharts from 'vue-echarts/components/ECharts.vue';
Vue.component('chart', VueECharts);
3.在vue组件中实现echarts折线图
<template>
<div class="line-chart">
<chart :options="chartOptions" :theme="theme"></chart>
</div>
</template>
<script>
export default {
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'
}]
},
theme: 'light'
};
}
};
</script>
以上是echarts折线图使用示例vue2的代码,希望对您有所帮助!