提交一部分图标

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -30,10 +30,21 @@ const aiTrend = {
   legend: {show: false},
   grid: {left: 0, right: 0, bottom: 1, top: 0, containLabel: true},
 }
+const workChainSeries = ['楼栋长', '治安协理员', '业委会', '网格员', '第三方机构']
 const workChain = {
-  series: Array(5).fill({type: "bar"}),
-  yAxis: {type: "category"},
-  xAxis: {show: false, type: "value"}
+  color: [
+    ['#1f595940', '#33CCCC'],
+    ['#159AFF00', '#2C97E8'],
+    ['#BFEAFF1a', '#BFEAFF'],
+    ['#DBB36E1a', '#DBB36E'],
+    ['#757BD21a', '#757BD1'],
+  ].map(([start, end]) => ({type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{offset: 0, color: start}, {offset: 1, color: end}]})),
+  series: workChainSeries.map(name => ({name, type: "bar", barWidth: 7})),
+  yAxis: {type: "category", axisLine: {lineStyle: {color: "rgba(102,132,153,0.5)"}}, axisTick: hide, axisLabel: {color: "#9CB3C9"}},
+  xAxis: {type: "value", splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}, axisTick: hide, axisLabel: {color: "#9CB3C9"}},
+  grid: {left: 12, right: 24, top: 0, bottom: 40, containLabel: true},
+  legend: {show: true, bottom: 0, textStyle: {color: '#fff'}},
+  tooltip: {trigger: 'axis', backgroundColor: "#33333388", textStyle: {color: '#fff'}}
 }
 const residentDistribution = {
   series: {
@@ -47,11 +58,20 @@ const residentDistribution = {
     },
     encode: {x: 'name', y: 'c'}
   },
-  yAxis: {type: "value", axisLine: {show: false}, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
-  xAxis: {type: "category", axisTick: {show: false}, axisLabel: {rotate: 45}},
+  yAxis: {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
+  xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 45}},
   grid: {left: 12, right: 12, top: 20, bottom: 0, containLabel: true},
   legend: {show: false},
 }
+const spDistribution = {
+  series: {
+    type: 'pie',
+    radius: ['50%', '70%'],
+    padAngle: 3,
+    label: {},
+  },
+  legend: hide,
+}
 export default {
   name: "AppDvWeiyang",
   components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
@@ -101,7 +121,7 @@ export default {
     yearOnYear: v => calcComparePercent(v.sta.residentCountLastYear, v.sta.residentCount),
     workorderFinishedPercent: v => handlePercent(v.sta.workOrderCountFinish / v.sta.workOrderCount * 100),
     chart: v => {
-      return {aiTrend, workChain, residentDistribution}
+      return {aiTrend, workChain, residentDistribution, spDistribution}
     },
   },
   methods: {
@@ -130,12 +150,12 @@ export default {
         }),
         http.post("/app/wyDiy/spDistribution", null, {params: {areaId}}).then(res => {
           if (res?.data) {
-
+            this.$set(this.chartData, "spDistribution", res.data)
           }
         }),
         http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
           if (res?.data) {
-
+            this.$set(this.chartData, "workChain", res.data.map(e => ['name', ...workChainSeries].map(k => e[k] ?? 0)))
           }
         }),
         http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => {
@@ -214,7 +234,7 @@ export default {
       <div class="d"></div>
       <div class="e flex column normal">
         <sub-header title="五条工作链"/>
-        <ai-echart/>
+        <ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
       </div>
       <div class="f"></div>
       <div class="g flex column normal">
@@ -236,7 +256,7 @@ export default {
       </div>
       <div class="j flex column normal">
         <sub-header title="特殊人群数量统计"/>
-        <ai-echart/>
+        <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution"/>
       </div>
     </template>
   </section>