ylrz_his_scrm_adminUI/src/views/components/his/storeOrderMoney.vue

<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts'
import { orderChartData,listAdv, getAdv, delAdv, addAdv, updateAdv, exportAdv } from "@/api/his/index";
export default {
  data() {
    return {
      chart: null,
      data: [
      ],
    };
  },

  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer, 'macarons');
    this.chart.on('mouseout', this.hideTooltip);
    this.updateChart();
    this.getorderChartData();
  },

  watch: {
    data() {
      this.updateChart();
    },
  },

  methods: {
    getorderChartData(){
      orderChartData().then(response => {
        this.data = response.data;
      });
    },
    formatter(params) {
      const item = params[0];
      return  `
              <div>
                <div>日期：${item.axisValue}</div>
                <div>收入金额：${item.value}元</div>
                <div>订单数量：${item.data.info}</div>
              </div>
            `;;
    },
    updateChart() {
      const option = {
        xAxis: {
          type: 'category',
          data: this.data.map((item) => item.label),
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          trigger: 'axis',
          formatter: this.formatter,
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(227, 242, 252, 0.39)",
              width: 40,
              type: "solid",
            },
            z: 0,  //注意要设置层级，不然会在覆盖在柱子前面，设置为0就在柱子后面显示了。
          },
        },
        series: [
          {
            name: 'Value',
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              color: '#3399CC',
            },
            label: {
              show: true,
              position: 'top',
            },
            data: this.data.map((item) => ({ value: item.value, info: item.info })),
          },
        ],
      };
      this.chart.setOption(option);
    },
    hideTooltip() {
      this.chart.dispatchAction({
        type: 'hideTip',
      });
    },
  },
};
</script>