更新

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>

src/views/home/echarts/lineEcharts.vue

@@ -9,6 +9,10 @@ const props = defineProps({
     type:String,
     default:'lineId'
   },
+  color:{
+    type:String,
+    default:'#fff'
+  },
   data:{
     type:Array,
     default:[]
@@ -20,13 +24,12 @@ watch(()=>props.data,val=>{
 
 function chartFn() {
   var myChart = echarts.init(document.getElementById(props.echartsId));
-  var option;   
-  option = {
+  var option = {
     grid: {
       top: "8%",
       right: "2%",
       left: "10%",
-      bottom: "7%",
+      bottom: "12%",
       containLabel:true
     },
     tooltip: {
@@ -51,7 +54,7 @@ function chartFn() {
       axisLabel: { color: "#fff" },
       axisLabel: {
         show: true,
-        color: "#fff",
+        color: props.color,
         interval: 0, // 强制显示所有标签
         // rotate: 15, // 标签旋转角度
       }
@@ -67,7 +70,7 @@ function chartFn() {
       },
       axisTick: { show: false },
       axisLine: { show: false },
-      axisLabel: { color: "#fff" },
+      axisLabel: { color: props.color },
     },
     series: [
       {

src/views/home/echarts/pieEcharts.vue

@@ -0,0 +1,119 @@
+<template>
+   <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+  
+<script setup>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { ref, watch ,defineProps,nextTick } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'lineId'
+  },
+  color:{
+    type:String,
+    default:'lineId'
+  },
+  data:{
+    type:Array,
+    default:[]
+  }
+});
+watch(()=>props.data,val=>{
+  nextTick(()=>{ handleDate(val) })
+},{immediate:true,deep:true})
+
+const handleDate = (val)=>{
+    let newArray = val.map(v=>{
+        let obj = {
+            value: v.value,
+            name: v.label,
+        }
+        if(v.color) obj.itemStyle = {  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  { offset: 0, color: v.color[0] },  { offset: 1, color: v.color[1] } ])}
+        return obj
+    })
+    initChart(newArray)
+}
+
+const initChart = (data) => {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  const option = {
+    backgroundColor: "transparent",
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c} ({d}%)",
+      backgroundColor: "rgba(0,0,0,0.7)",
+      borderColor: "#0C2E5A",
+      textStyle: {
+        color: "#fff"
+      }
+    },
+    legend: {
+      top: "middle",
+      right: "5%",
+      orient: "vertical",
+      itemGap: 20,
+      textStyle: {
+        color: props.color,
+        fontSize: 14
+      },
+      itemWidth: 15,
+      itemHeight: 15,
+      icon: "roundRect",
+      formatter: function (name) {
+        const data = option.series[0].data;
+        const target = data.find((item) => item.label === name);
+        if (target) {
+          return `${name}  ${target.value}  ${( (target.value / 50) *  100 ).toFixed(0)}%`;
+        }
+        return name;
+      }
+    },
+    series: [
+      {
+        name: "情报反馈统计",
+        type: "pie",
+        radius: ["40%", "75%"],
+        center: ["30%", "50%"],
+        startAngle: 90,
+        zlevel: 10,
+        itemStyle: {},
+        selectedMode: "single",
+        selectedOffset: 30,
+        animation: true,
+        animationType: "scale",
+        animationEasing: "elasticOut",
+        label: { show: false  },
+        labelLine: { show: false },
+      
+        data: data,
+        zlevel: 10,
+        emphasis: {
+          scale: true,
+          scaleSize: 10,
+          itemStyle: {
+            shadowBlur: 30,
+            shadowColor: "rgba(0,0,0,0.6)"
+          }
+        }
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+
+  // 监听窗口大小变化
+  window.addEventListener("resize", () => {
+    myChart.resize();
+  });
+};
+
+</script>
+  
+  <style lang="scss" scoped>
+.echartsBox {
+  width: 100%;
+  height: 100%;
+}
+</style>