Echarts折线图在X轴全部显示信息

不多说,上代码!

封装代码

主要代码:

			  axisLabel: {
              show: true,
              rotate: 0, //角倾斜显示
              formatter: function (val) {
                return val.split("").join("\n");
              }, //横轴信息文字竖直显示
            },

<template>
  <div id="machine" />
</template>
<script>
import echarts from "echarts";

export default {
  props: ["id"],
  data() {
    return {
      charts: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart("machine");
    });
  },
  methods: {
    initChart(id) {
      this.charts = echarts.init(document.getElementById(id), "blue");
      this.charts.setOption({
        color: ["#13F4CD", "#349bf1", "#fd8e22", "#f74e36"],
        tooltip: {
          trigger: "axis",
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,

            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月份",
              "九月份",
              "十月份",
              "十一月份",
              "十二月份",
            ],

            axisLabel: {
              show: true,
              rotate: 0, //角倾斜显示
              formatter: function (val) {
                return val.split("").join("\n");
              }, //横轴信息文字竖直显示
              textStyle: {
                color: ["rgb(142, 199, 220)"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
            },
            splitLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: ["rgb(142, 199, 220)"],
              },
            },
          },
        ],
        series: [
          {
            name: "测试数据1",
            type: "line",
            smooth: true,
            stack: "总量",
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
              lineStyle: {
                shadowColor: "#5cfbff", //透明的颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1, //透明度
                shadowBlur: 8, //阴影大小
                type: "solid", //实线
                width: 2,
              },
            },
            data: [400, 500, 800, 600, 550, 400, 600, 400, 800, 500, 200, 800],
          },
          {
            name: "测试数据2",
            type: "line",
            smooth: true,
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
            },
            lineStyle: {
              shadowColor: "#5cfbff", //透明的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1, //透明度
              shadowBlur: 8, //阴影大小
              type: "solid", //实线
              width: 2,
            },
            data: [400, 800, 500, 600, 550, 800, 300, 400, 600, 700, 400, 800],
          },
        ],
      });
    },
  },
};
</script>

最后效果: