在vue中封装一个ecahet图表组件

封装一个简化的echart组件，

没有把很多echart功能和样式做的很活，

只是一个简单的动态数据更新图表的组件化小例子，

首先创建个小文件

 写入一行小代码

（这里犯了个错误，直接给div写点击事件的话，操作的是 Canvas(DOM元素)，而非图表上的节点，导致点了半天只弹出一堆鼠标xy坐标的信息，而不是我要的折线图表里横纵坐标上的数据）

 

把 name 发出去，可以通过 this .$refs 找到你当前的 图表

如果图表有点击事件的话，用 $emit发出事件

（所以这里就得用echart内部的点击事件来发出事件 -- 才能正确返回我要的 图表内部节点的数据）

 

因为后面调接口（选择不同时间段等）会返回不同的图表数据，所以这里用一个 lineChartData 把数据部分单独弄出来

至于样式，写死就好了

 注意要在 mputed 中渲染图表

window.addEventListener('resize', () => {
　　this.lineChart_1.resize()
})

（窗口改变时echart图表大小更新）

 

 这样就把数据单独拿出来了，因为截图屏幕太小，省略了一些样式。

——————————————————————————————————————

在 父组件中 ：

 

 

在 data（） 中 也定义个 变量 lineChartData（叫啥名都行，注意前面必须用 lineChartData 来绑定） 来接收数据

然后只需要调接口 改变你 定义的这个 lineChartData 变量的 值就好了，

注意 组件中写死了 时间是 【data.time 】折线图数据是【data.lineData】；

这里发现还有一点，数据变了图表没更新 ，而  setOption(this.lineOptions(val), true) 中也加了 true 

那不行我们就在组件中监听一下数据的变化：

这样数据改变时，他就会重新绘制了。

——————————————————————————————————————————————

这里是完整代码：

<template>
  <div class="lineChart" :ref="name"></div>
</template>
<script>
export default {
  name: 'lineChart',
  data () {
    return {}
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    lineChartData: {
      type: [Array, Object]
    }
  },
  watch: {
    lineChartData: {
      handler (val) {
        this.lineChart_1.setOption(this.lineOptions(val), true)
      },
      deep: true
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.lineChart_1 = this.$echarts.init(this.$refs[this.name])
      this.lineChart_1.setOption(this.lineOptions(this.lineChartData), true)
      this.lineChart_1.on('click', (params) => {
        this.$emit('lineChartClick', params)
      })
      window.addEventListener('resize', () => {
        this.lineChart_1.resize()
      })
    },
    lineOptions (data) {
      return {
        text: '新增总订单',
        textStyle: {
          color: '#fff',
          fontWeight: 'normal',
          fontSize: 14
        },
        tooltip: {
          trigger: 'axis',
          formatter: '月份：{b} <br/>当月新增订单数 : {c}',
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.xData
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.2)'
            }
          }
        },
        series: [{
          data: data.yData,
          type: 'line',
          lineStyle: {
            color: '#93A64E',
             2
          }, // 线条的样式
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 折线图颜色渐变
                offset: 0,
                color: 'rgba(147, 166, 78,1)'
              }, {
                offset: 1,
                color: 'rgba(121, 142, 79,0.1)'
              }])
            }
          }
        }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.lineChart {
   100%;
  height: 400px;
}
</style>