lcw

2025-12-27 11:10:31 +08:00
parent 596c9f99e4
commit 3fb06e3847
34 changed files with 1747 additions and 429 deletions
--- a/src/views/home/echarts/3DbarEcharts.vue
+++ b/src/views/home/echarts/3DbarEcharts.vue
@ -3,157 +3,146 @@
 </template>
 <script setup>
 import * as echarts from "echarts";
-import { defineProps, watch, nextTick } from "vue";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
 const props = defineProps({
  echartsId:{
    type:String,
-    default:'lineId'
+    default:'3DbarId'
  },
-  data:{
-    type:Object,
-    default:{
-      list:[],
-      colors:[],
-      topColor:'#1bd6c2'
-    }
+  data:{ 
+    type:Array,
+    default:[]
  }
 });
-watch(()=>props.data,val=>{
-  nextTick(()=>{ haandleData(val)  })
-},{immediate:true,deep:true})

-const haandleData = (data)=>{
-  let val = [],x_value=[]
-  let color = data.colors;
-  let topColor = data.topColor;
-  data.list.forEach(item=>{
-    val.push(item.val);
-    x_value.push(item.label);
-  })
-  chartFn(val,x_value,color,topColor)
-}
+// 保存echarts实例
+const myChart = ref(null);

-function chartFn(val,x_value,color,topColor) {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
-  const sideData1 = val//[100, 110, 120, 134, 190, 230];
-  const name = ''; //"销量";
-  var x_value = x_value;//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-  var option = {
-    tooltip: { trigger: 'axis' },
-    legend: {
-      show: false,
-    },
+// 定义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:"30px",
-      left:"5px",
-      right:"0px",
-      bottom:"10%",
+      top: '8%',
+      left: '2%',
+      right: '2%',
+      bottom: '12%',
      containLabel: true
    },
-    toolbox: {
-      show: 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)'
    },
-    calculable: true,
-    xAxis: [
-      {
-        type: 'category',
-        splitLine: {
-          show: false
-        },
-        data: x_value,
-        axisLabel: {
-          show: true,
-          textStyle: {
-            color: "#fff" //X轴文字颜色
-          },
-        },
+    xAxis: {
+      type: 'category',
+      data: props.data.map(v => v.label),
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        color: '#fff',
+        interval: 0
      }
-    ],
-    yAxis: [
-      {
-        name:'',
-        nameTextStyle: { color: "#fff" },
-        type: 'value',
-        splitLine: { show: false },
-        axisLabel: {
-          show: true,
-          textStyle: {
-            color: "#FFF" //X轴文字颜色
-          },
-        },
+    },
+    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: [
      {
-        name: name,
-        tooltip: { show: false },
        type: 'bar',
-        barWidth: 12,
+        data: props.data.map(v => v.value),
+        barWidth: '22', // 柱子的宽度
+        z: 1,
        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0,
-              color: color ? color[0] : '#28EEBF'// 0% 处的颜色
-            }, {
-              offset: 1,
-              color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
-            }], false)
-          }
-        },
-        data: sideData1,
-        barGap: 0,
-        label: {
-          show: true,
-          position: 'top',
-          distance: 10,
-          textStyle: {
-            color: '#0EBBC5',
-            fontSize: 14,
-            fontWeight: 'bold',
-          },
-          formatter: '{c}'
+          color: '#004056' // 底部柱子的颜色
        }
      },
      {
-        name: name,
        type: 'bar',
-        barWidth: 12,
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-              offset: 0,
-              color: color ? color[0] : '#28EEBF'// 0% 处的颜色
-            }, {
-              offset: 1,
-              color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
-            }], false)
-          }
-        },
-        barGap: 0,
        data: sideData1,
-        label: {
-          show: false,
-          position: 'top',
-          textStyle: {
-            color: 'white',
-            fontSize: 10
+        barWidth: '22', // 柱子的宽度
+        z: 2,
+        itemStyle: {
+          color: function(params) {
+            return params.data.itemStyle.color || '#1bd6c2';
          }
        }
-      }, 
+      },
      {
-        name: name,
-        tooltip: {
-          show: false
-        },
-        type: 'pictorialBar',
+        type: 'scatter',
+        data: topData1,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#fff',
-          color: topColor || '#1bd6c2' // 顶部方块的颜色
+          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'], // 控制顶部放行 左右和上下
+        symbolSize: ['22', '12'],
+        symbolOffset: ['-0', '-6'],
        symbolRotate: -30,
        symbolPosition: 'end',
        barGap: 0,
@ -162,11 +151,29 @@ function chartFn(val,x_value,color,topColor) {
      }
    ]
  };
