devProjectViewJt/src/views/dev/echarts/echatsTotalLine.vue

<template>
  <div style="display: flex;width:1680px;height: 250px">
      <div style="display: block;width:50%;height: 250px">
        <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">应收</b></div>
        <div id="YSLine" style="width: 800px;height:220px" v-loading="feeloading" ></div>
      </div>
      <div style="display: block;width:50%;height: 250px">
        <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">拆分准确</b></div>
        <div id="divRightLine" style="width: 800px;height:220px" v-loading="loading" ></div>
      </div>
  </div>

  <div style="display: flex;width:1680px;height: 250px">
    <div style="display: block;width:50%;height: 250px">
      <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">未拆分</b></div>
      <div id="noDivLine" style="width: 800px;height:220px" v-loading="loading" ></div>
    </div>
    <div style="display: block;width:50%;height: 250px">
      <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">未计费</b></div>
      <div id="noFeeLine" style="width: 800px;height:220px" v-loading="loading" ></div>
    </div>
  </div>

  <div style="display: flex;width:1680px;height: 250px">
    <div style="display: block;width:50%;height: 250px">
      <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">计费大于拆分</b></div>
      <div id="lessDivLine" style="width: 800px;height:220px" v-loading="loading" ></div>
    </div>
    <div style="display: block;width:50%;height: 250px">
      <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">计费小于拆分</b></div>
      <div id="moreDivLine" style="width: 800px;height:220px" v-loading="loading" ></div>
    </div>
  </div>
</template>

<script>
import {ref } from 'vue';
import tool from '@/util/tool';
import {getDivDataList, getFeeTotal} from "@/util/api/api";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'

