src/charts/gauge/gauge.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仪表盘 | ECharts</title>
    <link rel="stylesheet" href="../../../style.css" />
  </head>

  <body>
    <section class="container">
      <div class="box">
        <div class="box-title">旋转式仪表盘</div>
        <div id="gauge"></div>
      </div>
      <div class="box">
        <div class="box-title">压力仪表盘</div>
        <div id="gauge1"></div>
      </div>
      <div class="box">
        <div class="box-title">压力仪表盘分析</div>
        <div id="gauge2"></div>
      </div>
    </section>

    <script type="module">
      import { debounce, customInterval } from '../../utils/common.js'
      import { handleInitChart, handleChartOptions } from '../../utils/charts.js'
      import { handleGaugeOptionsData } from './gauge.js'
      import { handleGaugeOptionsData1 } from './gauge1.js'
      import { handleGaugeOptionsData2 } from './gauge2.js'

      const options = [handleGaugeOptionsData, handleGaugeOptionsData1, handleGaugeOptionsData2]

      let echartsInstances = new Array(3).fill(undefined)
      let intervalFun = { clear: () => {} }
      const resizeFun = () => handleResize()

      const handleAllChartInstance = () => {
        echartsInstances = echartsInstances.map((_, index) =>
          handleInitChart(`gauge${index === 0 ? '' : index}`)
        )
      }
      const handleAllChartOptions = () => {
        echartsInstances.forEach((instance, index) => {
          if (instance) {
            const optionsResult = options[index]()
            handleChartOptions(instance, optionsResult)
          }
        })
      }
      const handleAllChartResize = () => {
        echartsInstances.forEach((instance) => {
          instance?.resize()
        })
      }
      const handleAllInitChart = () => {
        handleAllChartInstance()
        handleAllChartOptions()
      }
      const handleResize = debounce(() => {
        handleAllChartResize()
      }, 300)
      const handleAddEventListener = () => {
        window.addEventListener('resize', resizeFun, { passive: true })
      }
      const handleRemoveEventListener = () => {
        window.removeEventListener('resize', resizeFun)
      }
      const handleChartRefresh = () => {
        intervalFun.clear()

        intervalFun = customInterval(() => handleAllChartOptions(), 3000)
      }
      const handleInit = () => {
        handleAllInitChart()
        // handleChartRefresh()
        handleAddEventListener()
      }
      const handleReset = () => {
        intervalFun.clear()
        handleRemoveEventListener()
      }

      window.onload = handleInit
      window.onunload = handleReset
    </script>
  </body>
</html>