-  option && myChart.setOption(option);
-  window.addEventListener('resize',function(){
-    myChart.resize();
-  })
+  
+  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>
--- a/src/views/home/echarts/barEcharts.vue
+++ b/src/views/home/echarts/barEcharts.vue
@ -7,30 +7,42 @@ import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } f
 const props = defineProps({
  echartsId:{
    type:String,
-    default:'lineId'
+    default:'barId'
  },
-  data:{
-    type:Object,
-    default:{
-      list:[],
-      colors:[]
-    }
+  color:{ 
+    type:String,
+    default:'#fff'
+  },
+  data:{ 
+    type:Array,
+    default:[]
  }
 });
-watch(()=>props.data,val=>{
-  nextTick(()=>{ 
-     chartFn()
-   })
-},{immediate:true,deep:true})
+
+// 保存echarts实例
+const myChart = ref(null);
+
+// 定义resize处理函数
+const handleResize = () => {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+};

 function chartFn() {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
+  // 如果已有实例，先销毁
+  if (myChart.value) {
+    myChart.value.dispose();
+  }
+  
+  // 创建新实例
+  myChart.value = echarts.init(document.getElementById(props.echartsId));
  var option = {
    grid: {
-      top: "16%",
-      right: "2%",
-      left: "2%",
-      bottom: "4%",
+      top: "8%",
+      right: "5%",
+      left: "10%",
+      bottom: "12%",
      containLabel:true
    },
    tooltip: {
@ -45,13 +57,19 @@ function chartFn() {
      textStyle: {
        color: "#7588E4"
      },
+      extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
    },
    xAxis: {
      type: "category",
-      data:props.data.list.map(v=>{return v.label}),
+      data:props.data.map(v=>{return v.label}),
      axisTick: { show: false },
      axisLine: { show: false },
-      axisLabel: { color: "#fff",magin:20 },
+      axisLabel: { 
+        show: true,
+        color: props.color,
+        interval: 0, // 强制显示所有标签
+        // rotate: 15, // 标签旋转角度
+      }
    },
    yAxis: {
      type: "value",
@ -64,41 +82,47 @@ function chartFn() {
      },
      axisTick: { show: false },
      axisLine: { show: false },
-      axisLabel: { color: "#fff" },
+      axisLabel: { color: props.color },
    },
    series: [
      {
+        data: props.data.map(v=>{return v.value}),
        type: "bar",
-        barGap:'80%',
-        barWidth: "20px",
-        data: props.data.list.map(v=>{return v.val}),
-        label:{
-          normal:{show:true,position:'top',color:'#EB00FF'}
-        },
+        barWidth: "30%",
        itemStyle: {
-          normal: {
-            color:function name(params) {
-                let colorList = []
-                if(props.data.colors && props.data.colors.length>0){
-                  props.data.colors.forEach(item => {
-                    colorList.push(new echarts.graphic.LinearGradient( 0,0,0, 1,[{offset:0,color:item[0]},{offset:1,color:item[1]}]))
-                  });
-                }
-              if(colorList.length > 0) return colorList[params.dataIndex]
-              else return new echarts.graphic.LinearGradient( 0,0,0, 1,[{ offset: 0,color: "rgba(0,244,255,1)"},{ offset: 1, color: "rgba(0,77,167,1)" }])
-            },
-            shadowColor: "rgba(0,160,221,1)",
-            shadowBlur: 2
-          }
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "rgba(102, 195, 226, 1)" },
+            { offset: 1, color: "rgba(2, 80, 212, 1)" }
+          ]),
+          borderRadius: [4, 4, 0, 0],
+          shadowColor: "rgba(0,160,221,1)",
+          shadowBlur: 2
        },
      }
    ]
  };
-  option && myChart.setOption(option);
-  window.addEventListener('resize',function(){
-    myChart.resize();
-  })
+  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>
--- a/src/views/home/echarts/lineEcharts.vue
+++ b/src/views/home/echarts/lineEcharts.vue
@ -9,21 +9,34 @@ const props = defineProps({
    type:String,
    default:'lineId'
  },
-  color:{
+  color:{ 
    type:String,
    default:'#fff'
  },
-  data:{
+  data:{ 
    type:Array,
    default:[]
  }
 });
-watch(()=>props.data,val=>{
-  nextTick(()=>{ chartFn() })
-},{immediate:true,deep:true})
+
+// 保存echarts实例
+const myChart = ref(null);
+
+// 定义resize处理函数
+const handleResize = () => {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+};

 function chartFn() {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
+  // 如果已有实例，先销毁
+  if (myChart.value) {
+    myChart.value.dispose();
+  }
+  
+  // 创建新实例
+  myChart.value = echarts.init(document.getElementById(props.echartsId));
  var option = {
    grid: {
      top: "8%",
@ -51,8 +64,7 @@ function chartFn() {
      data:props.data.map(v=>{return v.label}),
      axisTick: { show: false },
      axisLine: { show: false },
-      axisLabel: { color: "#fff" },
-      axisLabel: {
+      axisLabel: { 
        show: true,
        color: props.color,
        interval: 0, // 强制显示所有标签
@ -103,11 +115,28 @@ function chartFn() {
      }
    ]
  };
-  option && myChart.setOption(option);
-  window.addEventListener('resize',function(){
-    myChart.resize();
-  })
+  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>