支出统计条形图

<template>
  <div style="display: flex;">
    <div style="width: 50%;">
      <div style="width: auto;height: 470px" id="echarts1"></div>
    </div>
    <div style="width: 50%;">
      <el-table :data="tableData">
        <el-table-column prop="month" label="月份"></el-table-column>
        <el-table-column prop="purchase" label="采购支出(万元)"></el-table-column>
        <el-table-column prop="consumption" label="消费支出(万元)"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import axios from "axios";
const colors = ['#5470C6', '#EE6666']
export default {
  name: 'echarts1',
  data() {
    return {
      // option配置
      option: {
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    '月消费支出  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  )
                }
              }
            },
            // prettier-ignore
            data: ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10', '2023-11', '2023-12']
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    '月采购支出  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  )
                }
              }
            },
            // prettier-ignore
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '月采购支出',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '月消费支出',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      },
      tableData: [],
    }
  },
  mounted() {
    this.getData111()
    this.getData222()
  },
  methods: {
    echartsInit() {
      // 在生命周期中挂载
      echarts.init(document.getElementById('echarts1')).setOption(this.option)
    },
    generateTableData() {
      const xAxisData = this.option.xAxis[0].data
      const seriesData1 = this.option.series[0].data
      console.log(seriesData1)
      const seriesData2 = this.option.series[1].data
      for (let i = 0; i < xAxisData.length; i++) {
        this.tableData.push({
          month: xAxisData[i],
          purchase: seriesData1[i],
          consumption: seriesData2[i]
        })
      }
    },
    getData111() {
      axios.post(this.$httpUrl +'/data111')
        .then(response => {
          // 将返回的数据赋值给series中的对应数据项
          this.option.series[0].data = Array.from(response.data);
        })
        .catch(error => {
          console.log(error)
        })
    },
    getData222() {
      axios.post(this.$httpUrl +'/data222')
        .then(response => {
          // 将返回的数据赋值给series中的对应数据项
          this.option.series[1].data = Array.from(response.data);
          this.generateTableData()
          this.echartsInit()
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
}
</script>

<style scoped>
/* 这里可以加入一些样式 */
</style>