更新

2025-04-18 16:26:51 +08:00
parent 7ef5a303e8
commit 3b4ffc6a06
6 changed files with 195 additions and 481 deletions
--- a/src/views/home/echarts/barHatEcharts.vue
+++ b/src/views/home/echarts/barHatEcharts.vue
@ -0,0 +1,138 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { nextTick , onMounted, watch, defineProps } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'barHatId'
+  },
+  data:{
+    type:Object,
+    default:{
+      xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+      list:[
+        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+      ],
+    }
+  }
+});
+
+watch(()=>props.data,val=>{
+  nextTick(()=>{ handleDate() })
+},{immediate:true,deep:true})
+
+// 处理数据
+function handleDate() {
+  let xDate = props.data.xDate;
+  let legend = props.data.list.map(v=>{return {name:v.name}})
+  let series = props.data.list.map((item,i)=>{
+    let obj = {
+      name: item.name,
+      type: "bar",
+      data: item.value,
+      barWidth: "10px",
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
+            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
+        }
+      },
+      markPoint: {
+        symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+        symbolSize: [11, 4], // 设置扁圆的宽和高
+        itemStyle: { color: item.hatColor || '#087df9'   },// 圆盘颜色
+        data: item.value.map((obj, index) => ({
+          xAxis: index, // 对应柱子的横坐标
+          yAxis: obj + 0 // 柱子的值加上一些偏移量
+        }))
+      },
+    }
+    return obj
+  })
+  lineChartFn(xDate,legend,series)
+}
+
+function lineChartFn(xDate,legend,series) {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: legend
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "5%",
+      left: "10%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: xDate,
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        // name: '单位：万元',
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: series
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () { myChart.resize(); };
+  document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+.circlecz {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>