var _this;
export default {
  name: "echatsTotalLine",
  data() {
    return {
      loading:ref(false),
      feeloading:ref(false),
      beginDate:"",
      endDate:"",
      dataType:"JT",
      //dateTime:'2024-07-22'
    }
  },
  methods: {
    refreshData(beginDate,endDate,subcomno,roadno,stano){
      this.loading=true;
      this.feeloading=true;
      this.queryStartTime= beginDate;
      this.queryEndTime= endDate;
      this.subcomno= subcomno;
      this.roadno= roadno;
      this.stano= stano;
      var paramsObj={
        "queryStartTime":beginDate,
        "queryEndTime":endDate,
        "subcomno":subcomno,
        "roadno":roadno,
        "stano":stano,
        "isNoContainJm":"Y" //默认不包含减免的费用
      }
      getDivDataList(paramsObj).then(
          res=>{
            this.loading=false;
            if (res.code > 0) {
              let _data = res.data;
                let dataX=[];
                var dataRight = [];
                var dataRightFlow = [];

                var dataNoDiv = [];
                var dataNoDivFlow = [];

                var dataNoFee = [];
                var dataNoFeeFlow = [];

                var dataLessDiv = [];
                var dataLessDivFee = [];
                var dataLessDivFlow = [];

                var dataMoreDiv = [];
                var dataMoreDivFee = [];
                var dataMoreDivFlow = [];

                if(_data !==undefined ){
                  if (_data.length > 0) {
                  var _classdate="";
                  for(var k=0;k<_data.length;k++){
                    let divData=_data[k];
                    if(_classdate !== divData.classdate){
                      dataX.push(tool.formatDate(new Date(divData.classdate),"YYYY-MM-DD"));
                      _classdate=divData.classdate;
                    }
                    if(divData.status ==="1"){
                      dataRight.push(tool.NumRound(divData.fee));
                      dataRightFlow.push(divData.carcount);
                    }
                    if(divData.status ==="2"){//计费大于拆分
                      dataLessDiv.push(tool.NumRound(divData.fee));
                      dataLessDivFee.push(tool.NumRound(divData.divfee));
                      dataLessDivFlow.push(divData.carcount);
                    }
                    if(divData.status ==="3"){//计费小于拆分
                      dataMoreDiv.push(tool.NumRound(divData.fee));
                      dataMoreDivFee.push(tool.NumRound(divData.divfee));
                      dataMoreDivFlow.push(divData.carcount);
                    }
                    if(divData.status ==="4"){//未计费
                      dataNoFee.push(tool.NumRound(divData.divfee));
                      dataNoFeeFlow.push(divData.carcount);
                    }
                    if(divData.status ==="5"){//未拆分
                      dataNoDiv.push(tool.NumRound(divData.fee));
                      dataNoDivFlow.push(divData.carcount);
                    }
                  }
                }
                this.$nextTick(() => {
                  this.initOptionLine('divRightLine', dataX, dataRight, dataRightFlow);
                  this.initOptionLine('noDivLine', dataX, dataNoDiv, dataNoDivFlow);
                  this.initOptionLine('noFeeLine', dataX, dataNoFee, dataNoFeeFlow);
                  this.initOptionLineMoreLess('lessDivLine', dataX, dataLessDiv,dataLessDivFee, dataLessDivFlow);
                  this.initOptionLineMoreLess('moreDivLine', dataX, dataMoreDiv,dataMoreDivFee, dataMoreDivFlow);
                })
              }
            }
          }
      )
      getFeeTotal(paramsObj).then(
          res=>{
            this.feeloading=false;
            if (res.code > 0) {
              let _data = res.data;
              if (_data.length > 0) {
                let dataX=[];
                var dataYS = [];
                var dataYSFlow = [];
                if(_data !==undefined ){
                  for(var k=0;k<_data.length;k++){
                    let divData=_data[k];
                      dataX.push(tool.formatDate(new Date(divData.classdate),"YYYY-MM-DD"));
                      dataYS.push(tool.NumRound(divData.fee));
                      dataYSFlow.push(divData.carcount);
                  }
                }
                this.$nextTick(() => {
                  this.initOptionLine('YSLine', dataX, dataYS, dataYSFlow);
                })
              }
            }
          }
      )
    },initOptionLine(divId,dataX,dataMoney,dataFlow) {
      let myChart = this.$echarts.init(document.getElementById(divId))
      // 绘制图表
      this.option = {
        title : {
          text: '',
          subtext: ''
        },
        tooltip : {
          trigger: 'axis',
          //position:['20px','20px']
        },
        legend: {
          data:["流量(辆)","金额(元)"]
        },
        toolbox: {
          show : true,
          orient: 'vertical',
          title : {
            line : '折线图',
            bar : '柱形图'

          },
          feature : {
            mark : {show: true},
            //垂直显示
            //dataView : {show: true, readOnly: false},
            magicType : {show: true,
              title : {
                line : '折线图',
                bar : '柱形图'

              },
              type: ['line', 'bar']},
          }
        },
        calculable : true,
        xAxis :
          {
            type : 'category',
            name:'日期',
            nameTextStyle:{
              lineHeight:30,
              verticalAlign:'top'
            },
            boundaryGap : true,
            axisTick: {
              show: true,
              alignWithLabel:true

            },
            axisLabel: { //设置x轴的文字
              show:true,
              interval:0,//使x轴横坐标全部显示
              //rotate:45,
              textStyle:{fontSize:10}
            },
            data : dataX
          }, dataZoom: [{
          type: 'slider',
          show: true, //flase直接隐藏图形
          xAxisIndex: [0],
          backgroundColor:'rgb(233,236,238)',
          handleColor:'rgba(147,145,145,0.81)',
          fillerColor:'rgb(184,186,187)',
          handleSize:30,//控制手柄大小
          height:30,
          left: '9%', //滚动条靠左侧的百分比
          bottom: -5,
          start: 0,//滚动条的起始位置
          end: 110 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }],
        yAxis :[
          {
            type : 'value',
            axisLabel : {
              formatter: '{value}'
            },
            show:false,
            splitLine:{
              show:true
            },
            lineStyle:{
              color:'black',
              type:'solid',
              width:2
            },
            sync: true,
            splitNumber:10,
            position:'left'
          },{
            type : 'value',
            axisLabel : {
              formatter: '{value}'
            },
            show:false,
            splitLine:{
              show:true
            },
            lineStyle:{
              color:'black',
              type:'solid',
              width:2
            },
            sync: true,
            splitNumber:100,
            position:'right'
          }
        ],
        series : [
          {
            name:'流量(辆)',
            type:'line',
            data:dataFlow,
            label:{
              show: true, // 显示标签
              position: 'top', // 标签位置
              formatter: '{c}' // 标签格式器，{c} 代表数据值
            },
            yAxisIndex:0
          },{
            name:'金额(元)',
            type:'bar',
            data:dataMoney,
            label:{
              show: true, // 显示标签
              position: 'inside', // 标签位置
              formatter: '{c}' // 标签格式器，{c} 代表数据值
            },
            yAxisIndex:1
          }
        ]
      };
      myChart.setOption(this.option);
      /*myChart.on('click', function(params) {
        // 控制台打印数据的名称
        _this.$emit("changeGantryCount",params.name);
      });*/
    },initOptionLineMoreLess(divId,dataX,dataMoney,dataFeeMoney,dataFlow) {
    let myChart = this.$echarts.init(document.getElementById(divId))
    // 绘制图表
    this.option = {
      title : {
        text: '',
        subtext: ''
      },
      tooltip : {
        trigger: 'axis',
        //position:['20px','20px']
      },
      legend: {
        data:["流量(辆)","计费金额(元)","拆分金额(元)"]
      },
      toolbox: {
        show : true,
        orient: 'vertical',
        title : {
          line : '折线图',
          bar : '柱形图'

        },
        feature : {
          mark : {show: true},
          //垂直显示
          //dataView : {show: true, readOnly: false},
          magicType : {show: true,
            title : {
              line : '折线图',
              bar : '柱形图'

            },
            type: ['line', 'bar']},
        }
      },
      calculable : true,
      xAxis :
          {
            type : 'category',
            name:'日期',
            nameTextStyle:{
              lineHeight:30,
              verticalAlign:'top'
            },
            boundaryGap : true,
            axisTick: {
              show: true,
              alignWithLabel:true

            },
            axisLabel: { //设置x轴的文字
              show:true,
              interval:0,//使x轴横坐标全部显示
              //rotate:45,
              textStyle:{fontSize:10}
            },
            data : dataX
          }, dataZoom: [{
        type: 'slider',
        show: true, //flase直接隐藏图形
        xAxisIndex: [0],
        backgroundColor:'rgb(233,236,238)',
        handleColor:'rgba(147,145,145,0.81)',
        fillerColor:'rgb(184,186,187)',
        handleSize:30,//控制手柄大小
        height:30,
        left: '9%', //滚动条靠左侧的百分比
        bottom: -5,
        start: 0,//滚动条的起始位置
        end: 110 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
      }],
      yAxis :[
        {
          type : 'value',
          axisLabel : {
            formatter: '{value}'
          },
          show:false,
          splitLine:{
            show:true
          },
          lineStyle:{
            color:'black',
            type:'solid',
            width:2
          },
          sync: true,
          splitNumber:10,
          position:'left'
        },{
          type : 'value',
          axisLabel : {
            formatter: '{value}'
          },
          show:false,
          splitLine:{
            show:true
          },
          lineStyle:{
            color:'black',
            type:'solid',
            width:2
          },
          sync: true,
          splitNumber:100,
          position:'right'
        }
      ],
      series : [
        {
          name:'流量(辆)',
          type:'line',
          data:dataFlow,
          label:{
            show: true, // 显示标签
            position: 'top', // 标签位置
            formatter: '{c}' // 标签格式器，{c} 代表数据值
          },
          yAxisIndex:0
        },{
          name:'计费金额(元)',
          type:'bar',
          data:dataMoney,
          label:{
            show: true, // 显示标签
            position: 'inside', // 标签位置
            formatter: '{c}' // 标签格式器，{c} 代表数据值
          },
          yAxisIndex:1
        },{
          name:'拆分金额(元)',
          type:'bar',
          data:dataFeeMoney,
          label:{
            show: true, // 显示标签
            position: 'inside', // 标签位置
            formatter: '{c}' // 标签格式器，{c} 代表数据值
          },
          yAxisIndex:1
        }
      ]
    };
    myChart.setOption(this.option);

  }
  },mounted() {
    _this=this;
  /*

    var paramsObj={
      "beginDate":this.beginDate,
      "endDate":this.endDate,
      "dataType":this.dataType
    }
    getDivDataList(paramsObj).then(
        res=>{
          if (res.code > 0) {
            let _data = res.data;
            if (_data.length > 0) {
              let dataX=[];
              var dataYS = [];
              var dataYSFlow = [];

              var dataRight = [];
              var dataRightFlow = [];

              var dataNoDiv = [];
              var dataNoDivFlow = [];

              var dataNoFee = [];
              var dataNoFeeFlow = [];

              var dataLessDiv = [];
              var dataLessDivFlow = [];

              var dataMoreDiv = [];
              var dataMoreDivFlow = [];

              var dataYQ = [];
              var dataYQFlow = [];

              var dataJF = [];
              var dataJFFlow = [];

              if(_data !==undefined ){
                for(var k=0;k<_data.length;k++){
                  dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
                  dataYS.push(tool.NumRound(_data[k].JTYSMONEY/10000));
                  dataYSFlow.push(_data[k].JTYSFLOW);

                  dataRight.push(tool.NumRound(_data[k].RIGHTMONEY /10000));
                  dataRightFlow.push(_data[k].RIGHTFLOW);

                  dataNoDiv.push(tool.NumRound(_data[k].NODIVMONEY/10000));
                  dataNoDivFlow.push(_data[k].NODIVFLOW);

                  dataNoFee.push(tool.NumRound(_data[k].NOFEEMONEY/10000));
                  dataNoFeeFlow.push(_data[k].NOFEEFLOW);

                  dataLessDiv.push(tool.NumRound(_data[k].LESSDIVMONEY/10000));
                  dataLessDivFlow.push(_data[k].LESSDIVFLOW);

                  dataMoreDiv.push(tool.NumRound(_data[k].MOREDIVMONEY/10000));
                  dataMoreDivFlow.push(_data[k].MOREDIVFLOW);

                  dataYQ.push(tool.NumRound(_data[k].YQMONEY/10000));
                  dataYQFlow.push(_data[k].YQFLOW);

                  dataJF.push(tool.NumRound(_data[k].JFMONEY/10000));
                  dataJFFlow.push(_data[k].JFFLOW);
                }
              }
              this.initOptionLine('YSLine',dataX,dataYS,dataYSFlow);
              this.initOptionLine('divRightLine',dataX,dataRight,dataRightFlow);
              this.initOptionLine('noDivLine',dataX,dataNoDiv,dataNoDivFlow);
              this.initOptionLine('noFeeLine',dataX,dataNoFee,dataNoFeeFlow);
              this.initOptionLine('lessDivLine',dataX,dataLessDiv,dataLessDivFlow);
              this.initOptionLine('moreDivLine',dataX,dataMoreDiv,dataMoreDivFlow);
              this.initOptionLine('yqLine',dataX,dataYQ,dataYQFlow);
              this.initOptionLine('jfLine',dataX,dataJF,dataJFFlow);
            }
            _this.loading=false;
          }
        }
    )*/
  }
}
/*function formatDate(dateString,format) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  let hour=date.getHours();
  let minute=date.getMinutes();
  let second=date.getSeconds();
  if(hour<10){
    hour ="0"+hour;
  }
  if(minute<10){
    minute ="0"+minute;
  }
  if(second<10){
    second ="0"+second;
  }
  const milSecond=date.getMilliseconds();
  if(format=="YYYY-MM-DD"){
    return `${year}-${month}-${day}`;
  }else if(format=="YYYY-MM-DD HH:MM:SS"){
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  }else if(format=="YYYY-MM-DD HH:MM:SS:SSS"){
    return `${year}-${month}-${day} ${hour}:${minute}:${second}:${milSecond}`;
  }else if(format=="HH:MM:SS"){
    return `${hour}:${minute}:${second}:${milSecond}`;
  }
  return "";
}*/
</script>

<style>

</style>