<template>
  <div>
    <div class="chart" id="oneChartones">
      <span>图表加载中...</span>
    </div>
  </div>
</template>
  
  <script>
import { inject, onMounted, reactive, defineEmits } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    // 引用后台数据
    let $http = inject("axios");
    // 创建数据
    let data = reactive({});
    let xdata = reactive([]);
    let ydata = reactive([]);

    // 处理数据
    function setData() {
      xdata = data.data.chartData.chartData.data.map(v => v.title);
      ydata = data.data.chartData.chartData.data.map(v => v.num);
    }

    // 请求后台数据
    async function getState() {
      data = await $http({ url: "/one/data" });
    }

    onMounted(() => {
      // 获取元素
      let mychart = $echarts.init(document.getElementById("oneChartones"));
      // 调用请求
      console.log(mychart);
      // getState().then(() => {
      // setData();
      mychart.setOption({
        title: {
          subtext: "单位：人",
          subtextStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true
        },
        textStyle: {
          color: "#fff",
          fontSize: 20
        },
        dataset: [
          {
            dimensions: ["name", "age", "profession", "score", "date"],
            source: [
              ["管理人员", 41, "Engineer", 100, "2011-02-12"],
              ["司机", 20, "Teacher", 351, "2011-03-01"],
              ["门卫", 52, "Musician", 287, "2011-02-14"],
              ["财务", 37, "Teacher", 219, "2011-02-18"],
              ["派单员", 25, "Engineer", 253, "2011-04-02"],
              ["卸载人员", 19, "Teacher", 200, "2011-01-16"],
              ["签收人员", 71, "Engineer", 165, "2011-03-19"],
              ["器具中心", 36, "Musician", 318, "2011-02-24"]
            ]
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" }
            }
          }
        ],

        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1
        }
      });
    });
    // });
    return {
      // 返回数据
      getState,
      data,
      xdata,
      ydata,
      setData
    };
  }
};
</script>
  
<style lang="scss" scoped>
.chart {
  height: 210px;
  span {
    width: 100px;
    margin: 10px auto;
  }
}
</style>