精华内容
下载资源
问答
  • vue使用echarts字体自适应
    2021-11-15 14:33:31
    <templete>
          <div id="echart" style="width:400px;height:400px"></div>
    </templete>
    <script>
       export default({
          data(){
             return{ 
                chartCircle:null,
                circleOption:{},
                 screenWidth: document.body.clientWidth,//当前屏幕宽度
             }
           },
           mounted(){this.getTaskData()},
           methods:{
                nowSize(val,initWidth=1920){
    	            let nowClientWidth = document.documentElement.clientWidth
    	            return val * (nowClientWidth/initWidth);
    	        },
    	       getTaskData(){
    	            basic.getTask().then(res=>{
    	                if(res.data.code==0){
    	                    //今日巡检
    	                    this.chartCircle = this.$echarts.init(document.getElementById("echart"));
    	                    this.circleOption =  {
    	                        tooltip: {
    	                          trigger: "item",
    	                
    更多相关内容
  • 主要介绍了echarts大屏字体自适应的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • echarts字体大小自适应

    千次阅读 2022-02-16 16:46:57
    在methods里面搞一个方法,举个例子,比如美工给你的设计稿是1920*1080的,字体大小你量的是30px,那么网页加载时,获得屏幕的宽度,然后用屏幕宽度除以1920,得到比例,用30px乘以比例,就是你想要的字体大小了。...

    问题描述

    做大屏时可能会遇到这种情况,图表可以根据容器(div)的大小自动调整,因为你可以在相关配置项中设置为百分比,但是字体大小就不一样了,你只能传个写死的数字。这里记录一下怎么做到文字自适应。

    解决方案

    methods里面搞一个方法,举个例子,比如美工给你的设计稿是1920*1080的,字体大小你量的是30px,那么网页加载时,获得屏幕的宽度,然后用屏幕宽度除以1920,得到比例,用30px乘以比例,就是你想要的字体大小了。比如在960px宽度的屏幕上,比例就是960 / 1920 = 0.5,

    得到的字体大小就是15px。

        // 根据不同的屏幕宽度换算字体大小
        transformFontSize(fontsize) {
            // 获取屏幕宽度
          const width = window.screen.width
          const ratio = width / 1920
          // 取下整
          return parseInt(fontsize * ratio)
        }
    

    echarts配置项使用示例:

               label: {
                  normal: {
                    formatter: this.waterData[2] + '',
                    textStyle: {
                      fontSize: this.transformFontSize(32),
                      color: '#dbfbfc'
                    },
                    position: ['50%', '30%']
                  }
                }
    

    实际项目使用示例

    实际项目我一般使用混入,因为图表比较多,方法具有通用性。贴混入代码

    /* eslint-disable */
    export default {
      data() {
        return {
          // echarts的实例
          myChart: null
        }
      },
      mounted() {
        // 监听屏幕大小变化
        window.addEventListener('resize', this.screenAdatper)
      },
      methods: {
        screenAdatper() {
          this.myChart && this.myChart.resize()
        },
        // 根据不同的屏幕宽度换算字体大小
        transformFontSize(fontsize) {
          const width = window.screen.width
          const ratio = width / 1920
          return parseInt(fontsize * ratio)
        }
      },
    
      beforeDestoryed() {
        // 组件销毁前移除监听,防止内存泄露
        window.removeEventListener('resize')
      }
    }
    /* eslint-disable */
    
    
    展开全文
  • 问题遇到的现象和发生背景 我用echarts做条形成绩统计,图表的主标题字体大小自适应,改变窗口不能自动刷新变化。图能,字不能。 问题相关代码,请勿粘贴截图 用网上的办法,这个代码通过了。 //获取屏幕宽度并计算...
  • Echarts文字大小自适应,案例详解

    千次阅读 2021-02-24 11:54:44
    echarts做可视化大屏的时候,图表大小可以自适应,但是图表里面文字的大小不能自适应。有一种解决方法就是采用rem为单位,根据屏幕的宽度调整html的font-size。 <div id="qualres" style="width:100%; height:...

    用echarts做可视化大屏的时候,图表大小可以自适应,但是图表里面文字的大小不能自适应。有一种解决方法就是采用rem为单位,根据屏幕的宽度调整html的font-size

    在这里插入图片描述

    <div id="qualres" style="width:100%; height:100%; padding:1rem"></div>
    

    先定义一个函数fontSize(),用来获取屏幕宽度并计算比例,在需要设置字体的地方调用这个函数即可。

    getEcharts(){
    	//获取屏幕宽度并计算比例
    	function fontSize(res){
        	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = 100 * (clientWidth / 1920);
            return res*fontSize;
    	}
        var dom = document.getElementById('qualres');
        var myChart = echarts.init(dom);
        var option = {
        	title: {
            	text: '近七天内访问量和下载量',
              	subtext: '访问次数(次)',
              	itemGap: 10,
              	textStyle: {
              		//调用fontSize()方法,此时fontSize为18px
                	fontSize: fontSize(0.18)
              	},
              	subtextStyle: {
                	color: 'gray',
                	fontSize: fontSize(0.12)
              	}
    		},
            tooltip: {
            	trigger: 'axis',
            },
            legend: {
    	        data: ['访问量', '下载量'],
                right: 20,
                itemGap: 30,
                icon: 'circle',
                textStyle: {
                	fontSize: fontSize(0.14)
                }
    		},
            grid: {
            	top: '60px',
              	left: '1%',
              	right: '1%',
              	bottom: '0',
              	containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'],
                axisTick:{ 
                	show: false,
                },
                axisLine: { show: false },
                axisLabel: {
                	color: '#666666',
                	margin: 10,
                	fontSize: fontSize(0.12)
                },
                boundaryGap: true,
            },
            yAxis: {
                type: 'value',
                axisTick:{ show: false },
                axisLine: { show: false },
                axisLabel: {
                	color: '#666666',
                	margin: 10,
                	fontSize: fontSize(0.12)
                },
                interval:10,
                min:0,
                max:40,
            },
            series: [{
                name: '访问量',
                type: 'line',
                symbol: 'circle',
                smooth: true,
                data: [19, 23.5, 32, 30, 26, 32, 27],
                color: 'rgb(251,168,46)',
            },{
                name: '下载量',
                type: 'line',
                symbol: 'circle',
                smooth: true,
                data: [11, 10, 9, 15.5, 18, 17, 13],
                color: 'rgb(30,135,240)',
            }]
    	}
    	//视口调整后重新渲染echart图表
    	window.onresize = function () {
        	myChart.resize()
        };
        myChart.setOption(option);
    },
    

    echart图表本身提供了一个resize()函数,当浏览器发生resize事件时,让其触发echart的resize()函数,可以重绘canvas,实现图表自适应。

    此时,字体的大小并不能随着图表自适应(必须刷新页面),需要设置监听事件addEventListener,在浏览器窗口发生变化时重新执行图表方法:

    mounted(){    
        this.getEcharts();
        window.addEventListener('resize',()=>{
        	this.getEcharts();
        })
      },
    
    展开全文
  • 大屏字体自适应的方法步骤主要介绍了echarts大屏字体自适应的方法步骤,用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况,这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决...

    echarts大屏字体自适应的方法步骤
    大屏字体自适应的方法步骤主要介绍了echarts大屏字体自适应的方法步骤,用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况,这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位,根据屏幕的宽度调整html的font-size.获取屏幕宽度并计算比例

        function fontSize(res) {
            let docEl = document.documentElement,
                clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = 100 * (clientWidth / 1920);
            return res * fontSize;
        }
    

    在需要设置字体的地方可以这样写,如在1920屏宽下字体设置为12px,就可以传入0.12给fontSize fontSize(0.12)

    tooltip : {     
     trigger: 'axis',   
     axisPointer : {      
     // 坐标轴指示器,坐标轴触发有效       
      type : 'shadow'   
     // 默认为直线,可选为:'line' | 'shadow'      
     },    
      textStyle:{        
      fontSize: fontSize(0.12),     
      }   
      }
    

    摘录自大佬的文章,非原创

    展开全文
  • --为echarts准备一个具备大小的容器dom--> <div id="org_ech_line"></div> </div> </div> </template> <script> import * as echarts from 'echarts' export default { ...
  • 字体使用百分比设置,例如: fontSize: '100%',
  • echarts图表字体自适应

    2020-12-16 15:34:06
    以设计图宽度为1920px为例 // 写在了公共方法,也可直接写在页面方法中 export default{ fontSize(res){ let docEl = document.... // 引用 // 在设置字体的位置使用: fontSize: setFontSize.fontSize(1.6);
  • echarts 字体自适应的方法(使用rem)

    万次阅读 热门讨论 2019-12-10 09:24:04
    如在1920屏宽下字体设置为12px,就可以传入12给fontSize tooltip : { trigger: 'axis', textStyle:{ fontSize: fontSize(12), } }, 当浏览器窗口发生改变的时候,需要重绘图表,才能实现实时改变echarts字体 ...
  • const scale = document.documentElement.clientWidth / 1920 // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整) document.documentElement.style.fontSize = ...
  • echarts 图表文字大小自适应

    千次阅读 2019-10-09 09:58:31
    echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况,这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位,根据屏幕的宽度调整html的font-size. 获取屏幕...
  • echarts字体自适应div大小

    千次阅读 2018-12-18 15:14:03
    echarts字体如何自适应div大小: 结合对字体使用百分比设置,例如:fontSize: ‘75%’,
  • vue echarts 大小自适应

    2018-04-17 13:55:00
    窗口大小时候 ,echarts自适应 在创建图表的方法中直接,用resize方法 let myChart=this.$refs.myChart; let mainChart = echarts.init(myChart)// 基于准备好的dom,初始化echarts实例 /*图表自适应*...
  • 最初想着怎么给echarts设置vw单位或者rem,echart中怎么把legend的单位设置为vw...但是使用了echarts图表,图表中的fontSize和legend的大小等默认都是px单位。当屏宽为4K屏时,其他地方元素字体等都能适应,但是echa...
  • 上一篇文章我写了大屏字体自适应的方法,但是echarts中的字体,自适应无法生效,所以,更新一种echarts字体自适应的方法。 在需要设置自适应的echarts页面的vue文件中,定义 px转换rem方法: /** * px转换rem */ ...
  • <template> <div class="box"> <Breadcrumb name="数据统计"/> <el-card>...div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '...
  • mounted() { window.addEventListener('resize', () => { this.myChart1.resize();... this.myChart1 = this.$echarts.init(document.getElementById('myChart')) this.myChart1.setOption({ .
  •     echarts对于字体的设置是不能直接使用rem的写法的,但是我们在移动端或者各屏幕分辨率进行适配的时候就会出现图形变大变小但是里面的字体依旧还是那么大,怎么解决呢,我们可以写一个方法,在写固定字体的...
  • echarts图表(大屏可视化)文字大小自适应

    千次阅读 热门讨论 2021-01-22 10:34:24
    做可视化的时候,相信大家都遇到过图表大小可以自适应,但是图表里面文字大小不能自适应的问题,之前也在网上找过文字自适应的方法,但是都是先改变窗口大小,然后刷新页面,文字大小才能跟随变化,于是就有了这篇...
  • echarts 图表和字体自适应浏览器窗口 在使用echarts做图表的时候,更换设备或者缩放浏览器窗口大小时,需要自适应浏览器窗口。 1. 自适应浏览器窗口,在setOption后引入下边window.onresize...即可。 //根据窗口的...
  • 同一个组件里有两个饼图,都需要随着屏幕大小的变化实时进行自适应。 实现后的效果图如下: 这是屏幕宽度足够大的时候: 这是屏幕宽度较小的时候: 1. 首先设置饼图基本配置 option = { title: false, //不需要...
  • 1.echarts实现大小自适应包含它的标签容器 实现方式:监听window上的resize事件,在事件中执行echarts自带的resize方法 首先包含echarts的容器应该有初始的宽高,否则echarts无法显示。第二,为了使窗口缩放时,容器...
  • echarts大屏自适应展示

    千次阅读 2019-10-14 19:33:38
    页面大小随屏幕大小而变化,字体按百分比或者rem等设置 样式也可使用媒体查询 窗口变化是刷新图表 window.onresize = function () { chart.resize() } echarts 设置阴影效果 itemStyle: { normal: { ...
  • 窗口大小改变市echarts图表常常会溢出,这时候会很难看,于是查看文档和百度下后,有如下解决方案: var myChart = echarts.init(document.getElementById('main')); var option = { ... }; myChart....
  • echart在改变容器尺寸时...根据容器大小自动缩放echarts 本地测试 App.vue为测试页面 git clone https://github.com/wj100/auto-size-echart.git yarn yarn dev 使用方法 1. 安装 yarn add auto-size-echart 1. 使

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 893
精华内容 357
关键字:

echarts字体大小自适应