echarts-富文本，data的对象形式

m0_74019046

于 2024-05-22 11:01:04 发布

阅读量258

点赞数 8

分类专栏： echarts 文章标签： echarts 前端 javascript

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

版权

echarts 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

基本使用

在文本textStyle和axisLabel的rich中可以使用富文本，写入富文本的类名。
富文本类名可以在formatter中使用。 formatter:"{类名|{value}}"

在axisLabel的rich中使用

  const d1 = [[0, 11], [1, 4], [2, 1], [3, 3], 4, 5, 7];
  let options = {
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
      axisLabel: {
        rich: {
          labelClass: {
            color: "red",
            fontSize: 25,
          },
        },
        formatter: (value) => {
          return `{labelClass|${value}}`;
        },
      },
    },
    yAxis: {},
    series: [
      {
        name: "d1",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

在textStyle的rich中使用

 const d1 = [[0, 11], [1, 4], [2, 1], [3, 3], 4, 5, 7];
  let options = {
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    legend: {
      show: true,
      textStyle: {
        rich: {  // rich支持多个class:{类名|xxx}
          textClass: {
            color: "blue",
          },
          bgClass: {
            width: 10,
            height: 10,
            backgroundColor: "yellow",
          },
          imgClass: {
            width: 20,
            height: 20,
            backgroundColor: {
              image: "http://localhost:5173/favicon.ico",
            },
          },
        },
      },
      formatter: (value) => {
        console.log(value);
        return `{bgClass|}{textClass|${value}}{imgClass|}`;
      },
    },
    yAxis: {},
    series: [
      {
        name: "d1",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

如果要换行的话可以使用\n

let options = {
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
      axisLabel: {
        rich: {
          labelClass: {
            color: "red",
            fontSize: 25,
          },
        },
        formatter: (value) => {
          return `{labelClass|${value}}\nxxxxxxxx`;
        },
      },
    },
    yAxis: {},
    series: [
      {
        name: "d1",
        type: "line",
        data: d1,
      },
    ],
  };

在这里插入图片描述

data的对象形式

data数组里面可以写一个数组，数字，也可以写一个对象。写成对象后只能按默认的顺序和类目中的数据对应，但是可以单独修改某一个数据的样式。

 let options = {
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3"],
    },
    yAxis: {},
    series: [
      {
        name: "d1",
        type: "line",
        data: [
          {
            value: 11,
            name: "b",
            symbolSize: 10,
            itemStyle: {
              color: "blue",
            },
          },
          {
            value: 12,
            name: "a",
          },
          {
            value: 13,
            name: "c",
          },
        ],
      },
    ],
  };