<template>
  <div>
    <div class="chart" id="myEcharts">
      <span>图表加载中...</span>
    </div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    let $http = inject("axios");
    // 存储数据
    let data = reactive({});

    // 请求获取数据
    async function getState() {
      data = await $http({ url: "/three/data" });
    }
    onMounted(() => {
      getState().then(() => {
        // 设置表格
        let myChart = $echarts.init(document.getElementById("myEcharts"));
        myChart.setOption({
          title: {
            subtext: "单位：百万元",
            subtextStyle: {
              color: "#fff"
            }
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["运输费用", "保管费用", "管理费用"]
          },
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          legend: {
            // orient: "vertical",
            right: "top",
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["2020", "2021", "2023"]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "运输费用",
              type: "line",
              stack: "Total",
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: "保管费用",
              type: "line",
              stack: "Total",
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: "管理费用",
              type: "line",
              stack: "Total",
              data: [150, 232, 201, 154, 190, 330, 410]
            }
          ]
        });
      });
    });
    return {
      getState,
      data
    };
  }
};
</script>

<style>
.chart {
  height: 210px;
}
</style>