luohe_fronted/src/pages/index/components/city_pay.vue

<template>
  <div class="body-wrapper">
    <h2 style="color: #3498db;">各城市欠费追缴分析</h2>
    <br>
<!--    <el-form class="form-wrapper" :inline="true" :model="formInline">-->
<!--      <el-form-item label="">-->
<!--        <el-select clearable v-model="formInline.comType" placeholder="全部" popper-class="cur-select">-->
<!--          <el-option label="全部" value=""></el-option>-->
<!--          <el-option label="经营服务类停车问题" value="经营服务类停车问题"></el-option>-->
<!--          <el-option label="非法经营停车问题" value="非法经营停车问题"></el-option>-->
<!--          <el-option label="不提供税票" value="不提供税票"></el-option>-->
<!--          <el-option label="设备问题" value="设备问题"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <br>
    <br>
      <div style="width: 100%; height: 600px">
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(元)"
          :dataset="linedata"
          :tooltipFormat="lineTooltipFormat"
          :encode="[
              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
            ]"
          id="axstj"
        />
      </div>
  </div>
</template>
<script>
import piechart from "@/components/pieChart";
import linechart from "@/components/lineChart";
import barchart from "@/components/barChart";
import api from "@/api/article_liao";

export default {
  components: {
    piechart,
    barchart,
    linechart
  },
  data() {
    return {
      formInline: {
        comType: ''
      },
      modelPieColor: ["#4382f6","#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
      modelPieColor1: ["#4382f6","#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
      modelData: {
        list: [],
        list1: []
      },
      bardata: [],
      linedata: []
    }
  },
  mounted() {
    this.businessAnalysisStat()
    this.businessAnalysisStat2()
    this.businessAnalysisStat3()
  },
  watch: {

  },
  methods: {
    tooltipFormat(params) {
      const type = params[0].seriesType;
      const data = params[0].data;
      return `<div class="line-tooltip">
<div>${params[0].seriesName}: ${
        params[0].data.hs || "--"}元</div>
<div>${params[1].seriesName}: ${
        params[0].data.cs || "--"}元</div>
</div>`;
    },
    lineTooltipFormat(params) {
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].data.mouth} : ${
        params[0].data.lastAmount  || "--"
      }元</div>`;
    },
    onSubmit() {
      this.pageNum = 1
      this.getTableData()
    },
    businessAnalysisStat(){
      api.businessAnalysisStat().then(res =>{
        this.bardata = res.data
      })
    },
    businessAnalysisStat2(){
      api.businessAnalysisStat2().then(res =>{
        this.modelData.list = res.data
      })
    },
    businessAnalysisStat3(){
      api.businessAnalysisStat3().then(res =>{
        this.modelData.list1 = res.data
      })
    },
    xLabelFormat(name) {
      const nameArr = []
      for(let i=0; i<name.length; i+=7) {
        nameArr.push(name.substring(i, i+7))
      }
      return nameArr.join('\n');
    }
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;

}
.model-pie-body {
  width: 100%;
  height: 99%;
}
/deep/ .el-select {
  height: 40px;

  .el-input__inner {
    height: 40px;
  }
}

</style>