SOURCE

<template>
  <div class="base-chart-warp">
    <!-- 暂无数据 begin -->
    <div
      v-if="isNoData"
      class="noData"
    >
      <div class="noData-img"></div>
      <p class="noData-txt">
        {{ noDataTxt }}
      </p>
    </div>
    <!-- 暂无数据 end -->
    <!-- 图表展示 begin -->
    <div class="base-echart">
      <div
        ref="echartDivRef"
        :style="{width, height}"
      ></div>
    </div>
    <!-- 图表展示 end -->
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  PropType,
  toRefs,
  onMounted,
  // onUnmounted,
  watchEffect,
  ref
} from "vue"
import * as echarts from "echarts"
import useEchart from "../hooks/useEchart"

export default defineComponent({
  props: {
    isNoData: { type: Boolean, default: false },
    noDataTxt: { type: String, default: "" },
    width: { type: String, default: "100%" },
    height: { type: String, default: "360px" },
    options: {
      type: Object as PropType<echarts.EChartsOption>
    }
  },
  setup(props) {
    const echartDivRef = ref<HTMLElement | undefined>()

    onMounted(() => {
      const { setOptions } = useEchart(echartDivRef.value as HTMLElement)
      watchEffect(() => {
        const { options } = toRefs(props)
        setOptions(options.value as echarts.EChartsOption)
      })
    })

    // onUnmounted(() => {
    //   echart.dispose
    // })
    return { echartDivRef }
  }
})
</script>

<style lang="scss" scoped>
// 暂无数据
.noData {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .noData-img {
    width: 184px;
    height: 151px;
    // background: url('../../../assets/images/no-data.png') no-repeat center center;
    background-size: 100% auto;
  }

  .noData-txt {
    font-size: 14px;
    color: #7b8795;
    margin-top: 30px;
  }
}
</style>


// useEchart.ts
//hooks
/****************************************************/

import * as echarts from "echarts"

export default function (el: HTMLElement) {
  const echartInstance = echarts.init(el)
  const setOptions = (options: echarts.EChartsOption) => {
    echartInstance.setOption(options)
  }
  const updateSize = () => {
    echartInstance.resize()
  }

  window.addEventListener("resize", () => {
    echartInstance.resize()
  })

  return {
    echartInstance,
    setOptions,
    updateSize
  }
}