kanban-vue/src/components/warehousechart/bottom2OldChart/chart.vue

<template>
  <div>
    <!-- 当日工段投产良率 -->
    <Echart
        :options="options"
        id="bottom2Chart"
        height="410px"
        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
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              fontSize: 16
            }
          },
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%',
              fontSize: 16
            }
          }

        ],
        series: [
          {
            name: '已备料',
            type: 'bar',
            barWidth: 20,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data:[],
            itemStyle: {
              color: '#9FE6B8'  //fac858
            },
          },
          {
            name: '未备料',
            type: 'bar',
            stack: 'Ad',
            barWidth: 10,
            data:[],
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#FFE900'  //fac858
            },

          },
          {
            name: '备料比例%',
            type: 'line',
            data:[],
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(0,161,26,0.8)" },
                  { offset: 0.2, color: "rgba(0,161,26,0.5)" },
                  { offset: 1, color: "rgba(0,161,26,0.2)" }
                ])
              }
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      },
    };
  },
  components: {
    Echart, //子组件
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },

  mounted() {
    this.refreshdata();
  },
  beforeDestroy () {
    clearInterval(this.timing);
    this.chart.dispose()
    this.chart.clear()
    this.chart=null
  },
  methods: {
    refreshdata() {
      this.getdata();
      this.timing = setInterval(() => {
        this.getdata(); //获取-数据
      }, 10000);
    },

    async getdata() {
      this.options.xAxis[0].data = [];
      this.options.series[0].data = [];
      this.options.series[1].data =[];
      this.options.series[2].data = [];
      var caller = 'KB!WHMAKEPREPAREPG';
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100&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();
                for (let index = 0; index < dataList.length; index++) {
                  const element = dataList[index];
                  xAxis0.push(element.v_whname);
                  /*if(index%2 == 0) {
                    xAxis0.push(element.v_whname);
                  }else{
                    xAxis0.push('\n'+element.v_whname);
                  }*/
                  //已备料
                  series0.push(element.v_haveqty);
                  //未备料
                  series1.push(element.v_unqty);
                  //备料率
                  series2.push(element.v_rate);
                }
                this.options.xAxis[0].data = xAxis0;
                this.options.series[0].data = series0;
                this.options.series[1].data = series1;
                this.options.series[2].data = series2;
              },(result)=>{
                console.error(result)
              }
          );
    }
  }
}
</script>