echars柱状图tooltip按百分比展示

问题:后端给的数据是小数,柱状图想按照百分数展示,颜色展示的图标也需要带上

效果如下:

解决方法:需要修改tooltip和横轴或者纵轴文字

1、tooltip修改(有多种方式可根据需要选择)

// 颜色是单颜色,打印输出的item.marker 存在内容可直接使用,可以使用这种方式(显示内容自行调整)
 tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
             formatter: function (params) {
                let str=params[0].name
                params.forEach((item,index)=>{
                    str=str+'<br/>'+ item.marker + item.seriesName + ' : ' + (item.value*100).toFixed(2)+'%'
                })
                return str
            }
    },
//当颜色为渐变色,marker为空,需要自己模拟,使用这种方式(显示内容自行调整)
 tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
             formatter: function (params) {
                let str=params[0].name
                params.forEach((item,index)=>{
                    str=str+'<br/>'+ '<div style="height: 10px;width: 10px;display:inline-block;margin-right:5px;border-radius: 50%;background:'+params[index].color+'"></div>' + item.seriesName + ' : ' + (item.value*100).toFixed(2)+'%'
                })
                return str
            }
    },

2、修改横轴或者纵轴的axisLabel显示

//xAxis一样
        yAxis: [
        {
            type: 'value',
            axisLabel: {
                color: '#000',
                fontSize: 10,
                formatter: function (i) {
                    return i*100  + "%";
                },
            },
        }
    ],
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容