echarts-坐标轴1

m0_74019046

于 2024-05-20 19:14:28 发布

阅读量310

点赞数 4

分类专栏： echarts 文章标签： echarts java javascript

本文链接：https://blog.csdn.net/m0_74019046/article/details/139053194

版权

echarts 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在这里插入图片描述

坐标轴的类型

value 值类型，表示为连续的数字

let options = {
    xAxis: {
      data: [1, 2, 3, 4, 5, 6], //data可以不传
      type: "value", // type为value时，传入的data失效， x轴为value，刻度为series的data了
      name: "x轴",
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };

在这里插入图片描述
限制刻度的范围

    xAxis: {
      data: [1, 2, 3, 4, 5, 6], //data可以不传
      type: "value", // type为value时，传入的data失效， x轴为value，刻度为series的data了
      name: "x轴",
      min: 0,
      max: 100,
    },

在这里插入图片描述
category 按传入的字符展示，

    xAxis: {
      data: [1, 2, 3],
      type: "category", //类目 ，根据data生成x轴，传几个显示几个，不够时，值显示传入的个数
      name: "x轴",
    },

在这里插入图片描述

time 时间轴，以时间作为标准。

const data = [
    ["2022-01-01", 11],
    ["2023-01-01", 22],
    ["2024-05-01", 33],
  ];
  let options = {
    xAxis: {
      type: "time",
      name: "x轴",
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data,
      },
    ],
  };

在这里插入图片描述

一般x轴是时间轴或者是类目轴。

//时间轴会根据数量自动决定分为几段，以及上面显示的文字，而类目轴不会。
//类目轴的x轴和y轴都需要data,x轴需要time,y轴需要value.
//时间轴要把obj转换为一个数组，["2022-02-02","11"],在放到data中
const obj={
  value:"11",
  time:"2022-02-02"
}

log 对数轴用于处理对数数据，使用较少。

刻度线

axisLine, axisTick, minorTick

 let options = {
    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisTick: {
        //坐标轴刻度相关设置
        show: true,
        length: 30, //坐标轴刻度的长度
        inside: true, //坐标轴刻度是否朝内，默认朝外。
        alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
        lineStyle: { //调节线条的样式
          color: "red",
        },
      },
      minorTick: { 
        //次刻度线
        show: true,
        splitNumber:5, //次刻度线分割数，默认会分割成 5 段
      },
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data,
      },
    ],
  };

线条调节样式：
在这里插入图片描述

label 坐标轴文本的调节

可以通过padding来调整刻度的位置

xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisTick: {
        //坐标轴刻度相关设置
        show: true,
        length: 30, //坐标轴刻度的长度
        inside: true, //坐标轴刻度是否朝内，默认朝外。
        alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
        lineStyle: {
          color: "red",
        },
      },
      minorTick: {
        //次刻度线
        show: true,
        splitNumber: 5, //次刻度线分割数，默认会分割成 5 段
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",
        padding: [10, 5, 10, 10],
      },
    },

在这里插入图片描述

宽度和aligin也可以水平调节，但是不是很准确。

    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisTick: {
        //坐标轴刻度相关设置
        show: true,
        length: 30, //坐标轴刻度的长度
        inside: true, //坐标轴刻度是否朝内，默认朝外。
        alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
        lineStyle: {
          color: "red",
        },
      },
      minorTick: {
        //次刻度线
        show: true,
        splitNumber: 5, //次刻度线分割数，默认会分割成 5 段
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",
        width: 30,
        align: "center", //文字水平对齐方式
      },
    },
    yAxi

height和 verticalAlign调整垂直位置，也不是十分准确

   xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisTick: {
        //坐标轴刻度相关设置
        show: true,
        length: 30, //坐标轴刻度的长度
        inside: true, //坐标轴刻度是否朝内，默认朝外。
        alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
        lineStyle: {
          color: "red",
        },
      },
      minorTick: {
        //次刻度线
        show: true,
        splitNumber: 5, //次刻度线分割数，默认会分割成 5 段
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",

        height: 30,
        verticalAlign: "bottom",
      },
    },

在这里插入图片描述

name 位置的调节

padding, verticalAlign

    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },

      nameTextStyle: {
       // align: "center",
        padding: [10, 10, 10, 10],
      },
    },

在这里插入图片描述

nameGap也可以调整name的位置

 xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },

      nameGap: 30,
    },

在这里插入图片描述

formatter调节label的文本内容

formatter 字符串形式

 xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",

        formatter: "{yyyy}-{MM}-{dd} 日",
      },
    },
    // axisLabel 用来调节整个坐标系的坐标轴label样式，如果为类目轴，data里还有textStyle，专门调节某一个x轴的样式

在这里插入图片描述
formatter 函数形式

    xAxis: {
      type: "time",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",

        formatter: (value) => {
          let date = new Date(value);
          console.log(date);
          return date.toDateString();
        },
      },
    },

在这里插入图片描述

调节单个类目轴的颜色

    xAxis: {
      type: "category",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",
      },
      data: [
        1,
        2,
        {
          value: 3,
          textStyle: {
            color: "red",
          },
        },
        4,
        5,
      ],
    },

在这里插入图片描述

当标签过多时，轴会隐藏一些标签。

 xAxis: {
      type: "category",
      name: "x轴",
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLine: {
        //坐标轴轴线相关设置。
        show: true,
        symbol: ["none", "arrow"], //轴线两边的箭头
        symbolOffset: [0, 12], //轴线两边的箭头的偏移
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        show: true,
        color: "yellow",
        backgroundColor: "blue",
      },
      data: [
        11, 22, 322, 422, 522, 622, 722, 
        822, 229, 1220, 1, 22, 322, 422, 
        522, 622, 722, 822, 229, 1220,
      ],
    },