Echarts图表的柱状图和漏洞图形怎么将数据值显示出来

  • 作者: 凯哥Java(公众号:凯哥Java)
  • JS
  • 时间:2021-03-04 17:47
  • 6903人已阅读
简介 Echarts图标是百度开源的,捐献个apache了。现在demo示例官网地址:https://echarts.apache.org/examples/zh/index.html当我们使用柱状图的时候,想要将数据显示在上面怎么办?显示方式:在series对象中有个label属性。添加如下: label: {    show: t

🔔🔔好消息!好消息!🔔🔔

 如果您需要注册ChatGPT,想要升级ChatGPT4。凯哥可以代注册ChatGPT账号代升级ChatGPT4

有需要的朋友👉:微信号 kaigejava2022

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属性上修改

TopTop