go-viee-fetch-Demo/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts

import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { EnergyConsumptionTrendConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import * as echarts from 'echarts'
import { chartInitConfig } from '@/settings/designSetting'
export const includes = []
const otherOption = {
  sceneCode: '',
  titleText: '能耗趋势',
  unit: dataJson.unit,
  selectOptionMode: 1, // 0 无 1 平行按钮 2 下拉菜单 3 容器右上角按钮 4 下拉菜单和 容器右上角
  selectOptions: {
    selectedValue: 'electricsupply',
    dataset: [
      { label: '电力', value: 'electricsupply' },
      { label: '供水', value: 'watersupply' },
      { label: '燃气', value: 'gassupply' }
    ]
  }
}
const option = {
  ...otherOption,
  dataset: dataJson,
  // 添加标题配置
  title: {
    text: '单位：' + otherOption.unit,
    left: '2%',
    top: '2%',
    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'
    }
  },
  // 网格配置
  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: '#eee',
      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: '能源消耗',
    type: 'bar',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: 'rgba(2, 206, 214, 0.8)' },    // 更暗的左侧颜色，增强阴影效果
        // { offset: 0.2, color: '#00bfbf' },  // 左侧过渡色
        { offset: 0.5, color: 'rgba(44, 162, 163, 0.5)' },  // 中间主色
        // { offset: 0.8, color: '#00bfbf' },  // 右侧过渡色
        { offset: 1, color: 'rgba(25, 217, 170, 0.8)' }     // 右侧亮色，增强高光效果
      ]),
      opacity: 0.80,
      // 添加更强的3D效果
      shadowBlur: 20,
      shadowColor: 'rgba(0, 0, 0, 0.7)',
      shadowOffsetX: -5,
      shadowOffsetY: 5,
      borderRadius: [0, 0, 5, 5],
      borderWidth: 0,

    },
    emphasis: {
      itemStyle: {
        shadowColor: 'rgba(0, 255, 255, 0.9)',
        shadowBlur: 25,
        shadowOffsetX: -8,
        shadowOffsetY: 8
      }
    },
    // })),

    barWidth: '45%',

    // 3D圆柱体效果
    roundCap: false
  }, {
    type: 'pictorialBar',
    z: 3,
    symbolSize: ['65%', '5'],
    symbolOffset: [0.1, -3],
    symbolPosition: "end",
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: 'rgba(2, 206, 214, 0.8)' },    // 更暗的左侧颜色，增强阴影效果
        { offset: 1, color: 'rgba(25, 217, 170, 0.8)' }     // 右侧亮色，增强高光效果
      ]),
    },
    // opacity: 0.1,
    emphasis: {
      itemStyle: {
        shadowColor: "rgba(51, 221, 221, 0.9)",
        shadowBlur: 12
      }
    }
  },
  ],

  // 图形元素配置
  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
  }]
};

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = EnergyConsumptionTrendConfig.key
  public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
}