vue3+Antd开发第六天

东之浩浩乎

已于 2023-06-07 14:03:09 修改

阅读量116

点赞数

文章标签： echarts 前端 javascript

于 2023-06-01 14:26:08 首次发布

本文链接：https://blog.csdn.net/weixin_66193671/article/details/130987262

版权

Echarts 图在页面上缩放或者调整窗口大小时,会出现错位的情况,因为canvas并没有重新绘制,还是固定大小

这时可以使用resize,在windows添加事件监听器,监测页面窗口变化,并且echarts的dom同时变化
可以在mounted(){}中添加以下代码

      window.addEventListener("resize", () => {
        this.chartBar1.resize();
        this.chartBar2.resize();
        this.chartPie1.resize();
        this.chartPie2.resize();
      });

注意回调函数应该用箭头函数,否则会出现this指向性问题.(如果使用function(){},内部的this会指向function内部,而内部没有定义resize,会报错)

第二个问题,ehcarts 配置项option里面如果没有填写tooltip,则会出现数据视图铺满全屏的现象,如下:

而只要添加了tooltip:

                    let option = {
                        title: {
                          ......................
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        legend: {
                           .................
                        },
                        xAxis: {
                          ...................
                        },
                        yAxis: {
                          ......................
                        },
                        series: .................
                    }

就没问题了