DivFlowMoneyProjectView/src/views/dev/echarts/jfLine.vue

<template>
  <div style="display: block;width:100%;height: 250px">
    <div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">拒付</b></div>
    <div id="jfLine" style="width: 100%;height: 220px" v-loading="isloading" ></div>
  </div>
</template>

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

var _this;
export default {
  name: "jfLine",
  data() {
    return {
      isloading:ref(true),
      //dateTime:'2024-07-22'
    }
  },
  props: ['dataType','beginDate','endDate'],
  methods: {
    initOption(dataX,dataMoney,dataFlow) {
      let myChart = this.$echarts.init(document.getElementById('jfLine'))
      // 绘制图表
      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']},
            /* restore : {show: true},
             saveAsImage : {show: true}*/
          }
        },
        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:10,
            position:'right'
          }
        ],
        series : [
          {
            name:'流量(辆)',
            type:'line',
            data:dataFlow,
            label:{
              show: false, // 显示标签
              position: 'top', // 标签位置
              formatter: '{c}' // 标签格式器，{c} 代表数据值
            },
            yAxisIndex:0
          },{
            name:'金额(元)',
            type:'line',
            data:dataMoney,
            label:{
              show: false, // 显示标签
              position: 'top', // 标签位置
              formatter: '{c}' // 标签格式器，{c} 代表数据值
            },
            yAxisIndex:1
          }
        ]
      };
      myChart.setOption(this.option);
      /*myChart.on('click', function(params) {
        // 控制台打印数据的名称
        _this.$emit("changeGantryCount",params.name);
      });*/
    }
  },mounted() {
    _this=this;
    var paramsObj={
      "beginDate":this.beginDate,
      "endDate":this.endDate,
      "dataType":this.dataType
    }
    getDivPassidAllJTDataList(paramsObj).then(
        res=>{
          if (res.code > 0) {
            let _data = res.data;
            if (_data.length > 0) {
              let dataX=[];
              var data = [];
              var dataFlow = [];
              if(_data !==undefined ){
                for(var k=0;k<_data.length;k++){
                  dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
                  data.push(_data[k].JFMONEY);
                  dataFlow.push(_data[k].JFFLOW);
                }
              }
              this.initOption(dataX,data,dataFlow);
            }
          }
          _this.isloading=false;
        }
    )

  }
}
</script>

<style>

</style>