116  
查询码:00001119
echarts柱状图如何显示百分比
作者: 陈一奇 于 2020年02月28日 发布在分类 / 人防组 / 人防前端 下,并于 2020年02月28日 编辑
echarts

      从官网找的图例,直接从运行代码里加上百分号是会报错的

解决办法:修改format带百分比


 {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
                    formatter: '{c}%'
                }
            },
            data: [1, 20, 3, 30, 40]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
                    formatter: '{c}%'
                }
            },
            data:  [99, 80, 97, 70, 60]

}
这里,在position下增加了
formatter: '{c}%'


效果:

可以看到可以显示百分号了,但是小窗体里还是数字

解决方案:修改tooltip下面的format

 tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        },
		formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'

效果:

format中的a,b,c是什么意思


模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。

 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 

不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。




 推荐知识

 历史版本

修改日期 修改人 备注
2020-02-28 17:51:50[当前版本] 陈一奇 创建版本

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp