Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用echart的时间轴 有报错,影响后面的事件监听! #918

Closed
lindaop opened this issue Apr 23, 2019 · 6 comments
Closed

使用echart的时间轴 有报错,影响后面的事件监听! #918

lindaop opened this issue Apr 23, 2019 · 6 comments

Comments

@lindaop
Copy link

lindaop commented Apr 23, 2019

/**
     * @param {?} params
     * @param {?=} eventType
     * @return {?}
     */
    JigsawGraph.prototype._handleEvent = function (params, eventType) {
        // 防止和ng2 事件冲突,响应两遍.
        event.preventDefault();
        event.stopPropagation();
        this[eventType].emit(params);
    };

把上面 event.preventDefault(); event.stopPropagation(); 注释掉后没有报错了,能监听后面的timelinechanged 事件。帮忙处理一下!多谢,多谢!

报错信息:

core.js:1440 ERROR TypeError: Cannot read property 'preventDefault' of undefined
    at JigsawGraph._handleEvent (jigsaw.es5.js:14313)
    at us.eval (jigsaw.es5.js:14303)
    at us.trigger (scripts.bundle.js:22)
    at us.<anonymous> (scripts.bundle.js:22)
    at ls.trigger (scripts.bundle.js:22)
    at us.ps (scripts.bundle.js:22)
    at us.HT.dispatchAction (scripts.bundle.js:22)
    at Ga.dispatchAction (scripts.bundle.js:22)
    at i._changeTimeline (scripts.bundle.js:22)
    at i.<anonymous> (scripts.bundle.js:22)
@hpyou
Copy link
Collaborator

hpyou commented Apr 23, 2019

你是在火狐里面使用的?

@lindaop
Copy link
Author

lindaop commented Apr 23, 2019

chrome里面

@rdkmaster
Copy link
Owner

有没有具体的复现方式?我没能复现这个问题

@lindaop
Copy link
Author

lindaop commented Apr 23, 2019

用了时间轴应该都会有这个问题,timeline

三个变量:

//漏斗图
        this.graphData = [
                {value: 60, name:'访问'},
                {value: 30, name:'咨询'},
                {value: 10, name:'订单'},
                {value: 80, name:'点击'},
                {value: 100, name:'展现'}
            ];
        this.graphData2 = [
            {value: 60, name:'访问'},
            {value: 70, name:'咨询'},
            {value: 80, name:'订单'},
            {value: 90, name:'点击'},
            {value: 100, name:'展现'}
        ];
        this.graphData3 = [
            {value: 78, name:'访问'},
            {value: 80, name:'咨询'},
            {value: 85, name:'订单'},
            {value: 95, name:'点击'},
            {value: 100, name:'展现'}
        ];


protected createChartOptions(): EchartOptions {

        var option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    autoPlay: true,
                    symbolSize:35,
                    rewind: true,
                    lineStyle:{
                        show:false,
                        color:'#bababa',
                        width:10
                    },
                    symbol:'emptyCircle',
                    top:60,
                    bottom:40,
                    left:-5,
                    checkpointStyle: {
                        symbolSize: 5,
                        color: '#b31d35',
                    },
                    controlStyle: {
                        show:false,
                        color:'#85c6e6',
                        showPrevBtn:false,
                        showNextBtn:false,
                        itemSize:30,
                        itemGap:30,
                        borderWidth:2,
                        borderColor:'#09b3ab'
                    },
                    orient: 'vertical',
                    playInterval: 10000,
                    //时间轴
                    data: [{
                        value: '终端',
                        tooltip: {
                            formatter:""
                        },
                        symbol: 'image://../assets/images/term.png'
                        },{
                        value: '转化',
                        tooltip: {
                            formatter:""
                        },
                        symbol: 'image://../assets/images/change.png'
                        },{
                        value: '协议',
                        tooltip: {
                            formatter:""
                        },
                        symbol: 'image://../assets/images/prot.png'
                    }],
                    label: {
                        show:false,
                        position:0,
                        color:'#b9b9b9'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}%"
                },
                title: {
                    text: '流量转化分析',
                    borderWidth:1,
                    padding: [5,5,5,233],
                    borderRadius: [45,0,0,0],
                    borderColor:'#515e8e',
                    textStyle:{
                        color: '#ffffff'
                    },
                    left:'right'
                },
                calculable: true,
                series: [
                    {
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 3,
                        legendHoverLink: true,
                        //legendSelect:true,
                        //funnelAlign: 'right',
                        name: '漏斗图',
                        type: 'funnel',
                        width: '35%',
                        height: '80%',
                        left: '15%',
                        top:'15%',
                        labelLine: {
                            length: 30,
                            type: 'dotted',
                            lineStyle: {
                                width: 1,
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{b|{b}}{c}  {b|{d}%}  ',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                padding: [0, 7],
                                rich: {
                                    b: {
                                        fontSize: 12,
                                        lineHeight: 25
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        emphasis: {
                            label:{
                                show:true
                            }
                        },
                        data:this.graphData
                    }
                ]
            },
            //对应时间轴的option
            options: [
                {
                    series: [
                        {data: this.graphData}, // 系列一的数据
                    ]
                },{
                    series: [
                        {data: this.graphData2}, // 系列二的数据
                    ]
                },{
                    series: [
                        {data: this.graphData3}, // 系列三的数据
                    ]
                },
            ]
        };
        return option;
    }

@rdkmaster
Copy link
Owner

#920

@rdkmaster
Copy link
Owner

我已经发布了v1.1.24了,请更新到这个版本来解决这问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants