echarts中的legend属性_tmmi_echarts legend属性
left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’,‘center’, ‘right’。(如果 left 的值为’left’, ‘center’,‘right’,组件会根据相应的位置自动对齐.)5.图例标记的图形的宽度/高度(itemWidth/itemHeight)图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。图例组件离容器左(右,上,下)侧的距离。4. icon定义图标形状。7.legend字太多换行。...
legend: {
orient: "vertical",
right: "0%",
top: "15%",
icon: "circle", //小圆点
itemWidth: 8,
itemHeight: 8,
itemGap: 15, //间隔
formatter: function (params) {
let tip1 = "";
let tip = "";
let le = params.length; //图例文本的长度
if (le > 19) {
//几个字换行大于几就可以了
let l = Math.ceil(le / 19); //有些不能整除,会有余数,向上取整
for (let i = 1; i <= l; i++) {
//循环
if (i < l) {
//最后一段字符不能有\n
tip1 += params.slice(i * 19 - 19, i * 19) + "\n"; //字符串拼接
} else if (i === l) {
//最后一段字符不一定够9个
tip = tip1 + params.slice((l - 1) * 19, le); //最后的拼接在最后
}
}
return tip;
} else {
tip = params; //前面定义了tip为空,这里要重新赋值,不然会替换为空
return tip;
}
},
},
1.图例布局朝向(orient)
默认横向布局,纵向布局值为’vertical’
orient:'horizontal'
orient:'vertical'
2.图例组件的宽高(width,height)
3.left,right,top,bottom
图例组件离容器左(右,上,下)侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’,‘center’, ‘right’。
(如果 left 的值为’left’, ‘center’,‘right’,组件会根据相应的位置自动对齐.)
?4. icon定义图标形状
{icon: 'circle', name: '搜索引擎'},
{icon: 'rect', name: '直接访问'},
{icon: 'roundRect', name: '邮件营销'},
{icon: 'triangle', name: '联盟广告'},
{icon: 'diamond', name: '视频广告'},
{icon: 'pin', name: 'SEO'},
{icon: 'arrow', name: '定点投放'}
5.图例标记的图形的宽度/高度(itemWidth/itemHeight)
itemWidth: 8,
itemHeight: 8,
6.图例每项之间的间隔(itemGap)
?图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔
7.legend字太多换行
formatter: function (params) {
let tip1 = "";
let tip = "";
let le = params.length; //图例文本的长度
if (le > 19) {
//几个字换行大于几就可以了
let l = Math.ceil(le / 19); //有些不能整除,会有余数,向上取整
for (let i = 1; i <= l; i++) {
//循环
if (i < l) {
//最后一段字符不能有\n
tip1 += params.slice(i * 19 - 19, i * 19) + "\n"; //字符串拼接
} else if (i === l) {
//最后一段字符不一定够9个
tip = tip1 + params.slice((l - 1) * 19, le); //最后的拼接在最后
}
}
return tip;
} else {
tip = params; //前面定义了tip为空,这里要重新赋值,不然会替换为空
return tip;
}
},
改变前:
改变后:
?
相关文章
- 手把手教你如何使用Unity搭建简易图片服务器_YF云飞
- 【ArchSummit】阿里云原生微服务架构治理最佳实践_小明java问道之路
- spark对spark.driver.maxResultSize报错的解决方案_jane3von_spark.driver.maxresultsize
- Python采集全球疫情数据并做可视化分析_小圆-
- Rust之Sea-orm快速入门指南_爱学习的佳
- openstack中cinder与swift、glance的区别_RayPick_cinder swift
- Hive 和Impala之间的关系及常见问题_JessieZeng aaa_hive impala
- Python快速实现简易飞机大战小游戏_ASS-ASH
- Unity使用新输入系统InputSystem制作飞机大战Demo(实现生命系统等)_SYFStrive_unity 新输入系统
- ‘keytool‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件_lplj717_keytool不是内部或外部命令
- 启动kafka无反应_kafka服务无法启动的原因_Jade QZ
- 国内园区网络的主要协议/技术+WLAN组网架构_搞钱的阿泽
- python(模块)xlwt_? shammy_xlwt
- Python日常办公10大小技巧_一晌小贪欢
- 【Web安全】HTML5安全_RexHarrr
- 虚拟机介绍与使用(VMware Workstation)_yu.deqiang_虚拟机