DivFlowMoneyProjectView/src/views/dev/echarts/detailEcharts/noDivLineDetail.vue

<template>
  <div style="display: block;width:100%;height: 100%">
    <div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">未拆分金额(元)</b></div>
    <div id="noDivLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
  </div>
</template>

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

var _this;
export default {
  name: "noDivLineDetail",
  data() {
    return {
      loading:ref(false),
      //dateTime:'2024-07-22'
    }
  },
  props: ['dataTime'],
  methods: {
    initOption(dataX,dataFlow) {
      let myChart = this.$echarts.init(document.getElementById('noDivLineDetail'))
      // 绘制图表
      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:true,
             splitLine:{
              show:true
           },
            lineStyle:{
              color:'black',
              type:'solid',
              width:2
            },
           // sync: true,
            //splitNumber:10,
            //position:'left'
          },
        series : [
          {
            name:'金额(元)',
            type:'line',
            data:dataFlow,
            label:{
              show: true, // 显示标签
              position: 'top', // 标签位置
              formatter: '{c}' // 标签格式器，{c} 代表数据值
            }
          }
        ]
      };
      myChart.setOption(this.option);
      /*myChart.on('click', function(params) {
        // 控制台打印数据的名称
        _this.$emit("changeGantryCount",params.name);
      });*/
    }
  },mounted() {
    _this=this;
    var dataParam={
      "dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
    }
    //this.loading=true;
    let dataX=[];
    var data = [];
    for(var k=10;k<17;k++){
      dataX.push(k);
      data.push(k+6);
    }
    this.initOption(dataX,data);
    /*getGantryPassDivStatList(dataParam).then(
        res => {
          this.loading=false;
          if(res.code >0){
            let dataX=[];
            var data = [];
            let _data=res.data;
            if (_data.length > 0) {
              for(var k=0;k<_data.length;k++){
                dataX.push(_data[k].GANTRYCOUNT);
                data.push(_data[k].CARCOUNT);
              }
            }
            this.initOption(dataX,data);
          }
        })*/

  }
}
</script>

<style>

</style>