7
回答
百度的Echarts bar图标怎么显示百分比?
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

如图,怎么让31.76显示37.76%,另外那两条线怎么去掉
举报
仁江
发帖于3年前 7回/29K+阅
共有7个答案 最后回答: 3年前
你好,请点击这个链接 http://echarts.baidu.com/doc/example/bar1.html然后在代码哪里输入这端代码你就会看明白的了。你看到%的地方就是你要实现的代码了
option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
          		}
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
          	itemStyle: {normal: {
			label : {show:true,position:'top',formatter:'{c} %'}
		}},
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};


再结合文档,这样看,希望对你有帮助,注意并不是真的用百分数,只是在设置了他显示的样式value后面加%号

引用来自“Kener-林峰”的评论

1、formatter

2、grid border width

见文档

谢谢@Kener-林峰 的专业回答,想不到你那么快就回复了。
对应代码如下

我怎么用了这段代码不能显示百分比呢?还有Y轴的百分比是如何表示的,麻烦分享下你的方法,谢谢!
--- 共有 1 条评论 ---
仁江你好,已经在下面的评论回复你了 3年前 回复
顶部