echart 饼图图例legend支持滑动
ps: 以下针对option操作
文章目录
图例过多加上滚动条
图例形状
图例自定义显示
图例过多加上滚动条
legend:{
top:'50',
bottom:'50',
type:'scroll',
}
避免可能出现的翻页下标错乱,加上间距top / bottom属性
图例形状
legend:{
data:legeData
}
legeData=[{name:'xx',value:100,icon:'circle'}];
其他扩展
http://echarts.baidu.com/option.html#legend.data.icon
图例自定义显示
legend:{
formatter:function(name){
var total = 0;
var target;
for (var i = 0, l = arr.length; i < l; i++) {
total += arr[i].value;
if (arr[i].name == name) {
target = arr[i].value;
}
}
return name + ' | ' +((target/total)*100).toFixed(2) + '%'+" "+target+" 条";
},
}
arr 为name,value 数组
formatter 为图例函数扩展
---------------------
作者:lzty_天涯
来源:CSDN
原文:https://blog.csdn.net/qq_33129625/article/details/81328002
版权声明:本文为博主原创文章,转载请附上博文链接!
echart 饼图图例legend支持滑动的更多相关文章
- Echart的使用legend遇到的问题小记
Echart的图标真的很漂亮,使用也相对简单.但是官网的配置项的例子我不是很能快速的使用,得思考一会.哈哈,可能我比较笨吧. 在作柱状图的时候,我是通过Ajax动态获取的数据,但是图例legend就是 ...
- highcharts图表的图例legend怎么改变显示位置
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- 单击Echart饼图实现数据钻取
使用场景和需求: 第一层饼图显示党员党龄分布的情况. 点击某个党龄段,查看拥有该党龄段的党支部. 默认显示3个党支部,余下的党支部合并为其它,点击其它,查看余下的党支部. 点击某个党支部,返回第一层饼 ...
- JavaScript在智能手机上的应用-测试是否支持滑动事件
---------------------------- <script type="text/javascript"> ...
- highcharts图表的图例legend
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- 让boostrap的图片轮播支持滑动效果
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...
- python 2: 解决python中的plot函数的图例legend不能显示中文问题
问题: 图像标题.横纵坐标轴的标签都能显示中文名字,但是图例就是不能显示中文,怎么解决呢? 解决: plt.figure() plt.title(u'训练性能', fontproperties=f ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 下实现底部标签(不支持滑动切换)
底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...
随机推荐
- 请手写代码实现一个promise
第一步:promise的声明 class Promise{ // 构造器 constructor(executor){ // 成功 let resolve = () => { }; // 失败 ...
- jQuery中$()的四种种使用方式
1.$()中接收一个回调函数,作为dom.ready事件(在dom树加载完成后执行的函数)如: $(function(){ /** 执行代码*/ }) 2.$()中接收字符串选择器,返回该选择器对应的 ...
- 前端框架:Angular React 和 Vue的比较
前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React, ...
- Halide安装指南release版本
Halide安装指南 本版本针对Halide release版本 by jourluohua 使用的是Ubuntu 16.04 64位系统默认Gcc 4.6 由于halide中需要C++ 11中的特性 ...
- 小伙伴们来看啊!开源智能机 Librem 5 规格发布。
下图是 Librem 5 的高配版规格: (看到这配置,忍不住吐槽一句:放到三年前都看不上……) Librem 5 的更详细规格如下: CPU: i.MX8M @ max. 1.5GHz 四核 Cor ...
- SpringCloud使用feign时的复杂参数传递(转)
Feign传参注意 最近在用SpringCloud尝试重构以前的项目,使用Feign客户端组件来调用微服务,经常出现参数传不过去变成null的问题,网上查了一下发现feign在参数上的使用还是有一定的 ...
- jmeter-响应有中文时,显示乱码
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
- C# 数据测试
查询 100w条数据 39列 把100w条数据转换为匿名对象 加入到集合 所用的时间是 32 s 39列 600万条数据
- 什么是ASCII码?
㈠定义 ASCII ((American Standard Code for Information Interchange): 美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现 ...
- CSS样式,语法,添加方法,文本,字体
总结一些css的基础知识 ㈠css样式 css:cascading style sheets 层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...