Echarts图表的柱状图和漏洞图形怎么将数据值显示出来
Echarts图表的柱状图和漏洞图形怎么将数据值显示出来
凯哥Java
发布于 2022-12-16 17:09:28
发布于 2022-12-16 17:09:28
Echarts图标是百度开源的，捐献个apache了。现在demo示例官网地址：https://echarts.apache.org/examples/zh/index.html
本文将要讲解柱状图和漏斗怎么显示数据。
一：柱状图
当我们使用柱状图的时候，想要将数据显示在上面怎么办？
6ac8b9b469e09aa9037df9e789668b39.png
显示方式：
在series对象中有个label属性。添加如下：
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16,
fontWeight: 600
}
}
2060d3401aba0800e454d4baec54f6ca.png
二：在漏斗图上显示数据
效果图：
4ddb4cb88d7c1054b6b4fa20f7d57b23.png
修改的重点：
在series对象中的label属性中添加：
formatter: "{b|{b}}"+"{b|:}"+"{a|{c}}",
rich: {
a: {
color: '#ffffff',
fontSize: 14
},
b: {
color: '#ffffff',
fontSize: 14
}完整的：
label: {
show: true,
position: 'inside',
formatter: "{b|{b}}"+"{b|:}"+"{a|{c}}",
rich: {
a: {
color: '#ffffff',
fontSize: 14
},
b: {
color: '#ffffff',
fontSize: 14
}
}从上面两个例子中，我们可以发现，都是在label属性上修改
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读