自定义Echarts中legend、tooltip等样式

2024-01-07 20:28:41

自定义Echarts中legend、tooltip等样式

在使用Echarts图表中不可避免的要定义legend、tooltip中的样式,这里以legend为例介绍一下通用的方法

先介绍一下用到的属性

legend.formatter

用来格式化图例文本,支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板,模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}
legend. textStyle

图例的公用文本样式,在这可以设置legend的整体样式,有多种属性进行选择,可以在官方文档进行查看,这里不一一介绍了

重要介绍的是其子属性rich

legend.textStyle. rich

官方解释如下

在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

例如:

label: {
    // 在文本中,可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号:
    // `{styleName|text content text content}` 标记样式名。
    // 注意,换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

官方解释已经很明了,接下来直接看实例

实例

这里是一个扇形图

直接上代码

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    formatter: ['{ttt|这段文本采用样式a}',
              '{b|这段文本采用样式b}',
              '{这段用默认样式}',
              '{x|这段用样式x}'].join('\n'),
    textStyle:{
      padding: [60, 0, 0, 0],
       rich: {
        ttt: {
            color: 'red',
            lineHeight: 20,
            
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
      }
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
效果图

image-20240104203935142

参考文档

echarts官网

文章来源:https://blog.csdn.net/qq_49907632/article/details/135395742
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。