echarts 定制legend内容，显示和位置

1.type(当图例很多的时候可以用到)
2.orient(图例的排版方向)
3.top,bottom,left,right(图例在容器中的位置)
4.width,height（图例组件的大小）;itemWidth,itemHeight(图例图标的大小)
5. align（图例标记和文本的对齐）
5. padding（图例内边距），itemGap（图例每项之间的间隔）
6.icon(图例项的 icon)
7.textStyle（图例的文本样式）
- 7.1 rich（自定义富文本样式）
8.formatter（用来格式化图例文本）

1.type(当图例很多的时候可以用到)

type，图例的类型，可选值为’plain’：普通图例。缺省(默认)就是普通图例。
‘scroll’：可滚动翻页的图例。当图例数量较多时可以使用。
scroll的效果是这样的：

2.orient(图例的排版方向)

orient可选值为’horizontal’（水平默认），‘vertical’（垂直）

3.top,bottom,left,right(图例在容器中的位置)

top,bottom,left,right的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。

如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。

4.width,height（图例组件的大小）;itemWidth,itemHeight(图例图标的大小)

wdith和height都可以为String或则Number，默认为自适应
itemWidth和itemHeight为Number，只针对图标

5. align（图例标记和文本的对齐）

默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 ‘right’ 以及纵向布局（orient 为 ‘vertical’）的时候为右对齐，即为 ‘right’。

可选：‘auto’，‘left’，‘right’

5. padding（图例内边距），itemGap（图例每项之间的间隔）

padding，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

使用示例：

// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5，左右的内边距为 10 padding: [5, 10] //
分别设置四个方向的内边距 padding: [
5, // 上
10, // 右
5, // 下
10, // 左 ]

itemGap,横向布局时为水平间隔，纵向布局时为纵向间隔。

6.icon(图例项的 icon)

图例图标的显示样式，

ECharts 提供的标记类型包括
‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。

7.textStyle（图例的文本样式）

当你不满足于系统的文本样式就可以用这个啦，字体大小颜色样式都有对应的属性。挑个个重点的讲下

7.1 rich（自定义富文本样式）

这个有什么用处呢？假如你的文本样式不止一种呢，是这样的

那就很有用了，先在rich中定义
eg：

  rich: {a: {width: 200,padding: [0, 40, 0, 0],align: "left",},}//然后在下面讲到的formatter中使用就可以了

// {styleName|text content text content} 标记样式名。进行运用

8.formatter（用来格式化图例文本）

个人感觉这个多用在项目开发中，后台返回的数据不是最终的结果的话就需要自己做点处理。建议直接写成回调函数

// 使用回调函数 formatter: function (name) {
//逻辑代码
// return ["{a|" +name +"}"]; //使用了rich定义的样式
return 'Legend ’ + name; //最后返回的就是每一项图例的文字描述}

一般开发这个就够了，看机会再更新吧

echarts 定制legend内容，显示和位置相关推荐

echarts legend不显示_ECharts地图系列一（定制区域水波纹显示，以及其他区域圆点颜色不统一）...
Echarts水波纹地点显示,以及颜色点随机系列篇在现今的前端开发中,图表的展示是不可或缺的,也会接触到一些地图区域的展示,例如,现实场景下,需求需要现实当今公司在全国乃至世界的分部分布情况,这时就 ...
R语言text函数在R原生可视化结果中添加文本标签、内容：指定文本显示的位置、颜色、字体大小等（Position、Change Color 、 Size of Text）
R语言text函数在R原生可视化结果中添加文本标签.内容:指定文本显示的位置.颜色.字体大小等(Position.Change Color . Size of Text) 目录
echarts 实现横坐标只显示第一个和最后一个自定义的内容
echarts 实现横坐标只显示第一个和最后一个自定义的内容要实现横坐标的修改则可以找到 xAxis->axisLabel xAxis:[{axisLabel:{show:true,forma ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
echarty轴自定义显示不全,ECharts图表X轴或者Y轴单位内容显示不全
现在出现的问题是X轴单位内容显示不全主要代码如下:xAxis中的name为"时长(min)",但上图只显示了"时" grid: { left: '3%', r ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
【好用的.vimrc】支持vim语法高亮，保留上一次编辑内容，记住位置等配置
2019独角兽企业重金招聘Python工程师标准>>> 以下内容,保存到 ~/.vimrc 文件即可,以作备份. "ctags set tags=tags;/set wra ...

echarts 定制legend内容，显示和位置

echarts 定制legend内容，显示和位置

1.type(当图例很多的时候可以用到)

2.orient(图例的排版方向)

3.top,bottom,left,right(图例在容器中的位置)

4.width,height（图例组件的大小）;itemWidth,itemHeight(图例图标的大小)

5. align（图例标记和文本的对齐）

5. padding（图例内边距），itemGap（图例每项之间的间隔）

6.icon(图例项的 icon)

7.textStyle（图例的文本样式）

7.1 rich（自定义富文本样式）

8.formatter（用来格式化图例文本）

echarts 定制legend内容，显示和位置相关推荐

最新文章

热门文章