main-bar-chart.vue 2.42 KB
Newer Older
张恒's avatar
张恒 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<template>
  <div id="main_bar_chart" @click="goChart"/>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "MainBarChart",
  data() {
    return {
      barChart: {
        textStyle: {
          color: "#FFFFFF",
          fontSize: "12"
        },
        tooltip: {},
        grid: {
          top: "10%",
          bottom: "10%"
        },
        xAxis: {
          data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "12",
            margin: "15"
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [{
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#1E2C58"
            }
          },
          axisLabel: {
            show: false,
            color: "#FFFFFFAA",
            fontSize: "16"
          }
        }],
        series: [
          {
            name: '应收账款',
            type: 'bar',
            data: [5002, 57873, 1987, 71168, 41098],
            barWidth: "40%",
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            },
            itemStyle: {
              barBorderRadius: 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",
            },
          }
        ]
      },
      myChart: null
    }
  },
  methods: {
    resizeChart() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    goChart() {
      this.$router.push({path: "/chart"})
    }
  },
  mounted() {
    // 设置500毫秒延迟执行,解决组件没有渲染完成就开始绘制图表的问题
    setTimeout(() => {
      let mainBarChart = document.getElementById('main_bar_chart')
      this.myChart = echarts.init(mainBarChart)
      this.myChart.setOption(this.barChart);
      // 监听窗口大小变化,重绘图表
      window.addEventListener('resize', this.resizeChart);
    }, 500)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  }

}

</script>