优化

src/views/workplace/backlog/NewWorkplaceBacklog.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="gutter-example">
-      <a-row :gutter="30">
+      <a-row :gutter="20">
         <a-col class="gutter-row" :span="8">
           <div class="gutter-box">
             <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
@@ -80,14 +80,23 @@
       </a-row>
     </div>
     <div class="gutter-example">
-      <a-row :gutter="[30,40]">
+      <a-row :gutter="[20,40]">
         <a-col class="gutter-row" :span="6">
-          <div style="height: 471px;background: #FFFFFF;">
+          <div style="height: 471px;background: #FFFFFF;padding:24px">
+            <div style="display:flex;justify-content: space-between;width:100px;height: 18px; font-size:16px;color: #555555; ">
+              <div>设备实施状态</div>
+              <!-- <div>设备总数100</div> -->
+            </div>
             <div id="container-pie"></div>
           </div>
         </a-col>
         <a-col class="gutter-row" :span="12">
-          <div style="height: 471px;background: #FFFFFF;">
+          <div style="height: 471px;background: #FFFFFF; padding:24px;">
+            <div style="display:flex;justify-content: space-between;width:100px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+              <div style="width: 7px;background: #4D86ED;"></div>
+              <div>近一周数据</div>
+            </div>
+           <div id="container-line"></div>
           </div>
         </a-col>
         <a-col class="gutter-row" :span="6">
@@ -113,7 +122,7 @@
       </a-row>
     </div>
     <div class="gutter-example">
-      <a-row :gutter="16">
+      <a-row :gutter="20">
         <a-col class="gutter-row" :span="6">
           <div class="information">
             <div style="display:flex;justify-content: space-between;align-items: center; padding-bottom:20px;">
@@ -188,8 +197,18 @@ export default {
         { item: '事例四', count: 13, percent: 0.13 },
         { item: '事例五', count: 9, percent: 0.09 }
       ],
+      lineData: [
+  { week: '周一', value: 3 },
+  { week: '周二', value: 4 },
+  { week: '周三', value: 7.5 },
+  { week: '周四', value: 5 },
+  { week: '周五', value: 4.9 },
+  { week: '周六', value: 6 },
+  { week: '周日', value: 7 },
+],
       allCount: 100,
-      chart: null,
+      chartPie: null,
+      chartLine: null,
       queryParam: {
         status: 1
       },
@@ -309,33 +328,34 @@ export default {
       this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
     },
     getInfo () {
-      this.getCharts('container-pie', this.equipmentData)
+      this.getPieCharts('container-pie', this.equipmentData)
+      this.getLineCharts('container-line', this.lineData)
     },
-    getCharts (id, data) {
-      this.chart && this.chart.destroy()// 防止点击搜索按钮新增一个
-      this.chart = new Chart({
+    getPieCharts (id, data) {
+      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
+      this.chartPie = new Chart({
         container: id,
         autoFit: true,
-        height: 300
+        height: 400
       })
-      this.chart.data(data)
-      this.chart.scale('percent', {
-        formatter: (val) => {
-          val = val * 100 + '%'
-          return val
-        }
+      this.chartPie.data(data)
+      this.chartPie.scale('count',{
+        nice: true
       })
-      this.chart.coordinate('theta', {
-        radius: 0.75,
-        innerRadius: 0.6
+      this.chartPie.coordinate('theta', {
+        radius: 0.6,
+        innerRadius: 0.5
       })
-      this.chart.tooltip({
+      this.chartPie.tooltip({
         showTitle: false,
         showMarkers: false,
-        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+        itemTpl: `<li class="g2-tooltip-list-item">
+                     <span style="background-color:{color};" class="g2-tooltip-marker"></span>
+                     {name}: {value}
+                  </li>`
       })
       // 辅助文本
-      this.chart
+      this.chartPie
         .annotation()
         .text({
           position: ['50%', '50%'],
@@ -349,7 +369,7 @@ export default {
         })
         .text({
           position: ['50%', '50%'],
-          content: '200',
+          content: '100',
           style: {
             fontSize: 20,
             fill: '#8c8c8c',
@@ -369,7 +389,7 @@ export default {
           offsetY: 20,
           offsetX: 20
         })
-      this.chart
+      this.chartPie
         .interval()
         .adjust('stack')
         .position('percent')
@@ -377,19 +397,57 @@ export default {
         .label('percent', (percent) => {
           return {
             content: (data) => {
-              return `${data.item}: ${percent * 100}%`
+              return `${data.item}: ${percent * 100}`
             }
           }
         })
-        .tooltip('item*percent', (item, percent) => {
-          percent = percent * 100 + '%'
+        .tooltip('item*count', (item, count) => {
           return {
             name: item,
-            value: percent
+            value: count
           }
         })
-      this.chart.interaction('element-active')
-      this.chart.render()
+      // this.chartPie.interaction('element-active')
+      this.chartPie.interaction('active-region')
+
+      this.chartPie.render()
+    },
+    getLineCharts(id,data){
+      this.chartLine=new Chart({
+  container: id,
+  autoFit: true,
+  height: 300,
+});
+
+this.chartLine.data(data);
+this.chartLine.scale({
+  week: {
+    range: [0, 1],
+  },
+  value: {
+    min: 0,
+    nice: true,
+  },
+});
+
+this.chartLine.tooltip({
+  showCrosshairs: true, // 展示 Tooltip 辅助线
+  shared: true,
+});
+
+this.chartLine.axis('value', {
+  label: {
+    formatter: (val) => {
+      return val + 'k';
+    },
+  },
+});
+
+this.chartLine.area().position('week*value')
+this.chartLine.line().position('week*value')
+
+this.chartLine.render();
+
     }
   }
 }