LJ-UI/src/views/dashboard/QcChartLine.vue

<template>
  <div>
    <div ref="chart" style="width:95%;height:300px"></div>
  </div>

</template>


<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  import {getLineQcData} from '@/api/mes/reportWork'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '99%'
      },
      height: {
        type: String,
        default: '260px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null
      }
    },

    mounted() {
      this.getLineQcInfo();
    },

    methods: {
      getLineQcInfo(){
        getLineQcData().then(returnData => {
           const chart = this.$refs.chart
            if (chart) {
              const myChart = this.$echarts.init(chart)
              const option = {
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: returnData.seriesNames
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                /**
                toolbox: {
                  feature: {
                    saveAsImage: {}
                  }
                },**/
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let result="";
                        for (let i = 0; i < params.length; i++) {
                                if(params[i].data!=0){
                                    result+=params[i].marker + params[i].seriesName + '：' + params[i].data + '%<br>'
                                }
                        }
                        return params[0].name + '<br/>'
                            + result

                    }

                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: returnData.xAxisDatas
                },
                yAxis: {
                  type: 'value',
                  axisLabel: {
                    formatter: '{value} %'
                  }
                },
                series: returnData.seriesDatas

              }
              myChart.setOption(option)
              window.addEventListener("resize", function() {
                myChart.resize()
              })
            }
            this.$on('hook:destroyed',()=>{
              window.removeEventListener("resize", function() {
                myChart.resize();
              });
            })
        });
      }
    }
  }
</script>