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

<template>
  <Background :title-text="titleText" :select-option-mode="selectOptionMode" :select-options="selectOptions"
    :in-select-options="inSelectOptions" @mode1-2-select="handleHeaderSelectChange" @mode3-select="handleInSelect">
    <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>
  </Background>


</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'
import Background from '../Background/index.vue'
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)
})

const titleText = computed(() => {
  return props.chartConfig.option.titleText;
});
const selectOptionMode = computed(() => {
  return props.chartConfig.option.selectOptionMode;
});
const selectOptions = computed(() => {
  return props.chartConfig.option.selectOptions;
});
const inSelectOptions = computed(() => {
  return props.chartConfig.option.inSelectOptions;
});
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
})
const handleHeaderSelectChange = (value: string) => {
  console.log('模式1/2选中值：', value);
}
const handleInSelect = (value: string) => {
  console.log('模式3选中值：', value);

}

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

</script>

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

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