Browse Source

上下布局饼图

zzs 5 months ago
parent
commit
c47b9a6798
1 changed files with 34 additions and 39 deletions
  1. 34 39
      heida/src/views/material/index.vue

+ 34 - 39
heida/src/views/material/index.vue

@@ -10,15 +10,10 @@
     <div>
       <div class="block">
         <item-title title="入库材料占比"></item-title>
-        <div class="box" ref="chart1"></div>
+        <div class="box" ref="chart2"></div>
       </div>
-      <div class="block" style="display: flex; justify-content: space-between; align-items: center">
-        <div style="width: 50%; height: 100%">
-          <div class="box" ref="chart2"></div>
-        </div>
-        <div style="width: 50%; height: 100%">
-          <div class="box" ref="chart3"></div>
-        </div>
+      <div class="block">
+        <div class="box" ref="chart3"></div>
       </div>
     </div>
     <div>
@@ -326,37 +321,37 @@ export default {
       for (let i = 0; i < chuku_data.length; i++) {
         data3.push({ value: parseInt(chuku_data[i][3]), name: chuku_data[i][0] })
       }
-      const option = {
-        xAxis: {
-          type: 'category',
-          data: xlabel,
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#fff'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#fff'
-            },
-            formatter: '{value} %'
-          }
-        },
-        series: [
-          {
-            data: data,
-            type: 'bar'
-          }
-        ]
-      }
-      const chart1 = echarts.init(this.$refs.chart1)
-      window.onresize = chart1.resize //在窗口大小改变时,相应的元素能够适应新的窗口尺寸。
-      chart1.setOption(option)
+      // const option = {
+      //   xAxis: {
+      //     type: 'category',
+      //     data: xlabel,
+      //     axisLabel: {
+      //       show: true,
+      //       textStyle: {
+      //         color: '#fff'
+      //       }
+      //     }
+      //   },
+      //   yAxis: {
+      //     type: 'value',
+      //     axisLabel: {
+      //       show: true,
+      //       textStyle: {
+      //         color: '#fff'
+      //       },
+      //       formatter: '{value} %'
+      //     }
+      //   },
+      //   series: [
+      //     {
+      //       data: data,
+      //       type: 'bar'
+      //     }
+      //   ]
+      // }
+      // const chart1 = echarts.init(this.$refs.chart1)
+      // window.onresize = chart1.resize //在窗口大小改变时,相应的元素能够适应新的窗口尺寸。
+      // chart1.setOption(option)
 
       const option2 = {
         title: {