task#14196，kpi页面

2024-06-29 15:29:30 +08:00
parent b6951292a9
commit b300809698
11 changed files with 983 additions and 16 deletions
--- a/src/views/kpi/components/circleChar.vue
+++ b/src/views/kpi/components/circleChar.vue
@ -0,0 +1,98 @@
+<template>
+<div class="wrap">
+  <div id="supplierScore" ref="supplierScore" style="width: 100%;height: 125px" @click="handle"></div>
+</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: "circleChar",
+  props:['data','bgColor','titleText','isStore'],
+  data(){
+    return{
+    }
+  },
+  mounted() {
+    this.drawHandle();
+  },
+  methods:{
+    handle(){
+      if(this.titleText == '投诉率'){
+        console.log(this.titleText)
+      }else if(this.titleText == '使用率'){
+        console.log(this.titleText)
+      }
+    },
+    // 绘制 总分图表
+    drawHandle() {
+      let supplierScoreChart = echarts.init(this.$refs.supplierScore)
+      let option;
+      let arrow=(this.titleText == '投诉率' || this.titleText == '使用率') ? '>' : ''
+      const gaugeData = [
+        {
+          value: this.data,
+          name: this.isStore ? '' : this.titleText+arrow,
+          title: {
+            offsetCenter: ['0%', '20%']
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: ['0%', this.isStore ? '10%' : '-25%']
+
+          }
+        }
+      ];
+      option = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: false
+            },
+            progress: {
+              show: true,
+              // width:6,
+              itemStyle:{
+                color:this.bgColor
+              }
+            },
+           /* axisLine: {
+              lineStyle: {
+                width:12,
+              }
+            },*/
+            splitLine: { show: false},
+            axisTick: { show: false},
+            axisLabel: {show: false},
+            data: gaugeData,
+            title: {
+              fontSize: 11,
+              color:'rgba(4, 4, 21,0.45)'
+            },
+            detail: {
+              color:this.isStore ? this.bgColor : '#040415',
+              fontSize: this.isStore ? 43 :19,
+              formatter: this.isStore ? '{value}' : '{value}%'
+            }
+          }
+        ]
+      };
+      // 绘制图表
+      option && supplierScoreChart.setOption(option, true);
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+.wrap{
+  @include flexCenter;
+}
+.img{
+  @include whMarLe(12px,10px,4px);
+}
+</style>