更新

2025-04-16 23:06:01 +08:00
parent 16b8bc2467
commit 1ccecb7258
23 changed files with 22670 additions and 390 deletions
--- a/src/views/home/echarts/3DbarEcharts.vue
+++ b/src/views/home/echarts/3DbarEcharts.vue
@ -0,0 +1,174 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+import { fa } from "element-plus/es/locale.mjs";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'lineId'
+  },
+  data:{
+    type:Object,
+    default:{
+      list:[],
+      colors:[]
+    }
+  }
+});
+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)
+}
+
+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,
+    },
+    grid: {
+      top:"30px",
+      left:"5px",
+      right:"0px",
+      bottom:"10%",
+      containLabel: true
+    },
+    toolbox: {
+      show: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        splitLine: {
+          show: false
+        },
+        data: x_value,
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#333" //X轴文字颜色
+          },
+        },
+      }
+    ],
+    yAxis: [
+      {
+        name:'单位：元/吨',
+        nameTextStyle: { color: "#fff" },
+        type: 'value',
+        splitLine: { show: false },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#333" //X轴文字颜色
+          },
+        },
+      }
+    ],
+    series: [
+      {
+        name: name,
+        tooltip: { show: false },
+        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)
+          }
+        },
+        data: sideData1,
+        barGap: 0,
+        label: {
+          show: true,
+          position: 'top',
+          distance: 10,
+          textStyle: {
+            color: '#0EBBC5',
+            fontSize: 14,
+            fontWeight: 'bold'
+          },
+          formatter: '{c}'
+        }
+      },
+      {
+        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: true,
+          position: 'top',
+          textStyle: {
+            color: 'white',
+            fontSize: 10
+          }
+        }
+      }, 
+      {
+        name: name,
+        tooltip: {
+          show: false
+        },
+        type: 'pictorialBar',
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: '#fff',
+          color: topColor || '#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.setOption(option);
+  window.addEventListener('resize',function(){
+    myChart.resize();
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>