newcpms/ui/src/views/process/moc/chart/mocNoChart.vue

<template>
  <div>
    <div id="mocNoChart" :style="{width:width,height:height}"></div>
  </div>
</template>

<script>
  import { mocNoData } from "@/api/process/moc";

  export default {
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '200px'
      },
    },
    data() {
      return {
        option: {
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '15%',
            containLabel: true
          },
          /* 标识 */
          legend: {
            data: ['永久MOC', '临时MOC'],
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              },
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          /* 坐标轴显示 */
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              /*type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'*/
              type: 'cross',
              label: {
                backgroundColor: '#a0a0a0'
              }
            }
          },
          xAxis: {
            data: [],
          },
          yAxis: {
          },
          series: [{
            name: '永久MOC',
            type: 'bar',
            // barWidth: '40%',
            stack: 'MOC',
            data: []
          },
            {
              name: '临时MOC',
              type: 'bar',
              // barWidth: '40%',
              stack: 'MOC',
              data: []
            },
          ]
        },
        // 查询参数
        queryParams: {},
        chart: null,
        chartData1 : [],
        chartData2 : [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        mocNoData({timeliness: 1}).then(response => {
          this.chartData1 = response;
          mocNoData({timeliness: 2}).then(response => {
            this.chartData2 = response;
            let xData = [];
            let yData1 = [];
            let yData2 = [];
            for(let i = 0 ; i < this.chartData1.length ; i++) {
              xData.push(this.chartData1[i].dataName);
            }
            for(let i = 0 ; i < this.chartData2.length ; i++) {
              xData.push(this.chartData2[i].dataName);
            }
            xData = this.unique(xData);
            this.option.xAxis.data = xData;
            for(let i = 0 ; i < xData.length ; i++) {
              yData1[i] = 0;
              yData2[i] = 0;
              for(let j = 0 ; j < this.chartData1.length ; j++) {
                if (xData[i] == this.chartData1[j].dataName) {
                  yData1[i] = this.chartData1[j].dataNum;
                }
              }
              for(let j = 0 ; j < this.chartData2.length ; j++) {
                if (xData[i] == this.chartData2[j].dataName) {
                  yData2[i] = this.chartData2[j].dataNum;
                }
              }
            }
            this.option.series[0].data = yData1;
            this.option.series[1].data = yData2;
            this.initChart();
          });
        });
      })
    },
    methods: {
      // 数组去重
      unique(arr) {
        if (!Array.isArray(arr)) {
          console.log('type error!')
          return;
        }
        arr = arr.sort()
        var arrry= [arr[0]];
        for (var i = 1; i < arr.length; i++) {
          if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
          }
        }
        return arrry;
      },
      /** 获取当前年份 */
      getNowTime() {
        var now = new Date();
      },
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.echarts.init(document.getElementById('mocNoChart'))
        this.chart.setOption(this.option)
      }
    }
  }
</script>