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

封装一个简化的echart组件，

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

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

首先创建个小文件

写入一行小代码

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

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

因为后面调接口（选择不同时间段等）会返回不同的图表数据，所以这里用一个 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" @click="lineClick"></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)
      window.addEventListener('resize', () => {
        this.lineChart_1.resize()
      })
    },
    lineClick (params) {
      this.$emit('lineChartClick', params)
    },
    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: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06']
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.2)'
            }
          }
        },
        series: [{
          data: data,
          type: 'line',
          lineStyle: {
            color: '#93A64E',
            width: 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 {
  width: 100%;
  height: 400px;
}
</style>

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

猜你喜欢