ECharts鼠标移动到图标上面如何给数据加单位

本文介绍了如何在ECharts中为图表数据添加单位,特别是在鼠标悬停时显示数据。通过自定义`tooltip`的`formatter`函数,可以实现数据显示加单位的效果,同时展示了具体的代码示例。

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

可以在ECharts中的------》”tooltip“定义鼠标hover时的样式及添加单位;

例子:    

var option = {
        color:['#F28200','#4ECC73','#976CE5','#3DB4FF','#4ECCC2','#D5D8C6'], 
        title: {
            // text: '未来一周气温变化',
            // subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#0D1B42',  //鼠标移动到图上面时,显示的背景颜色
            padding:15,     //定义内边距
            formatter: function(params) { //自定义函数修改折线图给数据加单位
               console.log(params)
                var str = '';//声明一个变量用来存储数据
                str += '<div>'+ params[0].name +'</div>';   //显示日期的函数
                for(var i=0; i<params.length; i++) {  //图显示的数据较多时需要循环数据,这样才可以成功的给多条数据添加单位
                    str += '<div style="color:'+params[i].color+'"><span>'+ params[i].seriesName +'</span> : <span>'+ (params[i].data ? params[i].data+'%' : '暂无') +'</span></div>';
                }
                return str;
            }

        },
        legend: {
            // show: true,
            data:outName,
            //right: 220,
            //width: 220,
            x : 'right',
            padding: [20,100,0,0],
            itemHeight: 13, 
            icon:'circle',
            textStyle:{    //图例文字的样式
                color:'#fff',
                fontSize:12,
            }
        },
        xAxis: axisArrTime,
        yAxis: {
            name : '单位 %',
            color:['#fff'],
            splitLine:{show: false},//去除网格线
            type: 'value',
            axisLabel: {
                formatter: '%'
            },
            // data: ['0', '20', '40', '60', '80', '100'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine:{
                lineStyle:{
                    color:'#717375',
                    width:2,//这里是为了突出显示加上的,可以去掉
                }
            } 
        },
        series: data
    }

### ECharts 鼠标悬停时指针样式的设置 为了使 ECharts 图表在鼠标悬停时显示特定的指针样式,可以通过 CSS 来调整图表容器内的元素属性。具体来说,在 HTML 文件中的 `<style>` 标签下定义针对图表 ID 的样式规则: ```css <style> #chart1>div>canvas:hover { cursor: pointer; } </style> ``` 上述代码片段将图表 `chart1` 中 canvas 元素的默认光标更改为手型图标(pointer),从而指示用户该区域可交互[^1]。 如果希望进一步定制化鼠标悬停效果而不只是改变光标形状,则可以在初始化 ECharts 实例之前通过配置项来增强用户体验。例如开启图形上的强调状态动画并处理相应的事件监听器以响应用户的动作[^3]: ```javascript var chart = echarts.init(document.getElementById('main')); option = { series: [{ type: 'line', data: [120, 200, 150, 80], emphasis: { // 强调状态下组件的样式 scale: true, focus: 'self' } }] }; // 使用刚指定的配置项和数据显示图表。 chart.setOption(option); // 添鼠标移入事件处理器用于自定义行为 chart.on('mouseover', function (params) { console.log(params); }); ``` 此段 JavaScript 代码展示了如何启用系列数据项被聚焦时放大展示的效果,并注册了一个简单的回调函数来捕获每次触发 mouseover 事件的信息。对于更复杂的场景如让仪表盘指针跟随鼠标位置变化等问题也鼓励开发者探索实现方式[^4]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值