首页 前端知识 echarts统计图x轴文字过长,以省略号显示,鼠标经过提示全部内容

echarts统计图x轴文字过长,以省略号显示,鼠标经过提示全部内容

2024-06-02 09:06:43 前端知识 前端哥 539 451 我要收藏

效果图如下
在这里插入图片描述

主要代码如下:

//1.js代码内加入extension方法,chart参数是echarts实例
function extension(chart) {

            // 注意这里,是以X轴显示内容过长为例,如果是y轴的话,需要把params.componentType == 'xAxis'改为yAxis
            // 判断是否创建过div框,如果创建过就不再创建了
            // 该div用来盛放文本显示内容的,方便对其悬浮位置进行处理
            var elementDiv = document.getElementById('extension')
            if (!elementDiv) {
                var div = document.createElement('div')
                div.setAttribute('id', 'extension')
                div.style.display = 'block'
                document.querySelector('html').appendChild(div)
            }

            chart.on('mouseover', function (params) {
                if (params.componentType == 'xAxis') {
                    var elementDiv = document.querySelector('#extension')
                    //设置悬浮文本的位置以及样式
                    var elementStyle =
                        'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
                    elementDiv.style.cssText = elementStyle
                    elementDiv.innerHTML = params.value
                    //#main为echarts图的容器id
                    document.querySelector('#main').onmousemove = function (event) {
                        var elementDiv = document.querySelector('#extension')
                        var xx = event.pageX - 10
                        var yy = event.pageY + 25
                        console.log('22', xx)
                        elementDiv.style.top = yy + 'px'
                        elementDiv.style.left = xx + 'px'
                    }
                }
            })
            chart.on('mouseout', function (params) {
                //注意这里,我是以X轴显示内容过长为例,如果是y轴的话,需要改为yAxis
                if (params.componentType == 'xAxis') {
                    var elementDiv = document.querySelector('#extension')
                    elementDiv.style.cssText = 'display:none'
                }
            })
        }
        
// 基于准备好的dom,初始化echarts实例
//var myChart = echarts.init(document.getElementById('main'));

//2.在option配置的xAxis里加入属性
 // x轴文字超出,...显示
                triggerEvent: true,
                axisLabel: {
                    // 文字省略
                    formatter: function (value) {
                        if (value.length > 3) {
                            return `${value.slice(0, 3)}...`
                        }
                        return value
                    }
                },
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
        
//3.echarts实例创建完成,配置项、数据显示图表完成,调用extension方法
extension(myChart);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10488.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!