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> -->
      <v-chart :option="option" autosize></v-chart>
    </div>
  </div>

</template>

<script setup lang="ts">
import { PropType, computed, onMounted, ref } 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 dataJson from './data.json'
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 option = computed(() => {
//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
// })

const option = {
  // 添加标题配置
  title: {
    text: '单位：' + dataJson.unit,
    left: '3%',
    top: '3%',
    textStyle: {
      fontSize: 12,
      color: 'rgba(255, 255, 255, 0.7)',
      fontWeight: 'normal'
    }
  },
  // 提示框配置
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: '#00ffff',
    textStyle: {
      color: '#ffffff'
    }
  },
  dataset: dataJson,
  // 网格配置
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },

  // X轴配置
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      }
    },
    axisTick: {
      show: false
    },
    // 
    axisLabel: {
      color: '#80b0c4',
      interval: 0,
      fontSize: 9,
      margin: 20
    }

  },

  // Y轴配置
  yAxis: {
    type: 'value',
    min: 0,
    interval: 25,
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      formatter: '{value}'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
        type: 'solid'
      }
    }
  },

  // 数据系列配置
  series: [{
    name: '左侧',
    tooltip: {
      show: false
    },
    type: 'bar',
    barWidth: 7,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "rgba(26,102,255,0)" // 0% 处的颜色
        }, {
          offset: 1,
          color: "rgba(26,102,255,0.9)", // 100% 处的颜色
        }], false)
      }
    },
    barGap: 0,

  },
  {
    name: '右侧',
    type: 'bar',
    barWidth: 7,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "rgba(51,153,255,0)" // 0% 处的颜色
        }, {
          offset: 1,
          color: "rgba(26,102,255,1)", // 100% 处的颜色
        }], false)
      }
    },
    barGap: 0
  }, {
    name: '顶部',
    tooltip: {
      show: false
    },
    type: 'pictorialBar',
    itemStyle: {
      borderWidth: 1,
      borderColor: '#fff',
      color: '#66B2FF' // 顶部方块的颜色
    },
    symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
    symbolSize: ['13', '7'], // 第一个值控制顶部方形大小
    symbolOffset: ['-3', '-3'], // 控制顶部放行 左右和上下
    symbolRotate: -16,
    symbolPosition: 'end',
    barGap: 0,
    z: 3,

  }
  ],

  // 图形元素配置
  graphic: [{
    // 左侧阴影效果
    type: 'rect',
    left: 0,
    top: '15%',
    width: '25%',
    bottom: '3%',
    style: {
      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },   // 更强的左侧阴影
        { offset: 1, color: 'rgba(0, 0, 0, 0)' }
      ])
    },
    z: -1
  }, {
    // 底部阴影效果
    type: 'rect',
    left: '3%',
    right: '4%',
    bottom: '0',
    height: '10%',
    style: {
      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(0, 0, 0, 0)' },
        { offset: 1, color: 'rgba(0, 0, 0, 0.6)' }   // 底部阴影
      ])
    },
    z: -1
  }]
};

const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  props.chartConfig.option.dataset = newData
})

onMounted(async () => {

})

</script>

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

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