src/components/weekAndDay/uWeek.vue

<template>
  <div class="app-uWeekBox">
    <div class="theme-card2">
      <div class="title"><span>周出场统计</span></div>
      <div class="content" style="padding: 10px;box-sizing:border-box;padding-right:0px;">
        <!--<div class="lineChart"></div>-->
        <div class="contentBox">
          <div  class="weekChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import { weekAddress } from '../../api/api'
    export default {
      name: "uWeek",
      data() {
        return {
          weekChart: {},
          name: '周出场统计图'
        }
      },
      mounted() {
        this.onLoad()
      },
      methods: {
        onLoad() {
          weekAddress({
            orgIds: this.GLOBAL.paramsvariables
          }).then((response)=>{
            let  data = response.data.data
            let  xData=[],inNum=[],outNum=[],lastInNum
            for(let i=0;i<data.length;i++){
              xData.push(data[i].queryDate)
              inNum.push(data[i].inNum)
              outNum.push(data[i].outNum)
              lastInNum = data[data.length-1].inNum
            }
            this.$store.dispatch('transferOrderTotal',lastInNum)
            this.weekChart=this.createLine(xData,inNum,outNum);
            window.addEventListener('resize', function() {
              this.weekChart.resize()
            }.bind(this));
          }).catch((response)=>{
            console.log(response);
          })
        },
        createLine(xAxis_data,series_in,series_out){
          // 基于准备好的dom，初始化echarts实例
          let lineChart = echarts.init(document.querySelector('.weekChart'));
          let axisLineColor="#10377c";
          let axisLabelColor="#7c8799";
          let legend_data=['进场', '出场'];
          // let xAxis_data=['10/1', '10/2', '10/3', '10/4', '10/5', '10/6', '10/7'];
          // let series_in=[220, 182, 191, 134, 150, 120,100];
          // let series_out=[120, 82, 125, 145, 122, 191,150];
          const option={
            grid: {
              top: 13,left: 10,
              right: 20,bottom: 20,
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: '#072d6e'
                }
              },
              formatter:this._formatTooltip
            },
            legend: {
              itemWidth: 15,itemHeight: 8,
              itemGap: 13,
              data:legend_data ,bottom: 0,
              textStyle: {fontSize: 12,color: '#59AAF7'}
            },
            xAxis: [{
              type: "category",
              boundaryGap: true,
              axisTick: {show: false},
              axisLine: {
                lineStyle: {color: axisLineColor}
              },
              axisLabel: {
                margin: 5,
                textStyle: {
                  color:axisLabelColor,fontSize: 12
                }
              },
              splitLine: {
                lineStyle: {color: '#57617B'}
              },
              data: xAxis_data
            }],
            yAxis: [{
              type: 'value',
              //name: '单位（%）',
              axisTick: {show: false},
              axisLine: {lineStyle: { color: axisLineColor}},
              axisLabel: {
                margin: 5,
                textStyle: {color:axisLabelColor,fontSize: 12}
              },
              splitLine: {lineStyle: {color: '#10377c'}}
            }],
            series: [
              {
                name: '进场',type: 'line',symbol: 'circle',symbolSize: 5,
                // smooth: true,// showSymbol: false,
                lineStyle: {normal: { width: 0.8}},
                itemStyle: {
                  normal: {
                    color: 'rgb(255,177,48)',
                    borderColor: 'rgba(216,152,57,0.17)',
                    borderWidth: 8
                  }
                },
                areaStyle: { //区域填充样式
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //填充的颜色。
                      offset: 0, // 0% 处的颜色
                      color: 'rgba(137, 189, 27, 0.3)'
                    }, {
                      offset: 0.8, // 80% 处的颜色
                      color: 'rgba(137, 189, 27, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)', //阴影颜色。支持的格式同color
                    shadowBlur: 10 //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
                  }
                },
                data:series_in//[220, 182, 191, 134, 150, 120]
              },
              {
                name: '出场',type: 'line',symbol: 'circle',symbolSize: 5,
                // showSymbol: false, // smooth: true,
                lineStyle: {normal: { width: 0.8}},
                itemStyle: {
                  normal: {
                    color: 'rgb(8,185,252)',
                    borderColor: 'rgba(8,185,252,0.2)',
                    borderWidth: 8
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(0, 136, 212, 0.5)'
                    }, {
                      offset: 0.8,
                      color: 'rgba(0, 136, 212, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                  }
                },
                data: series_out
              }
            ]
          };
          lineChart.setOption(option);
          return lineChart;
        },
        _formatTooltip:function(ticket,html){
          //debugger;
          let tmpHtml=ticket[0].name;
          for(let i=0;i<ticket.length;i++){
            let tmpObj=ticket[i];
            tmpHtml +="<br />"+tmpObj.seriesName+" : "+tmpObj.data+" (辆)";
          }
          return tmpHtml;
        }
      }
    }
</script>
<style scoped  lang="scss">
  .app-uWeekBox {
    width: 100%;
    .theme-card2{
      height: 100%;
    }
    .weekChart{
      position: absolute;
      margin:auto;
      top:0;
      bottom: 0;
      left:0;
      width: 100%;
      height: 100%;
    }
    .contentBox{
      background: url(../../images/com/border.svg) no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
</style>