首页 前端知识 【Echarts】Echarts的常见问题

【Echarts】Echarts的常见问题

2024-06-20 09:06:27 前端知识 前端哥 151 981 我要收藏

问题:

一. echarts x轴标签文字过多导致显示不全

在这里插入图片描述

二. echarts 创建之后如何销毁(提示报错:)

在这里插入图片描述

三. 在Vue中Echarts 随屏幕大小改变大小(resize)

解决办法 :

问题一:
方法1. xAxis.axisLabel 属性
 axisLabel: {  
    interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1:隔一个显示一个 :3:隔三个显示一个...
    rotate:-20    //标签倾斜的角度,显示不全时可以通过旋转防止标签重叠(-90到90)
  }

在这里插入图片描述

方法2. 调用formatter文字竖直显示
xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value){  
               return value.split("").join("\n");  
            }
        }
    },

在这里插入图片描述

    xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value){  
                var str = ""; 
                var num = 2; //每行显示字数 
                var valLength = value.length; //该项x轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                
                if(rowNum > 1) {
                    for(var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        
                        temp = value.substring(start, end) + "\n";
                        str += temp; 
                    }
                    return str;
                } else {
                    return value;
                } 
            }
        }
    },

在这里插入图片描述

方法3. X轴类目项隔一个换行(使用formatter中index参数)
    xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value,index){  
                if (index % 2 != 0) {  
                    return '\n\n' + value;  
                }  
                else {  
                    return value;  
                } 
            }
        }
    },

在这里插入图片描述

问题二:
方法:先判断是否创建了实例,若是有实例进行 dispose()方法销毁
      if (this.myChart1 !== null && this.myChart2 !== null) {
        this.myChart1.dispose()
        this.myChart2.dispose()
      }
      // 基于准备好的dom,初始化echarts实例
      this.myChart1 = echarts.init(document.getElementById('main1'))
      this.myChart2 = echarts.init(document.getElementById('main2'))
问题三:
方法:若是一个页面只有一个图表,利用window.onRisize()方法,若是一个页面有多个图表,利用window.addEventListener(‘risize’)
    window.addEventListener('resize', () => {
      this.myChart1.resize()
      this.myChart2.resize()
    })
  beforeDestroy() { // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
	// 销毁 Echarts 实例
    this.chart.dispose()
  },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12956.html
标签
评论
发布的文章

爱心

2024-06-27 17:06:24

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

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