ECharts提示框数字保留两位小数

最新推荐文章于 2025-02-12 15:03:15 发布

leo_qiu_s

最新推荐文章于 2025-02-12 15:03:15 发布

阅读量1.9w

点赞数 5

本文链接：https://blog.youkuaiyun.com/qiudechao1/article/details/96973698

版权

本文介绍如何使用ECharts配置tooltip，使鼠标悬停在柱状图上时显示的数据保留两位小数，并提供完整示例代码。

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

要求实现效果：鼠标移动到柱状图上，显示数字保留两位小数，

设置提示框属性tooltip

tooltip: {
               formatter:function(datas) {
                   return datas.toFixed(2);
                   //或者是下面这种，效果是一样的
                   //return datas.value.toFixed(2);
                 }
           },

详细代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
	
    <script type="text/javascript">
	
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
			
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "ECharts 入门示例"
            },
			//提示框取默认值，即鼠标移动到柱状图会显示内容
            tooltip: {
                formatter:function(datas) {
                    return datas.toFixed(2);
                    //或者是下面这种，效果是一样的
                    //return datas.value.toFixed(2);
                }
            },

			//图例
            legend: {
                data:['销量']
            },
			//X轴内容
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
			//Y轴坐标最大值和最小值
            yAxis: {
				min: 0,
				max: 50
			},
			//显示数据
            series: [{
                name: '销量',
                type: 'bar',
                data: [10,20,30,40,50]
            }]
			
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
    </script>
	
</body>
</html>

参考博主原文：https://blog.youkuaiyun.com/qq_28065983/article/details/81060200

摘取有用代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
	
    <script type="text/javascript">
	
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
			
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "ECharts 入门示例"
            },
			//提示框取默认值，即鼠标移动到柱状图会显示内容
            tooltip: {
                formatter:function(datas) {
                    let res = datas[0].name + '<br/>'
                    let val
                    let length = datas.length
                    let i = 0
                    for (; i < length; i++){
                    val = datas[i].value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
                    res += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + datas[i].color + ';"></span>' + datas[i].seriesName + '：' + val + '<br/>'
                    }
                    return res
                }
            },

			//图例
            legend: {
                data:['销量']
            },
			//X轴内容
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
			//Y轴坐标最大值和最小值
            yAxis: {
				min: 0,
				max: 50
			},
			//显示数据
            series: [{
                name: '销量',
                type: 'bar',
                data: [10,20,30,40,50]
            }]
			
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
    </script>
	
</body>
</html>