kanban-vue/src/components/packageechart/bottom/bottomLeft2Chart/chart.vue

<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeft2Chart"
      height="480px"
      width="100%"
      ref="column-board"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
//import { formatDate } from '../../../../utils/index.js'
export default {
  data () {
    return {
      timing :null,
      options:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            fontSize: 18
          },
          itemWidth: 29,
          itemHeight: 19
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data:[],
            axisLabel: {
              fontSize: 16,
              fontWeight: "bold"
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max:500,
            axisLabel: {
              fontSize: 16
            }
          },
          {
            type: 'value',
            name: 'rate',
            min: 0,
            max: 100,
            interval: 20,
            nameTextStyle: {
              fontSize: 20
            },
            axisLabel: {
              formatter: '{value}%',
              fontSize: 16
            }
          }

        ],
        series: [
          {
            name: '投入',
            type: 'bar',
            barWidth: 15,
            emphasis: {
              focus: 'series'
            },
            data:[],
            label: {
              show: true,
              position: 'top',
              fontSize:14,
              fontWeight: "bold"
            },
          },
          {
            name: '产出',
            type: 'bar',
            barWidth: 15,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data:[],
            label: {
              show: true,
              position: 'inside',
              fontSize:14,
              fontWeight: "bold"
            },
          },
          {
            name: '不良',
            type: 'bar',
            stack: 'Ad',
            barWidth: 10,
            data:[],
            //data: [12, 22, 32, 12, 32, 12, 32],
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: '良率%',
            type: 'line',
            data:[],
            yAxisIndex: 1,
            symbolSize: 8,
            label: {
              show: true,
              position: 'top',
              color:'#fff'
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              }
            },
            lineStyle: {
              width: 4
            },
            itemStyle: {
              normal: {
                barBorderRadius: 6,
                color:  "rgba(156,107,211,0.8)"
               /* color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.8)" },
                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                ])*/
              }
            },
            emphasis: {
              focus: 'series'
            }
          }, {
            name: 'UPH',
            type: 'line',
            symbolSize: 8,
            barWidth: 15,
            data:[],
            //data: [12, 22, 32, 12, 32, 12, 32],
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 4
            },
            label: {
              show: true,
              position: 'top',
              fontSize:14,
              fontWeight: "bold"
            }
          }
        ]
      },
    };
  },
  components: {
    Echart, //子组件
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },

  mounted() {
    this.getdata();
    this.refreshdata();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    refreshdata() {
      this.timing = setInterval(() => {
        this.getdata(); //获取-数据
      }, 30000);
    },
    async getdata() {
      //20220211 -+formatDate(new Date()
      var caller = 'WCDAYTURNOUT';
      if (sessionStorage.getItem('li_code') == '所有'){
        caller = 'WCDAYTURNOUT!ALL';
      }
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
        params: {
          condition: "1=1",
        }
      }).then((result)=>{
                        let dataList = JSON.parse(result.data.data);
                        let xAxis0 = new Array();
                        let series0 = new Array();
                        let series1 = new Array();
                        let series2 = new Array();
                        let series3 = new Array();
                        let series4 = new Array();
            var maxnumber=0;
            for (let index = 0; index < dataList.length; index++) {
              const element = dataList[index];
              xAxis0.push(element.sp_wccode);
              //投入
              series0.push(element.v_inqty);
              if(element.v_inqty>maxnumber){
                maxnumber= element.v_inqty;
              }
              //产出
              series1.push(element.v_outqty);
              if(element.v_outqty>maxnumber){
                maxnumber= element.v_outqty;
              }
              //不良
              series2.push(element.v_ngqty);
              //良率
              series3.push(element.v_okrate);
              //UPH
              series4.push(element.uph);
              if(element.uph>maxnumber){
                maxnumber= element.uph;
              }
            }
            this.options.xAxis[0].data = xAxis0;
            this.options.series[0].data = series0;
            this.options.series[1].data = series1;
            this.options.series[2].data = series2;
            this.options.series[3].data = series3;
            this.options.series[4].data = series4;
            this.options.yAxis[0].max = maxnumber*1.2;
                       /*let myChart = this.$children[0].chart;
                       myChart.setOption({
                          xAxis: {
                            data: xAxis0
                          },
                          series: [
                            {
                              // 根据名字对应到相应的系列
                              name: '投入',
                              data: series0
                            },
                            {
                              name: '产出',
                              data: series2
                            }, {
                              name: '不良',
                              data: series3
                            },
                            {
                              name: '不良率%',
                              data: series4
                            },
                          ]
                        });*/
                      },(result)=>{
                        console.error(result)
                      }
              );
    }
  }
}
</script>