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中写了个异步代码，这样就不会导致数据丢失了

<template>
  <!-- 折线图 -->
  <div :id="id" class="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    sendOption: {
      type: Object,
      required: true
    },
    id:{
        type:String
    }
  },
  created() {
    window.setTimeout(() => {
      this.play_echarts()
    }, 500)
  },
  watch: {
    sendOption: {
      deep: true,
      handler() {
        this.play_echarts()
      }
    }
  },
  methods: {
    play_echarts() {
      let option = {
   //左边标题
        title: {
          text: this.sendOption.title
        },
        // 中间标题部分
        legend: {
          data:[
            {
                name:'系列1'
            }
          ]
        },
        // x轴线
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.sendOption.xData
        },
        // y轴线
        yAxis: {
          type: 'value',
          name: this.sendOption.name,
         nameTextStyle:{
            fontSize:15
         }
        },
    //主要数据源
        series: [
          {
            data: this.sendOption.series,
            type: 'line',
            // 折线图区域颜色渐变0-1
            areaStyle: {
              normal: {
                //右，下，左，上
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#fff'
                    },
                    {
                      offset: 1,
                      color: '#DCE7FE'
                    }
                  ],
                  false
                )
              }
            }
          }
        ],
        // 去掉折线图上下xy的留白
        grid: {
          x: 50,
          y: 35,
          x2: 30,
          y2: 35
        }
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(`#${this.id}`))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
</style>

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

导入挂载

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

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

//注册
components:{
      ComEcharts
  },

//挂载并且传值
<com-echarts :sendOption="echartsData" id="group1"></com-echarts>

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

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

希望对您有所帮助~