vue echarts 自定义指令

import echarts from 'echarts'
export default {
  deep: true,
  // 插入父节点时调用
  inserted: function (el, binding) {
    let myChart = echarts.init(el)
    let option = binding.value

    myChart.showLoading()
    myChart.setOption(option)
    myChart.hideLoading()
    let oldResize = window.onresize
    window.onresize = () => {
      oldResize()
      myChart.resize()
    }
  },
  update: function (el, binding) {
    let myChart = echarts.getInstanceByDom(el)
    let option = binding.value

    myChart.setOption(option)
  }
}

组件内写法如下

<template>
  <!-- year-chart -->
  <div class="year-chart">

    <div v-line-charts="option" class="chart">
    </div>

    <setting-date v-model="date" :show="showSetting" @close="showSetting = false"></setting-date>

  </div>
</template>

<script>

import LineCharts from 'directives/LineCharts'
import echarts from 'echarts'
import Bus from 'buses/user-online'
import { getUsersOnline } from 'api/user-online'
import SettingDate from './SettingDate'
import moment from 'moment'

export default {
  data () {
    return {
      data: [],
      date: [],
      showSetting: true
    }
  },

  computed: {
    startDate () {
      return this.date ? this.date[0] : null
    },
    endDate () {
      return this.date ? this.date[1] : null
    },
    xData () {
      let data = this.data
      let xData = data.map(item => item[0])
      return xData
    },
    option () {
      let start = this.startDate ? this.startDate.toLocaleDateString() : '-'
      let end = this.endDate ? this.endDate.toLocaleDateString() : '-'
      return {
        title: {
          left: 'center',
          text: `${start}-${end}访问人数`,
          textStyle: { color: '#48576a' }
        },
        color: ['rgb(127, 168, 201)'],
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: false,
          right: 200,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [{
          type: 'slider',
          filterMode: 'weakFilter',
          showDataShadow: false,
          top: 250,
          height: 10,
          borderColor: 'transparent',
          backgroundColor: '#e2e2e2',
          handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
          handleSize: 20,
          handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 0,
            shadowColor: '#aaa'
          },
          labelFormatter: ''
        }],
        grid: {
          top: '60px',
          left: '30px',
          right: '30px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'time',
            data: this.xData,
            interval: 3600 * 24 * 1000,
            min: 'dataMin',
            max: 'dataMax',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: function (val) {
                return moment(val).format('MM-DD')
              },
              rotate: this.data.length > 15 ? 45 : 0
            }
          }
        ],
        yAxis: [
          {
            name: '访问人数(人)',
            nameLocation: 'end',
            type: 'value',
            splitLine: {
              show: true
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '访问人数',
            type: 'line',
            barWidth: '30%',
            data: this.data
          }
        ]
      }
    },

    chartDom () {
      let el = this.$el.querySelector('.chart')
      return echarts.getInstanceByDom(el)
    }
  },

  created () {
    let today = new Date()
    let oneWeek = new Date(today.getTime() - 3600 * 1000 * 24 * 7)
    this.date = [oneWeek, today]
  },

  watch: {
    date (val) {
      if (val && val.length) this.getData()
      else this.data = []
    }
  },

  activated () {
    this.getData()
  },

  methods: {
    getData () {
      if (!this.startDate || !this.endDate) return
      let startTime = this.startDate.getTime()
      let endTime = this.endDate.getTime()
      getUsersOnline({ startTime, endTime }).then(res => {
        this.data = res
        this.$nextTick(() => {
          this.chartDom.off('click')
          this.chartDom.on('click', ({ data }) => {
            Bus.$emit('year-chart-click', data)
          })
        })
      })
    }
  },

  directives: { LineCharts },
  components: { SettingDate }
}
</script>

<style scoped>
.year-chart {
  position: relative;
}

.chart {
  flex-shrink: 0;
  width: 1200px;
  height: 300px;
  padding: 10px 20px;
  margin: 0 auto;
}
</style>