BJ_web_developers / cityOperationCenter

  <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, weekAddressDY } from '../../api/api'

      export default {
        name: "uWeek",
        data() {
          return {
            weekChart: {},
            name: '周出场统计图'
          }
        },
        mounted() {

          this.onLoad()

        },
        methods: {

          onLoad() {

            this.$axios.all(
              [
                weekAddress({ orgIds: this.GLOBAL.paramsvariables}),

                weekAddressDY({ orgIds: this.GLOBAL.variables})

              ]
            )
            .then(this.$axios.spread((acctWX, acctDY) => {
              let WXdata = acctWX.data.data
              let DYdata = acctDY.data.data

              let  xData=[],inNum=[],outNum=[],lastInNum

              // for(let i=0;i<WXdata.length;i++){
              //   xData.push(WXdata[i].queryDate)
              //   inNum.push(WXdata[i].inNum+DYdata[i].inNum)
              //   outNum.push(WXdata[i].outNum+DYdata[i].outNum)
              //   lastInNum = WXdata[WXdata.length-1].inNum+DYdata[WXdata.length-1].inNum
              // }
  
  

              for(let i=0;i<WXdata.length;i++){
                xData.push(WXdata[i].queryDate)

                inNum.push(WXdata[i].inNum)
                outNum.push(WXdata[i].outNum)
                lastInNum = WXdata[WXdata.length-1].inNum

              }

              this.$store.dispatch('transferOrderTotal',lastInNum)
              this.weekChart=this.createLine(xData,inNum,outNum);
              window.addEventListener('resize', function() {
                this.weekChart.resize()
              }.bind(this));

  
            }))

          },

          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>