首页 前端知识 echarts宽高自适应and字体自适应

echarts宽高自适应and字体自适应

2024-06-14 09:06:54 前端知识 前端哥 668 829 我要收藏

终于!!!,加班到现在才搞完.....

新手第一篇文章希望大家多多支持

首先是图表

整体思路:根据父级的宽高的改变使得echart跟着改变

HTML部分

<el-col id="echart_box" :span="12">
    <div style="margin:auto 0" id="calendar" />
 </el-col>

JS部分

chartssize(){
            let echartBox = document.getElementById("echart_box");
            let w = echartBox.offsetWidth;    // 返回元素的总宽度
            let h = echartBox.offsetHeight;    // 返回元素的总高度
            console.log(w,h);
            this.myChart.resize({
                width: w,
                height: h
            });
            // 这个是字体 自适应大小后面会讲
            this.setEchartFontSize()
        },

CSS部分

#echart_box{
    width: 100%;
    height: 100%;
    padding:0 10px;
}
#calendar{
    width: 100%;
    height:360px;
    margin: 0 10px;
}

字体自适应部分

整体思路:获取其他可自适应做出改变的元素的字体大小,再计算成echart需要的大小并赋值

JS部分

setEchartFontSize(){
    //获取其他元素的字体大小
    let dayclass = document.getElementsByClassName("day")
    let fontSizeStr = window.getComputedStyle(dayclass[0]).fontSize // 例 '12px'
    let str = fontSizeStr.replace(new RegExp("px","g"),""); // new RegExp 加'g',删除字符串里所有的"a" 例:'12px' => '12'
    let num = parseInt(str); // 例 '12' => 12
    this.myChart.setOption({
     series: [
                {
                  label:{
                     fontSize:num - 2
                  }
                }
             ]
     })
  }

整体挂载:

mounted() {
          this.onChart()
          this.setEchartFontSize()
          this.chartssize()
      },
methods: {
 onChart(){
            this.myChart = echarts.init(document.getElementById('calendar'))
            this.myChart.setOption(this.option)
  
            // 自适应大小 窗口大小变化时触发
            window.addEventListener("resize",()=>{
                this.chartssize()
            })
          },

注:如果不能自适应检查一下父级或者借鉴的元素本身不能做出自适应

        如在以下代码报........(reading ‘type‘)的错误

window.addEventListener("resize",()=>{

                // this.myChart.resize();

                this.setEchartFontSize()

                this.chartssize()

            })

解决方法:

// shallowRef需引入   import {shallowRef} from 'vue';

this.myChart = shallowRef(echarts.init(document.getElementById('echart1')))

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12127.html
标签
评论
发布的文章

fastjson升级为fastjson2

2024-06-20 09:06:18

protobuf对象与JSON相互转换

2024-06-20 09:06:14

NVM 及 PNPM 安装

2024-06-20 09:06:01

npm有哪些插件包??

2024-06-20 09:06:01

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