vue项目封装echars基础折线图，并且多个页面显示同一折线图

1、在vue中使用cnpm i echars -S安装

2.、在components组件中新建echars文件，用于封装

3、导入echars，并且编写图形代码，使用了父子组件传值，需要使用echars的直接导入并且传递对应值就可以了，！！！主要，导入echars代码一定要import * as echarts from 'echarts'，这个一定要加上*号，不然报错

4、id是如果我在一个页面同样适用了这个图形只是显示不同，需要使用id来判断，不然就会出现一个1能显示一个显示不了，

5、因为组件挂载是同步的，但是echars是异步的，所以在tab切换的时候特别容易数据丢失，所以我在created中写了个异步代码，这样就不会导致数据丢失了

6、父组件传值给子组件接收

导入挂载

echarsData是主要传入数据源，id只要保证是唯一的就可以了，aa，bb都可以，但是不能重复

import ComEcharts from '../../components/comEcharts/discountEcharts.vue';//导入

//注册
components:{
      ComEcharts
  },

//挂载并且传值

data中echarsData数据，我这边显示的是静态数据，如果需要使用动态，等后端传值之后赋值就好了

echartsData:{
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [820, 932, 901, 934, 1290, 1330, 1320],
        name: '单位 元/公斤'
      }

希望对您有所帮助~