vue之 echarts的响应式处理

vue之 echarts的响应式处理

chart

• domWidth 动态拿到父容器的宽度！

<template>
  <div ref="chart" class="chart-box" :style="{height: height ,width: domWidth}" />
</template>
<script>
import echarts from 'echarts/lib/echarts'
export default {
  name: 'LineChart',
  props: {
    chartData: {
      type: Array,
      default: () => { return [] }
    },
    // 把data转化为option的方法
    optionMethod: {
      type: Function,
      default: (para) => { return {} }
    },
    height: {
      type: String,
      default: '400px'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    domWidth() {
      return this.width
    }
  },
  watch: {
    chartData(val) {
      const iVal = this.$_.cloneDeep(val)
      const option = this.optionMethod(iVal)
      this.setOption(option)
    }
  },
  mounted() {
    this.initChart()
    const option = this.optionMethod(this.chartData)
    this.setOption(option)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs['chart'])
      window.addEventListener('resize', () => { this.chart.resize() }) // 自适应伸缩
    },
    setOption(option) {
      this.chart.clear()
      this.chart.setOption(option)
    }
  }
}
</script>

使用 echart

    <div ref="domF" class="domF">
      <LineChart
        id="domID"
        :chart-data="chartData"
        :option-method="chartConfig.opMethod"
        :height="chartHeight"
        :width="chartWidth"
      />
    </div>

import echarts from 'echarts/lib/echarts'
data数据
      chartHeight: '400px',
      chartWidth: '100%'
  watch: {
    chartWidth(newV) {
      // console.log('newV', newV)
      if (newV === '0px' || newV === 'undefinedpx') return false
      // console.log('执行吗？')
      const barchart3 = echarts.init(
        document.getElementById('domID')
      )
      barchart3 && barchart3.resize()
    }
  },
  mounted() {
    window.onresize = () => {
      // console.log('浏览器', this.$refs.domF.offsetWidth)
      this.resizeHandler()
    }
  },
  	// 获取 echart父容器的宽度 （ 注意点：需要再从后台请求完数据后，再调用）
    resizeHandler() {
      const chartWidth = this.$refs?.domF?.offsetWidth + 'px'
      // console.log('chartWidth', chartWidth)
      this.chartWidth = chartWidth === '0px' ? '100%' : chartWidth
    }

	// 请求数据 等数据写入后，再调用 resizeHandler 方法
    async initData(timeFrom, timeTill) {
      this.chartData = data.data.results
      this.resizeHandler()
    },