关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值

这是做项目的时候遇到需要用echarts展示数据:
官方柱状图:

option = {
     
    color: ['#3398DB'],
    tooltip: {
     
        trigger: 'axis',
        axisPointer: {
                 // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
     
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
     
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
     
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
     
            type: 'value'
        }
    ],
    series: [
        {
     
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_第1张图片
我们自定义tooltip:(核心是利用了tooltip下的formatter函数

tooltip: {
     
		// trigger: 'axis',
		formatter(params) {
     
			console.log(params) //我们可以打印该值
		},
		axisPointer: {
      // 坐标轴指示器,坐标轴触发有效
			type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
		}
	},

打印params发现是一个对象:找到data属性
关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_第2张图片
这个data属性对应的值就是设定的series里的data数据的数据值:

series: [{
     
		name: '直接访问',
		type: 'bar',
		barWidth: '60%',
		data: [10, 52, 200, 334, 390, 330, 220]
	}]

现在我们就可以通过改变这个data值:

data: [{
     
	title:'第一天',
		value: 10
	}, {
     
		title: '第二天',
		value: 52
	}, {
     
		title: '第三天',
		value: 220
   }]

再次打印params:
关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_第3张图片
现在就可以params参数做自定义hover数据展示效果了:

tooltip: {
     
		// trigger: 'axis',
		formatter(params) {
     
		    // 返回值就是html代码可以使用标签
			return `
			天数:${
       params.data.title} 
数值:
${ params.data.value} `
; }, axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } },

结果显示:
关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_第4张图片
好了,我们接下来操作柱状图上方显示自定义数值:
series下有一个属性itemStyle,里面设定自定义显示数字:(同样用到了formatter函数)

itemStyle: {
     
	normal: {
     
		label: {
     
			show: true, //开启显示
			formatter(params) {
     
				return params.data.value
			},
			position: 'top', //在上方显示
			textStyle: {
      //数值样式
				color: '#ff0000',
				fontSize: 12
			}
		}
	}
}

关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_第5张图片

当然也可以显示百分数:改下formatter函数formatter: '{c}%',
在这里插入图片描述
下面是做vue项目时用到的echarts:
用了一个三元表达式是为了防止各条数据数值差距过大,引起柱状图高低明显,这里我先是在tooltip里缩小数值过大的比值,然后在显示时恢复过来:

tooltip: {
     
         // trigger: 'item',
         formatter: function (params) {
     
			 // 自定义显示hover数据
             return `${
       params.data.title}${
       params.data.flag ? params.data.value * 100 : params.data.value}
漫画名:
${ params.data.cartonTitle}`
; }, axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, },
series: [{
     
    type: 'bar',
    barWidth: "50%",
    data: dataAry,
    itemStyle: {
     
        barBorderRadius: 5,
        normal: {
     
            label: {
     
                show: true,		//开启显示
                formatter(params) {
     
                	// 处理数值显示格式
                    return params.data.flag ? params.data.value * 100 : params.data.value
                },
                position: 'top',	//在上方显示
                textStyle: {
     	    //数值样式
                    color: '#ff0000',
                    fontSize: 12
                }
            }
        }
    }
}]

效果如图:真正数值显示出来,又不会因为二边数值差距过大而引起图标难看。
关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_第6张图片

你可能感兴趣的