起飞了起飞了 2020-10-22 16:29 采纳率: 0%
浏览 88

使用ECharts插件,鼠标移入图标出现一条固定的竖线,导致对图表无法操作,并且不会消失,请问一下这是什么原因?

使用ECharts插件,鼠标移入图标出现一条固定的竖线,导致对图表无法操作

用是一个模板用往里面放数据

上代码

function LoadQXHighcharts(houseName, xValue, remoteData, QingXie, order) {
            var myChart;

            if (myChart != null && myChart != "" && myChart != undefined) {
                myChart.dispose();
            }
            $('#containerWeek').append('<div id="containerWeek' + order + '" style="min-width: 1000px; height: 400px; float: left;"></div>');
            var mainContainer = document.getElementById('containerWeek' + order);
            //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeMainContainer = function () {
                mainContainer.style.width = window.innerWidth * 0.8 + 'px';
                mainContainer.style.height = window.innerHeight * 0.6 + 'px';
            };
            //设置div容器高宽
            resizeMainContainer();
            // 初始化图表
            myChart = echarts.init(mainContainer);

            $(window).on('resize', function () {//
                //屏幕大小自适应,重置容器高宽
                resizeMainContainer();
                myChart.resize();
            });


            //json格式化,将JSon字符串转成json对象
            //var QingXie1 = JSON.parse(QingXie);
            var option = {
                title: {
                    text: '倾斜率曲线图' + (order + 1) 
                },
                subtitle: {
                    text: houseName 
                },
                dataZoom: [
                        {
                            show: true,
                            type: 'slider',//内置
                            AxisIndex: [0],//y
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',//外置
                            xAxisIndex: [0],//y
                            start: 0,
                            end: 100
                        },
                        {
                            left: '93%',
                            show: true,
                            type: 'slider',//内置
                            yAxisIndex: [0],//y
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',//外置
                            yAxisIndex: [0],//y
                            start: 0,
                            end: 100
                        }
                ],
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    showDelay: 0,//显示延时,添加显示延时可以避免频繁切换
                    hideDelay: 50,//隐藏延时
                    transitionDuration: 0,//动画变换时长
                    backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色(此时为默认色)
                    borderRadius: 8,//边框圆角
                    padding: 10,    // [5, 10, 15, 20] 内边距
                    formatter: function (datas)
                    {
                        var res = datas[0].name + '<br/>', val;
                        for (var i = 0; i < datas.length; i++) {
                            var remote;
                            for (var j = 0; j < QingXie.length; j++) {
                                if (JSON.parse(QingXie[j]).name == datas[i].seriesName) {
                                    remote = JSON.parse(QingXie[j]);
                                }
                            }
                            if (datas[i].value != null)
                                val = datas[i].value.toFixed(2);
                            else
                                val = null;
                            res += datas[i].seriesName + '  当前值:' + val + ' ; 当前变化值:' + (val - remote.SensorInit).toFixed(2);

                            res += ' ; ' + '<br/>' + ' 结构初始值:' + remote.StructureInit;
                            res += ' ; 预警值上限:' + remote.ChangeWarning + ';';
                            res += ' ; 预警值下限:' + remote.ChangeWarningDown + ';' + '<br/>';
                            res += ' ; 预警值二级上限:' + remote.ChangeWarning2 + ';';
                            res += ' ; 预警值二级下限:' + remote.ChangeWarningDown2 + ';' + '<br/>';
                            res += ' ; 预警值三级上限:' + remote.ChangeWarning3 + ';';
                            res += ' ; 预警值三级下限:' + remote.ChangeWarningDown3 + ';' + '<br/>';
                        }
                        return res;
                    }
                },
                xAxis: {
                    boundaryGap: false,
                    data: eval(xValue)
                },
                yAxis: {
                    min: -100,
                    max: 150,
                    //sacle : true,
                    splitLine: {
                        show: false
                    },
                    //type: 'value',
                    axisLabel: {
                        formatter: '{value}‰'
                    }
                },
                legend: {
                    top: 50,
                    selectedMode:false
                },
                grid:{
                    top: 150
                },
                //dataZoom: [
                //    {
                //        startValue: 0,
                //        zoomLock : true
                //    },

                // {
                //    type: 'inside'
                //}, {
                //    realtime: true
                //}],
                series: eval(remoteData)
            };

            myChart.setOption(option);
            $(window).resize(myChart.resize);


        }

以上是我的代码片段 ,下面是我鼠标移入之后在移出现的问题
正常的应该是移入出现竖线以及信息,移出竖线和数据都不显示了,但是现在移入的时候竖线出来而且一直在
并且当鼠标没有移入图表的时候dataZoom是可以移动的,但是出现竖线之后 dataZoom的效果也失效了

图片说明
然后是报错信息
图片说明
报错信息是因为json解析异常,但是我看了自己json的返回数据以及返回内容和内容的格式是正确的
已经用了很多个图表了就是这个出了错,下面就是正常的图表_

图片说明
找了很多方法都不行,求大佬们看看是什么原因导致的 拜托了!

  • 写回答

1条回答 默认 最新

  • Booker-Liu 2020-10-22 17:07
    关注

    那条竖线代表的是一条数据, 此时会调用 tooltip-->formatter 方法,格式化弹出框的数据
    控制台输出日志一步步检查你这个 formatter: function (datas) 方法中哪一步错了吧

    评论

报告相同问题?

悬赏问题

  • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集?
  • ¥20 关于#硬件工程#的问题,请各位专家解答!
  • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错,维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯:Person is not mapped,如何解決?