Echart之饼图,字体太长问题
来源:互联网 发布:ubuntu安装文件格式 编辑:程序博客网 时间:2024/04/29 22:32
饼图
上代码
1.图表容器
myPovertyVillageCount = echarts.init(document.getElementById('PovertyVillageCount'));2.配置
optionPovertyVillageCount = { color: ['#7cb5ec', '#f0ec7d', '#90ec7d', '#f7a35d', '#8085e9', '#ff3d3d', '#00a0e9', '#f603ff', '#00b419', '#5f52a0'],//饼图块的颜色 title: { text: '就失业状况', textStyle: { color: '#fff', fontSize: 16, x: 'left'//标题位置,默认left,值有center,right,如果要精确控制位置用top:数值,left:数值 }, backgroundColor: '#2f7abe', padding: 5//标题边距,默认5 },//标题的字体颜色背景位置控制 tooltip: { trigger: 'item',//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 formatter: "{b} : {c} ({d}%)"//显示名称,数值和百分比,可以回调函数,自己设置里面的格式 }, series: [ { name: '就失业状况', type: 'pie', radius: '60%', center: ['50%', '50%'], label: { normal: { formatter: '{b}: {d}%'//饼图显示名称和百分比 formatter:'{b}'只显示名称 } },//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等 data: povertyHouseholdCount, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }//图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。 } ] };3.指定的数据配置生成图表
myPovertyVillageCount.setOption(optionPovertyVillageCount)
4.图表
5,解决字太长问题,网上给的办法是
formatter:function(val){ //让series 中的文字进行换行
return val.name.split("-").join("\n");
}
return val.name.split("-").join("\n");
}
这样我试出来的就是百分比不显示出来,其实只要 formatter:'{b}'他的结果也只是只显示名称
这样回调函数可以写出自己想要的各种格式
阅读全文
0 0
- Echart之饼图,字体太长问题
- echart横坐标太长导致坐标显示不完全
- echart--axisLabel中值太长不自动换行
- 百度echart字体设置
- Echart问题
- echart 饼图选择事件
- echart 饼图数据显示
- 百度echart折线图中文名称重复问题
- ehcart 多图 饼图和柱状图 echart多图加载问题
- echart 图表问题
- echart饼图和折线图实例
- echart.js 点击饼图跳转
- echart 柱状图饼图调用后台数据
- Echart 饼图背景颜色设置
- Echart自定义悬浮tooltip 设置字体颜色
- Echart 关系图使用
- echart线形图相关
- Echart-折线图
- 基于卷积神经网络的信用卡欺诈侦测
- 使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误
- Alamofire 图片带参数 上传
- cocos2d-x v3.0新特性及使用
- sublime安装PHPcs(PHPcodesniffer)代码规范提示插件
- Echart之饼图,字体太长问题
- tcpdump 实用命令
- HDU 6060 RXD and dividing
- ubuntu平台vim的安装和配置
- 使用Redis存储Nginx+Tomcat负载均衡集群的Session
- Mac下怎么修改修改php.ini
- jquery检查某个元素在网页上是否存在?
- 多线程的同步问题代码实例
- 人活着系列之寻找最完美的人生(Prim)