echarts 鼠标悬浮提示

最新推荐文章于 2025-06-16 19:09:28 发布

原创最新推荐文章于 2025-06-16 19:09:28 发布 · 9.5k 阅读

1 ·

CC 4.0 BY-SA版权

ehchart图表专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Echarts图表中配置鼠标悬停提示（tooltip），包括设置提示触发方式、样式、位置以及自定义格式化数据。同时展示了如何通过changeMoney函数将数值转换为万或亿单位，以实现更清晰的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cityOption = {
        title: [
            {x: '2%', y: '0%', textStyle: {color: "#efefef", fontSize: "16"}},
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                "type": "shadow" // 默认为直线，可选为："line" | "shadow"
            },
            formatter:function(params)//数据格式
            {
            var relVal = params[0].name+"<br/>";
            relVal += params[0]['marker']+params[0]['seriesName']+ ' : ' + changeMoney(String(params[0]['value']));
            return relVal;
            },
           	position: function (point, params, dom, rect, size) {
	        // 固定在顶部
	        return [point[0], '10%'];
      		}
        },
        calculable: true,
        grid: {
            left: '-5%',
            right: '2%',
            top: '15%',
            height: 260, //设置grid高度
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                max: 4,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisTick: {
          			alignWithLabel: true
        		},
        		/*
                axisLabel: {
                    "show": true,
                    //rotate:65,//倾斜度 -90 至 90 默认为0
                    rotate:45,//倾斜度 -90 至 90 默认为0
                    textStyle: {
                        color: "#fff"
                    },
                 */
                axisLabel: {
		          interval: 0,
		          textStyle:{
		            color:"#fff"
		          },
                    formatter: function(value) {
			            if ((typeof(value)!="undefined")&&(value.length > 3)) {
			              return value.substring(0,2) + "...";
			            } else {
			              return value;
			            }
			          }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    "show": false
                }
            }
        ],
        series: [
            {
                name: 'GMV',
                type: 'bar',
                data: [],
                index:['a', 'b'] ,
		        barWidth : 30,//柱图宽度
		        barMaxWidth:30,//最大宽度
		        barGap: 10,
		        barCategoryGap: 10,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#ff6600', '#ca702d', '#418ba1', '#129bd3', '#a0b6a4',
                            ];
                            return colorList[params.dataIndex];
                        },
                        borderWidth: 0,
            			barBorderRadius: [10, 10, 10, 10],
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function(value) 
							{ 
							return changeMoney(value.data); 
							} 
                        }
                    }
                }
            }
        ]
    };
  function changeMoney (x) {//转换为万,亿
    x=x/10000;
    var y = '';
    if(parseInt(x)/10000<=1){
    	y=ForDight(x,2)+"万";
    }else if(parseInt(x)/10000>1){
    	x=x/10000+'';
    	y=ForDight(x,2)+"亿";
    }
    return y;
}
function ForDight(str,How){  
    Dight = Math.round(str*Math.pow(10,How))/Math.pow(10,How);  
    return Dight;  
 }