diff --git a/project/biaopin/dv/weiyang/AppDvWeiyang.vue b/project/biaopin/dv/weiyang/AppDvWeiyang.vue index fcb27072..c10dc5cc 100644 --- a/project/biaopin/dv/weiyang/AppDvWeiyang.vue +++ b/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 {