yudao-dev/src/views/order/monitoring/components/monitoringRingCharts.vue

<template>
  <div>
    <div class="boxTitle">
      <span class="blueTitle"></span>
      <span>各订单环形图</span>
    </div>
    <div class="chartBox" id='orderChartBox' v-show='chartList.length'>
      <div class="chartItem" v-for="(item, index) in chartList" :key='index' :style="{width: 388*beilv+'px',height: 286*beilv+'px',padding:14*beilv+'px',marginRight:9*beilv+'px',marginBottom:9*beilv+'px'}">
        <div class="topTitle" :style="{fontSize: 14 * beilv + 'px'}">
          <svg-icon icon-class="order-monitoring" :style="{fontSize: 16*beilv+'px'}"/>
          <span class="orderName" :style="{paddingRight:8*beilv+'px',marginRight:8*beilv+'px'}">{{item.orderName}}</span>
          <span>订单计划数量{{item.num}}</span>
        </div>
        <div
          :id="item.id"
          :style="{width: 166*beilv+'px',height: 166*beilv+'px',margin: 'auto'}"
        ></div>
        <div class="legend" :style="{height: 54 * beilv + 'px', marginTop: 10*beilv+'px'}">
          <div class="legendItem" v-for="(subItem, i) in item.workOrder" :key='i' :style="{paddingRight:9*beilv+'px',marginRight:9*beilv+'px'}">
            <span class="itemNum" :style="{fontSize: 18 * beilv + 'px'}">{{subItem.value}}</span>
            <div>
              <span class="itemName" :style="{fontSize: 14 * beilv + 'px'}">
                <span class="smallBlock" :style="{backgroundColor:subItem.color,width:8*beilv+'px',height:8*beilv+'px'}"></span>
                {{subItem.name}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 空图 -->
    <div class="no-data-bg" v-show='!chartList.length'></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { debounce } from '@/utils/debounce'
export default {
  name: 'MonitoringRingCharts',
  props: {
    chartList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      myChart: [],
      beilv: 1,
      canvasReset: ''
    }
  },
  mounted() {
    this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610
    this.canvasReset = debounce(() => {
      this.initChart()
    }, 500)
    window.addEventListener('resize', () => {
      this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610
      this.canvasReset()
    })
  },
  methods: {
    // 饼图
    initChart() {
      if (this.chartList.length <= 0) {
        return false
      }
      // 销毁实例
      for (let j = 0;j < this.chartList.length; j++) {
        if (this.myChart[j]) {
          this.myChart[j].dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
        }
      }
      for (let i = 0; i < this.chartList.length; i++) {
        var chartDom = document.getElementById(this.chartList[i].id);
        this.myChart[i] = echarts.init(chartDom);
        let colorList = []
        this.chartList[i].workOrder.map(item => {
          colorList.push(item.color)
        })
        let percentage = (this.chartList[i].sunNum/this.chartList[i].num*100).toFixed(0)
        var option = {
          color: colorList,
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['75%', '95%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 5,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'center',
                color: '#000',
                formatter: [
                    '{a|'+percentage+'%}',
                    '{b|生产'+this.chartList[i].sunNum+'}'
                ].join('\n\n'),
                rich: {
                  a: {
                      fontSize: this.beilv*24 +'px'
                  },
                  b: {
                      fontSize: this.beilv*12 +'px'
                  }
                }
              },
              emphasis: {
                disabled: true
              },
              labelLine: {
                show: false
              },
              data: this.chartList[i].workOrder
            }
          ]
        };
        option && this.myChart[i].setOption(option)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.chartBox {
  width: 100%;
  padding-right: 6px;
  height: calc(100vh - 310px);
  display: flex;
  flex-flow: row wrap;
  overflow: auto;
  align-content: flex-start;
  .chartItem {
    border-radius: 8px;
    border: 1px solid #CACACA;
    .topTitle {
      margin-bottom: 10px;
      .orderName {
        border-right: 1px solid #CACACA;
      }
    }
    .legend {
      text-align: center;
      white-space: nowrap;
      overflow: auto;
      .legendItem {
        display: inline-block;
        border-right: 1px solid #E8E8E8;
        .itemName {
          .smallBlock {
            display: inline-block;
          }
        }
      }
      .legendItem:last-child {
        border: none;
      }
    }
  }
}
</style>