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'

export const includes = ['title', 'grid3D', 'xAxis3D', 'yAxis3D', 'zAxis3D']
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));

// 从图片中估算的数据
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const values = [88, 54, 66, 54, 89, 67, 54, 89, 54, 89, 54, 67];

// 将数据转换为 bar3D 需要的格式 [x, y, z]
const data = values.map((item, index) => {
  // x 对应 xAxis3D 的类目索引，y 对应 yAxis3D 的类目索引，z 对应 zAxis3D 的数值
  return [index, 0, item];
});


const option = {
  // 图表标题，用于显示左上角的单位
  title: {
    text: '单位：万kWh',
    left: '2%', // 调整位置
    top: '2%',
    textStyle: {
      color: '#e0e0e0', // 使用稍亮的颜色以适应深色背景
      fontSize: 16
    }
  },
  // 背景色，使用线性渐变模拟图片效果
  backgroundColor: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#0f375f' // 起始颜色
    }, {
      offset: 1, color: '#000918' // 结束颜色
    }],
    global: false
  },
  // 3D笛卡尔坐标系配置
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    // 视角控制，用于调整图表的观察角度
    viewControl: {
      distance: 250, // 初始视角距离
      alpha: 15,     // 俯视角度
      beta: 25,      // 旋转角度
      autoRotate: false, // 禁止自动旋转
      minAlpha: 5,     // 最小俯视角度
      maxAlpha: 90,    // 最大俯视角度
    },
    axisPointer: {
      show: false // 不显示坐标轴指示器
    },
    // 光照配置，这是实现立体感和阴影的关键
    light: {
      // 主光源
      main: {
        intensity: 1.2,      // 光照强度
        shadow: true,        // 开启阴影
        shadowQuality: 'ultra', // 更高的阴影质量
        alpha: 55,           // 控制光源的水平角度，使其从右侧照射，从而在左侧形成阴影
        beta: 40             // 控制光源的垂直角度，使其从上方照射
      },
      // 环境光，用于整体提亮
      ambient: {
        intensity: 0.3
      }
    }
  },
  // X轴（类目轴）
  xAxis3D: {
    type: 'category',
    data: months,
    axisLabel: {
      color: '#d0d0d0',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        color: '#d0d0d0'
      }
    }
  },
  // Y轴（在图中是隐藏的，但 bar3D 渲染需要此轴）
  yAxis3D: {
    type: 'category',
    show: false // 不显示Y轴
  },
  // Z轴（数值轴）
  zAxis3D: {
    type: 'value',
    min: 0,
    max: 100,
    interval: 25, // 刻度间隔
    axisLabel: {
      color: '#d0d0d0',
      fontSize: 12
    },
    axisLine: {
      lineStyle: {
        color: '#d0d0d0'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)' // 分割线颜色
      }
    }
  },
  // 系列列表
  series: [{
    type: 'bar3D',
    data: data,
    barSize: 15, // 柱子在 X, Y 轴上的尺寸
    // 柱状图的着色效果
    shading: 'lambert', // 使用 Lambert 光照模型，能更好地表现光照和阴影
    // 柱子的样式
    itemStyle: {
      color: '#4bebf3' // 柱子的基础颜色，光照会在此基础上计算最终颜色
    },
    // 鼠标悬浮时的高亮状态
    emphasis: {
      label: {
        show: false
      }
    }
  }]
};

// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = EnergyConsumptionTrendConfig.key
  public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
}