美文网首页
uniapp 使用echarts H5 tooltip不显示

uniapp 使用echarts H5 tooltip不显示

作者: 风飞燕 | 来源:发表于2024-08-24 22:06 被阅读0次

    使用echarts5.5.1,项目使用vue3
    错误代码如下:

    const ctx = document.getElementById("winChart");
                    
                    // this.chart   原本data()里面定义了chart 以下为修改后代直接定义全局参数myChart
                     this.chart = echarts.init(ctx, null, {
                        width: window.innerWidth - 100,
                        height: window.innerHeight - 100
                    });
                    this.option = {
                        tooltip: {
                            trigger: 'axis',
                            show: true,
                        },
                        legend: {
                            data:  ["胜率","综合得分","二连杀概率"]
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: this.rowTime,
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [
                             {
                                        name:'胜率',
                                        type:'line',
                                        smooth:true,
                                        areaStyle: {},
                                        data:this.getData("successRate",this.dataArr,0)
                                    },
                                    {
                                        name:'综合得分',
                                        type:'line',
                                        smooth:true,
                                        areaStyle: {},
                                        data:this.getData("suggestRate",this.dataArr,0)
                                    },
                                    {
                                        name:'二连杀概率',
                                        type:'line',
                                        smooth:true,
                                        areaStyle: {},
                                        data:this.getData("doubleKillsRate",this.dataArr,0)
                                    }
                        ]
                    };
    
                    this.chart.setOption(this.option);
    

    再data() 中定义参数chart 使用this.chart这种方式能正常显示图表,但是tooltip无法显示,正确的方式定义一个全局变量把this.chart替换成全局变量

        import * as echarts from 'echarts';
        let myChart = null;
    

    正确代码

    const ctx = document.getElementById("winChart");
                     myChart = echarts.init(ctx, null, {
                        width: window.innerWidth - 100,
                        height: window.innerHeight - 100
                    });
                    this.option = {
                        tooltip: {
                            trigger: 'axis',
                            show: true,
                        },
                        legend: {
                            data:  ["胜率","综合得分","二连杀概率"]
                        },
                        calculable: true,
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: this.rowTime,
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [
                             {
                                        name:'胜率',
                                        type:'line',
                                        smooth:true,
                                        areaStyle: {},
                                        data:this.getData("successRate",this.dataArr,0)
                                    },
                                    {
                                        name:'综合得分',
                                        type:'line',
                                        smooth:true,
                                        areaStyle: {},
                                        data:this.getData("suggestRate",this.dataArr,0)
                                    },
                                    {
                                        name:'二连杀概率',
                                        type:'line',
                                        smooth:true,
                                        areaStyle: {},
                                        data:this.getData("doubleKillsRate",this.dataArr,0)
                                    }
                        ]
                    };
    
                    myChart.setOption(this.option);
    

    后记:遇到这个问题,网上找了很多方法,main.js 里面添加代码window.wx = {} ,好多人说这样就解决了,我这个版本然并卵,使用上诉方法一下解决,洗洗睡。

    相关文章

      网友评论

          本文标题:uniapp 使用echarts H5 tooltip不显示

          本文链接:https://www.haomeiwen.com/subject/dgrnkjtx.html