lcw

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

@@ -5,13 +5,13 @@
 import * as echarts from "echarts";
 import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
 const props = defineProps({
-  echartsId:{
-    type:String,
-    default:'3DbarId'
+  echartsId: {
+    type: String,
+    default: '3DbarId'
   },
-  data:{ 
-    type:Array,
-    default:[]
+  data: {
+    type: Object,
+    default: () => { }
   }
 });
 
@@ -25,48 +25,96 @@ const handleResize = () => {
   }
 };
 
+// 组织数据
+const setData = function (data, constData, showData) {
+  data.filter(function (item) {
+    if (item) {
+      constData.push(1);
+      showData.push(item);
+    } else {
+      constData.push(0);
+      showData.push({
+        value: 1,
+        itemStyle: {
+          normal: {
+            borderColor: "rgba(0,0,0,0)",
+            borderWidth: 2,
+            color: "rgba(0,0,0,0)",
+          },
+        },
+      });
+    }
+  });
+}
+
+// 组织颜色
+const setColor = function (colorArr) {
+  let color = {
+    type: "linear",
+    x: 0,
+    x2: 1,
+    y: 0,
+    y2: 0,
+    colorStops: [{
+      offset: 0,
+      color: colorArr[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr[1],
+    },
+    {
+      offset: 1,
+      color: colorArr[1],
+    },
+    ],
+  };
+  return color
+}
+
 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 barWidth = 30;
+  const constData = [];
+  const showData = [];
+  const values = props.data.list && Array.isArray(props.data.list) ? props.data.list.map(v => v.val || v.value) : [];
+  
+  if (Array.isArray(values)) {
+    setData(values, constData, showData);
+  }
+
+  // 处理颜色
+  const colorArr = props.data.colors || ["#345A8B", "#387ABD", "#51C0DB"];
+  const color = setColor(colorArr);
+  
+  // 安全获取标签数据
+  const labels = props.data.list && Array.isArray(props.data.list) ? props.data.list.map(v => v.label) : [];
+  console.log(labels);
 
   const option = {
     grid: {
-      top: '8%',
+      top: '15%',
       left: '2%',
       right: '2%',
-      bottom: '12%',
+      bottom: '15%',
       containLabel: true
     },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        lineStyle: {
-          color: '#ddd'
-        }
+        type: 'shadow'
       },
       backgroundColor: 'rgba(255,255,255,1)',
       padding: [5, 10],
@@ -77,81 +125,89 @@ function chartFn() {
     },
     xAxis: {
       type: 'category',
-      data: props.data.map(v => v.label),
-      axisTick: {
-        show: false
+      data: labels,
+      axisLabel: {
+        color: '#FFFFFF'
       },
       axisLine: {
-        show: false
-      },
-      axisLabel: {
-        show: true,
-        color: '#fff',
-        interval: 0
-      }
-    },
-    yAxis: {
-      type: 'value',
-      splitLine: {
-        show: true,
+        show: false,
         lineStyle: {
-          type: 'dashed',
-          color: 'rgba(14,95,255,0.5)'
+          color: '#1B3F66'
         }
       },
       axisTick: {
-        show: false
+        show: true
+      }, axisLabel: {
+            interval: 0 // 控制标签的显示间隔，0 表示全部显示，可以根据需要调整为其他值，例如 1 表示每隔一个显示一个标签。
+        }
+    },
+    yAxis: {
+       type: "value",
+      splitLine: {
+        show:true ,
+        lineStyle: {
+          type:'dashed',
+          color: "rgba(14,95,255,0.5)"
+        }
       },
-      axisLine: {
-        show: false
-      },
-      axisLabel: {
-        color: '#fff'
-      }
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: props.color },
+
     },
     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,
+        name: '柱子',
+        barWidth: barWidth,
         itemStyle: {
-          color: function(params) {
-            return params.data.itemStyle.color || '#1bd6c2';
-          }
-        }
+          borderRadius: [0, 0, 0, 0],
+          color: color
+        },
+        label: {
+          show: true,
+          position: 'top'
+        },
+        data: values
       },
       {
-        type: 'scatter',
-        data: topData1,
+        z: 2,
+        name: '柱子底部',
+        type: "pictorialBar",
+        data: constData,
+        symbol: "diamond",
+        symbolOffset: ["0%", "50%"],
+        symbolSize: [barWidth - 4, 10],
         itemStyle: {
-          borderWidth: 1,
-          borderColor: '#fff',
-          color: function(params) {
-            return params.data.itemStyle.color || '#1bd6c2';
-          }
+          normal: {
+            color: color
+          },
         },
-        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,
+        name: '柱子顶部',
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: showData,
+
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [barWidth - 4, 10],
+        itemStyle: {
+          normal: {
+            color: colorArr[2]
+          },
+        },
+        tooltip: {
+          show: false,
+        },
       }
     ]
   };
-  
+
   option && myChart.value.setOption(option);
 }
 
@@ -176,6 +232,4 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>