VUE项目中封装Echart折线图的方法

本文实例为大家分享了VUE项目中封装Echart折线图的具体代码，供大家参考，具体内容如下

封装Echart折线图，可显示多条折线

1. 首先在项目中全局引入Echarts，main.js中：

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.components中新建组件baseLineChart.vue，以下代码直接复制：

配置项根据自身项目来定制。

3、在组件中引入：

import baseLine from '@/components/charts/baseLineChart.vue'

chart-width 图表宽度
chart-height 图表高度
chart-unit 图表数据的显示单位
timeX为X轴数据，一般为时间数组 [‘1-1’,‘1-2’,‘1-3’ ]；
chartData为折线数据，多条数据格式 [ [1,2,3],[4,5,6] ]
seriesName为每条折线对应名称

同理可封装其他图表

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。