vue：使用echarts

需求：使用echarts绘制一个以y轴为数据的柱状图

<template>
  <div class="mt-6">
    <div id="myChart" style="width: 100%; height: calc(100vh - 300px);"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

const labelOption = {
  show: true,
  // rotate: -1,
  // align: "left",
  verticalAlign: "middle",
  // position: "insideBottom",
  // distance: 15,
  formatter: "{a}",
  // fontSize: 16,
  // color:'#fff'
};
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "2022/2/2",
            "2022/2/10",
            "2022/2/15",
            "2022/2/20",
            "2022/2/25",
          ],
        },
        series: [
          {
            name: "鱼眼",
            type: "bar",
            data: [100, 23, 233, 455, 322, 566],
            label: labelOption,
            
          },
          {
            name: "吃饭",
            type: "bar",
            data: [183, 289, 134, 170, 144, 230],
            label: labelOption,
          },
          {
            name: "睡觉",
            type: "bar",
            data: [125, 238, 310, 194, 141, 87],
            label: labelOption,
          },
          {
            name: "学习",
            type: "bar",
            data: [125, 238, 310, 194, 141, 607],
            label: labelOption,
          },
          {
            name: "娱乐",
            type: "bar",
            data: [195, 238, 310, 124, 141, 607],
            label: labelOption,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

当数据过多，显示不全的时候，在相应的轴上加上axisLabel属性

axisLabel: {
            interval:0,
            show: true,
            textStyle: {
              // color: "#a9a9a9", //更改坐标轴文字颜色
              fontSize: 10 //更改坐标轴文字大小
            },
            rotate: 40,
            
            showMinLabel: true,//显示最小值
            showMaxLabel: true,//显示最大值
          },