go-viee-fetch-Demo/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue

<template>
  <div class="go-energy-box">
    <div class="content">
      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
        replaceMerge: replaceMergeArr
      }" autoresize>
      </v-chart>
    </div>
  </div>

</template>

<script setup lang="ts">
import { PropType, computed, onMounted, ref, watch } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import * as echarts from 'echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, GridComponent } from 'echarts/components'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  GridComponent
])

const replaceMergeArr = ref<string[]>([])

const updataUnit = () => {
  option.value.title.text = '单位：' + option.value.unit;
}
const option = computed(() => {
  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})

watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
    updataUnit();
    option.value.dataset = newData
  }, {
  immediate: true,
  deep: false
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  props.chartConfig.option.dataset = newData
})

onMounted(async () => {
  // 更新显示单位
  updataUnit();
})

</script>

<style lang="scss" scoped>
@include go('energy-box') {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    height: 100%;
  }
}
</style>