<template>
  <div>
    <div class="chart" id="onsexchar">
      <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("onsexchar"));
      // 调用请求
      getState().then(() => {
        setData();
        // 初始化
        mychart.setOption({
          title: {
            subtext: "单位：百万",
            subtextStyle: {
              color: "#fff"
            }
          },
          textStyle: {
            color: "#fff",
            fontSize: 20
          },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              data: [
                150,
                230,
                224,
                218,
                135,
                147,
                260,
                222,
                233,
                288,
                143,
                322
              ],
              type: "line",
              color: "yellow"
            }
          ]
        });
      });
    });
    return {
      // 返回数据
      getState,
      data,
      xdata,
      ydata,
      setData
    };
  }
};
</script>
  
  <style lang="scss" scoped>
.chart {
  height: 210px;
}
</style>