echarts自定义legend样式

echarts自定义图例（legend）样式

roundRect(圆角正方形),triangle(三角形),diamond(菱形),pin(大头针行),arrow(箭头形),none(无图例项的icon)图例项的icon,类型包括 circle(圆形),rect(正方形),**然后就是这个下划线backgroundColor 一定用这个。

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

echarts自定义legend图例

最近要完成显示一个饼图，使用echarts组件，先用官方给定的模板加载出样式，然后修改为自定义的样式。，在 rich 里面，可以自定义富文本样式，使三列文字的中间那一列展示为灰色，两边文字为黑色。然后在textStyle里设置各自的样式，设置后的代码如下，注意备注【添加】的地方是主要更改。接着就是右边一段文字到三段文字的显示，不止要展示出name，还要展示出百分比和数量。首先把文字分为3段，a表示name，b表示百分比， c表示value数量。首先可以看到，图标默认是长方形，而需求是小圆点。

上图表，展示的字体颜色是不同的，而且和名称之间是有间距使用rich实现在formatter自定义样式名称，在textStyle中定义样式内容。当然我们在自定义title样式时也可以使用同样的方法。

当然不仅仅只是这些，handle.icon （滚动条）、toolbox.icon （工具图标） 等都支持，大家使用到时，就可以用上面的方式使用矢量路径了。简单来讲就是，使用 矢量路径， 显示效果与默认的几个图标一样，只是图标形状变成了自定义。这种方式，能自定义任意UI设计的图标，但是不支持动态置灰，无法跟随默认图表数据颜色。也能应用置 图标上，这是 使用 图片链接或者base64 达不到的效果。我们最常见到的 svg 图片 里面的形状就是使用 矢量路径绘制。折线 symbol 也支持，点击查看Demo。

Echarts中单独为每个图例设置样式-根据数据正负显示不同样式。

单独定义echarts中每个图例的样式,自定义图例的点击方法 //用不同样式的图例用数组写对应图例的样式 legend:[{ top: "15%", right: "24%", textStyle: { ...

思路：在配置legend里面设置一个selected，名字和series里面的name对应，通过true和false控制显示或不显示。配置本身的legend设置不显示。通过自己写的checkbox，可自定义样式，来控制legend。

话不多说，先上效果图。 要完成这个图并不难，主要是下面那个图例比较难，需要定制。 让我们从官方文档找找思路，官方文档关于legend.formatter是这样的：链接在这 难点在于： 1.这里的图例文本包含两个变量，而formatter提供的变量模板只有name 2.两个变量的样式各不相同 3.对齐，换行与居中的应用 formatter有两种：一是模板...

1. 因为指标数过多，一行展示一个指标会造成高度很高，呈现效果不佳，优化成一行展现两个指标，从而减少高度// 初始化一个空字符串来存储 tooltip 的内容// 对数据进行排序??0));// 创建一个数组来存储每行的内容// 遍历 params 数组// 拼接 series 名称、类目值和数值${// 初始化一个空字符串来存储 tooltip 的内容 var tooltipContent = '';

作者 内容 时间 JJ Echarts 2022年04月20日 实现效果图如下 html代码 <!-- echarts-pie --> <div class="fd-pie-chart" id="fd-pie-chart"></div> <!-- echarts-legend --> <div class="fd-pie-legend"> <div ...

Echartas中关于自定义legend（图例+文字）样式 formatter有两种形式： 1、模板 2、回调函数 模板： 使用字符串模板，模板变量为图例名称 {name} formatter: ‘Legend {name}’ 回调函数： formatter: function (name) { return 'Legend ’ + name; } 想自定义图例文字样式，需要用到富文本：rich。 效果图： html: <template> <div> <div

echarts官网配置项手册里有非常详细的内容，我们挑几种常用的看看，加深对legend属性的理解。echarts图表中的图例，有形状，颜色，位置等等各种样式的不同配置。以上几张图表中，红色圆圈部分即图例。