e-chart基本结构

vue2

<!--
 * @Description:
 * @Author: Harry
 * @Date: 2021-10-28 18:57:36
 * @Url: https://u.mr90.top
 * @github: https://github.com/rr210
 * @LastEditTime: 2021-10-28 19:07:08
 * @LastEditors: Harry
-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="stockRef"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      titleFontSize: 0,
      timerId: null
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
    clearInterval(this.timerId)
  },
  computed() {},
  methods: {
    // 初始化图表
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.stockRef)
      const initOption = {}
      this.chartInstance.setOption(initOption)
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.chartInstance.on('mouseout', () => {
        this.startInterval()
      })
    },
    getData() {
      this.updateChart()
    },
    updateChart() {
      const updateOption = {}
      this.chartInstance.setOption(updateOption)
    },
    screenAdapter() {
      this.titleFontSize = (this.$refs.stockRef.offsetWidth / 100) * 3.6
      const adapterOption = {}
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    startInterval() {
      if (this.timerId) clearInterval(this.timerId)
      this.timerId = setInterval(() => {}, 3000)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

vue3

<template>
  <div id="customerChart" :style="{ width: '90vw', height: '300px' }"></div>
</template>
<script>
import * as echarts from 'echarts'
import { onMounted, onUnmounted, reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      chartInstance: null,
      allData: null,
      titleFontSize: 0,
      timerId: null,
      dom: null
    })
    // 初始化图表
    const initChart = function () {
      state.chartInstance = echarts.init(state.dom)
      const initOption = {}
      state.chartInstance.setOption(initOption)
      state.chartInstance.on('mouseover', () => {
        clearInterval(state.timerId)
      })
      state.chartInstance.on('mouseout', () => {
        startInterval()
      })
    }
    const getData = function () {
      updateChart()
    }
    const updateChart = function () {
      const updateOption = {
        title: { text: '历史识别分析' },
        tooltip: {},
        xAxis: {
          data: ['12-3', '12-4', '12-5', '12-6', '12-7', '12-8']
        },
        yAxis: {},
        series: [
          {
            name: '用户量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      state.chartInstance.setOption(updateOption)
    }
    const screenAdapter = function () {
      state.titleFontSize = (state.dom.offsetWidth / 100) * 3.6
      const adapterOption = {}
      state.chartInstance.setOption(adapterOption)
      state.chartInstance.resize()
    }
    const startInterval = function () {
      if (state.timerId) clearInterval(state.timerId)
      state.timerId = setInterval(() => { }, 3000)
    }
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      // 绘制图表
      state.dom = document.getElementById('customerChart')
      initChart()
      getData()
      window.addEventListener('resize', screenAdapter)
      screenAdapter()
    })
    onUnmounted(() => {
      window.removeEventListener('resize', state.screenAdapter)
      clearInterval(state.timerId)
    })
    return {
    }
  }
}
</script>
<style lang='less' scoped>
</style>