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

基本使用

在文本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",
          },
        ],
      },
    ],
  };

在这里插入图片描述

  • 8
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值