sgxt_web/src/views/home/echarts/3DbarEcharts.vue

<template>
  <div style="height:100%;width:100%" :id="echartsId"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
const props = defineProps({
  echartsId:{
    type:String,
    default:'3DbarId'
  },
  data:{ 
    type:Array,
    default:[]
  }
});

// 保存echarts实例
const myChart = ref(null);

// 定义resize处理函数
const handleResize = () => {
  if (myChart.value) {
    myChart.value.resize();
  }
};

function chartFn() {
  // 如果已有实例，先销毁
  if (myChart.value) {
    myChart.value.dispose();
  }
  
  // 创建新实例
  myChart.value = echarts.init(document.getElementById(props.echartsId));
  
  // 处理数据
  const sideData1 = props.data.map(v => {
    return {
      value: v.value * 1.2,
      itemStyle: {
        color: v.color || '#1bd6c2'
      }
    };
  });

  const topData1 = props.data.map(v => {
    return {
      value: v.value + 0.1,
      itemStyle: {
        color: v.color || '#1bd6c2'
      }
    };
  });

  const option = {
    grid: {
      top: '8%',
      left: '2%',
      right: '2%',
      bottom: '12%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#ddd'
        }
      },
      backgroundColor: 'rgba(255,255,255,1)',
      padding: [5, 10],
      textStyle: {
        color: '#7588E4'
      },
      extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
    },
    xAxis: {
      type: 'category',
      data: props.data.map(v => v.label),
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#fff',
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(14,95,255,0.5)'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'bar',
        data: props.data.map(v => v.value),
        barWidth: '22', // 柱子的宽度
        z: 1,
        itemStyle: {
          color: '#004056' // 底部柱子的颜色
        }
      },
      {
        type: 'bar',
        data: sideData1,
        barWidth: '22', // 柱子的宽度
        z: 2,
        itemStyle: {
          color: function(params) {
            return params.data.itemStyle.color || '#1bd6c2';
          }
        }
      },
      {
        type: 'scatter',
        data: topData1,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#fff',
          color: function(params) {
            return params.data.itemStyle.color || '#1bd6c2';
          }
        },
        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
        symbolSize: ['22', '12'],
        symbolOffset: ['-0', '-6'],
        symbolRotate: -30,
        symbolPosition: 'end',
        barGap: 0,
        data: sideData1,
        z: 3,
      }
    ]
  };
  
  option && myChart.value.setOption(option);
}

// 监听数据变化
watch(() => props.data, val => {
  nextTick(() => { chartFn() })
}, { immediate: true, deep: true })

// 组件挂载时初始化图表并添加事件监听
onMounted(() => {
  chartFn();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时清理资源
onUnmounted(() => {
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped>

</style>