ar-monthly-company-bar.vue 3.68 KB
Newer Older
1 2 3 4 5 6
<template>
  <div id="ar_monthly_company_bar"/>
</template>

<script>
import * as echarts from "echarts";
7
import {arMonthlyCompanyBar} from "../../../api/apiList";
8
import {convert_num_unit} from "../../../utils/numUtil";
9 10 11 12 13 14 15

export default {
  name: "ArMonthlyCompanyBar",
  data() {
    return {
      arMonthlyCompanyBar: null,
      barChart: {
16 17 18 19
        tooltip: {
          trigger: 'axis',
          formatter: (params) => params[0].name + "<br>" + params[0].marker + "\t\t" + this.convert_num_unit(params[0]),
        },
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
        title: {
          show: true,
          text: "XXXX-XX 已开票未收款(结算单位)",
          left: "center",
          textStyle: {color: "white"}
        },
        textStyle: {
          color: "#FFFFFF",
          fontSize: "12"
        },
        grid: {
          containLabel: true,
          top: "10%",
          bottom: '10%'
        },
        xAxis: {
          data: ['XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司'],
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "12",
            interval: 0,
            rotate: 20
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#1E2C58"
            }
          },
          axisLabel: {
            show: false,
            color: "#FFFFFFAA",
            fontSize: "16"
          }
        },
        series: {
          type: 'bar',
          data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098],
          barWidth: "60%",
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          },
          itemStyle: {
            borderRadius: 10,
          },
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              {offset: 0, color: '#00CCD2'},
              {offset: 1, color: '#00A2FF'}
            ]
          },
          label: {
            show: true,
            position: 'top',
            color: "#FFFFFF",
83
            formatter: this.convert_num_unit
84 85 86 87 88 89
          },
        }
      },
    }
  },
  methods: {
90
    convert_num_unit,
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    // 绘制图表
    drawArMonthlyCompanyBar() {
      if (!this.arMonthlyCompanyBar) {
        this.arMonthlyCompanyBar = echarts.init(document.getElementById('ar_monthly_company_bar'))

        // 监听窗口大小变化,重绘图表
        window.addEventListener('resize', this.resizeChart);
      }
      this.arMonthlyCompanyBar.setOption(this.barChart);
    },
    resizeChart() {
      if (this.arMonthlyCompanyBar) {
        this.arMonthlyCompanyBar.resize();
      }
    },
  },
  mounted() {
    // 调整图表标题
    let month = this.$route.query.month
    if (!month) {
      this.$router.push("/ar_bar/monthly")
    }
    this.barChart.title.text = month + " 已开票未收款(结算单位)"
    // 获取图表数据
115
    arMonthlyCompanyBar(month).then(res => {
116
      let data = res.data
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
      let xAxisData = []
      let seriesData = []
      for (let item of data) {
        xAxisData.push(item.settle_company)
        seriesData.push(item.unregister_amount)
      }
      this.barChart.xAxis.data = xAxisData
      this.barChart.series.data = seriesData
      this.drawArMonthlyCompanyBar()
    }).catch(err => {
      console.log(err);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  }
}
</script>