<template>
  <div>
    <div class="chart" id="myEchartsFour">
      <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: "/four/data" });
    }

    onMounted(() => {
      getState().then(() => {
        console.log("柱状图4", data);
        let myChart = $echarts.init(document.getElementById("myEchartsFour"));
        myChart.setOption({
          // tooltip: {
          //   trigger: "item"
          // },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true
          },
          label: {
            show: true,
            color: "#fff",
            fontSize: 16
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,

              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: `海运${53}%` },
                { value: 735, name: `陆运${32}%` },
                { value: 480, name: `空运${15}%` }
              ]
            }
          ]
        });
      });
    });
    return {
      getState,
      data
    };
  }
};
</script>

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