1.综合看板 对接接口实现部分数据渲染

loulijun2021

2022-08-01 3032fc5c1b188a820c7546da5b92a6b8d415f23a

 src/views/kb/cgdd.vue

@@ -27,9 +27,10 @@
                <div class="text">当月入库总数</div>
              </div>
              <div class="content01">
                <div class="pic01" />
                <div class="number">12%</div>
                <div class="text">当月延期占比</div>
                <!--                <div class="pic01" />-->
                <!--                <div class="number">12%</div>-->
                <div id="pie01" ref="pie01" class="pie01" />
                <div class="text" style="margin-top: -10px">当月延期占比</div>
              </div>

            </div>
@@ -170,7 +171,8 @@

<script>
import './kbCommon.css'
import { bar03, loadEcharts } from '@/utils/myEcharts'
import { loadEcharts, pie01 } from '@/utils/myEcharts'
import * as echarts from 'echarts'

export default {
  name: 'Index2',
@@ -391,8 +393,11 @@

    // 获取echarts
    getEcharts() {
      loadEcharts('bar03', bar03('本周入库量汇总'))
      loadEcharts('bar04', bar03('本周出货量汇总'))
      loadEcharts('pie01', pie01())

      // setInterval(() => {
      //   loadEcharts('pie01', pie01())
      // }, 5000)
    },

    // 获取当前时间
@@ -472,6 +477,12 @@
            background: url("../../assets/images/pic01.png");
          }

          .pie01{
            height: 200px;
            width: 200px;
            margin-top: -30px;
          }

          .number {
            margin-top: -50px;
            font-size: 18px;