Ecahet chart in a package assembly in vue

Echart a simplified package assembly,

Echart not put a lot of features and styles to make very live,

Is simply a component of the dynamic data updates small example graph,

First create a small file

Write small code line

The name issue to go through . $ Refs this to find your current chart

If the chart has a click event, then use $ emit emit events

Because the back transfer interface (select a different time range) will return different data charts, so here with a lineChartData data portion comes out separately

As for style, write like dead

Note To mputed rendering charts

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

(Echart graph update window changes size)

Such data put out alone, because theme screen is too small, some of the patterns is omitted.

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

In the parent components:

The data () also defines variables lineChartData (other name will do, attention must be bound by the foregoing lineChartData) to receive data

Then you just need to adjust the interface to change the value of variables defined lineChartData like,

Note the assembly time is written dead] [data.time line chart data is [data.lineData];

Another point here was found, did not update the chart data has changed, and setOption (this.lineOptions (Val), true ) also added a true

They will not listen to us about the changes in the assembly of data:

When this data is changed, he will be redrawn.

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

Here is the complete code:

<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: ' Month: {b} <br/> new month Order Number: {C} ' , 
          axisPointer: { 
            type: ' none ' 
          } 
        }, 
        XAXIS: { 
          type: ' category ' , 
          boundaryGap: to 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 
          }, // the line style 
          AreaStyle: { 
            Normal: { 
              Color: new new  the this . echarts.graphic.LinearGradient $ ( 0 , 0 , 0 , . 1 , [{ // line chart Color gradient 
                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>

Ecahet chart in a package assembly in vue

Guess you like