关于可视化Echarts柱状图自定义tooltip数值显示以及图表上方显示自定义数值_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]
        }
    ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

我们自定义tooltip：（核心是利用了tooltip下的formatter函数）

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

打印params发现是一个对象：找到data属性

这个data属性对应的值就是设定的series里的data数据的数据值：

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

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

data: [{
	title:'第一天',
		value: 10
	}, {
		title: '第二天',
		value: 52
	}, {
		title: '第三天',
		value: 220
   }]
1
2
3
4
5
6
7
8
9
10

再次打印params：

现在就可以params参数做自定义hover数据展示效果了：

tooltip: {
		// trigger: 'axis',
		formatter(params) {
		    // 返回值就是html代码可以使用标签
			return `
			天数：${params.data.title} </br> 
			数值：${params.data.value}
			`;
		},
		axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
		}
	},
1
2
3
4
5
6
7
8
9
10
11
12
13

结果显示：

好了，我们接下来操作柱状图上方显示自定义数值：
series下有一个属性itemStyle，里面设定自定义显示数字：（同样用到了formatter函数）

itemStyle: {
	normal: {
		label: {
			show: true, //开启显示
			formatter(params) {
				return params.data.value
			},
			position: 'top', //在上方显示
			textStyle: { //数值样式
				color: '#ff0000',
				fontSize: 12
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

当然也可以显示百分数：改下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}</br>
             漫画名：${params.data.cartonTitle}`;
         },
         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
         },
     },
1
2
3
4
5
6
7
8
9
10
11

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
                }
            }
        }
    }
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果如图：真正数值显示出来，又不会因为二边数值差距过大而引起图标难看。