<template>

  <div class="echart" id="mychart" :style="myChartStyle"></div>

</template>

<script>

import * as echarts from "echarts";

export default {

  data() {

    return {

      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式

    };

  },

  mounted() {

    this.initEcharts();

  },

  methods: {

    initEcharts() {

      // 基本柱状图

      const option = {

        title: {

          text: "ECharts",

        },

        tooltip: {},

        legend: {

          data: ["睡眠"],

        },

        xAxis: {

          // data: ["2202-01", "2202-02", "2202-03", "2202-04"],

          data: [

            "2202-01",

            "2202-02",

            "2202-03",

            "2202-04",

            "2202-05",

            "2202-06",

            "2202-07",

            "2202-08",

          ],

        },

        yAxis: {

          min: 0,

          max: 4,

          axisLabel: {

            formatter: function (value) {

              var texts = [];

              if (value <= 1) {

                texts.push("没睡");

              } else if (value <= 2) {

                texts.push("翻身");

              } else if (value <= 3) {

                texts.push("熟睡");

              } else {

                texts.push("深睡");

              }

              return texts;

            },

          },

        },

        series: [

          {

            name: "销量1",

            type: "bar",

            data: [

              {

                value: 1,

                itemStyle: {

                  color: "#a90000",

                },

              },

              4,

              2,

              3,

              2,

              8,

            ],

          },

        ],

      };

      const myChart = echarts.init(document.getElementById("mychart"));

      myChart.setOption(option);

      //随着屏幕大小调节图表

      window.addEventListener("resize", () => {

        myChart.resize();

      });

    },

  },

};

</script>