中echart调接口显示图表_echarts图表文字如何适配大屏分辨率

在做大屏的数据分析的时候,经常会用到echarts的图表,大屏的分辨率会有很多,比如5400*3038,9600*5400 等等,在适配大屏的布局上,宽设置成百分比,盛放 echarts 的盒子的宽设置成百分比,就可以适配图表了。

但是图表里有文字的,比如图例的文字,x/y轴的文字等,如果不做处理,直接写fontSize=12,那你会发现,页面放到大屏之后,文字就特别小,甚至看不到。

b2d16851f19416ebaae159a6b9a0291d.png那要怎么设置才能适配大屏的分辨率呢?
首先想到的就是 rem, echarts 里的字号大小,如果设置成 fontSize='12rem',其实是无效的,但是可以设置成百分比,比如   fontSize='100%',这个百分比是指 .echarts-item的100%,也就是echarts 的字号是 0.12rem。
1
"echarts-box" class="echarts-item" >div>2.echarts-item{3    font-size: 0.12rem;4   }写到这里,大家应该就能知道echarts图表里的文字怎么去适配大屏分辨率了。可以自行思考,完整的实现一下echarts图表文字如何适配大屏分辨率的小Dome。如果还不清楚,可以想一想我们是怎么做移动端适配的,思路是一样的,先要实现,不同分辨率下html字号的变化。代码如下,具体里面的数值可以根据自己的大屏设计稿尺寸做调整。
 1<script type="text/javascript"> 2    htmlSize(); 3    // 绑定到窗口的这个事件中 4    window.addEventListener('resize', function (){ 5        htmlSize(); 6    }); 7    function htmlSize() { 8        // 设计图尺寸 9        let designSize = 1920;10        let docEl = document.documentElement;11        // 根据窗口宽度做适配12        let wW = docEl.getBoundingClientRect().width;13        if (wW 1080) {14            wW = 1080 ;15        } else if (wW  > 19200) {16            wW = 19200 ;17        }18        let rem = wW * 100 / designSize;19        docEl.style.fontSize = rem + 'px';2021        // 根据窗口高度做适配22        /*let designSize = 1920;23        let docEl = document.documentElement;24        let wH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;25        if (wH 26            wH = 1080 ;27        } else if (wH  > 5400) {28            wH = 5400 ;29        }30        console.log('调整尺寸',wW);31        let rem = wH * 100 / designSize;32        docEl.style.fontSize = rem + 'px';*/33    }34script>
完整的 Dome 代码如下:
 1html> 2<html lang="en"> 3<head> 4    <meta charset="UTF-8"> 5    <title>Documenttitle> 6    <style> 7        body{ 8            font-size: 100px; 9            width: 100%;10        }11        .echarts-wrap{12            width: 100%;13            height: 300px;14            font-size: 1rem;15        }16        .echarts-item{17            width: 30%;18            height: 100%;19            font-size: 0.12rem;20        }21    style>22head>23<script type="text/javascript">24    htmlSize();25    // 绑定到窗口的这个事件中26    window.addEventListener('resize', function (){27        htmlSize();28    });29    function htmlSize() {30        // 设计图尺寸31        let designSize = 1920;32        let docEl = document.documentElement;33        // 根据窗口宽度做适配34        let wW = docEl.getBoundingClientRect().width;35        if (wW 1080) {36            wW = 1080 ;37        } else if (wW  > 19200) {38            wW = 19200 ;39        }40        let rem = wW * 100 / designSize;41        docEl.style.fontSize = rem + 'px';4243        // 根据窗口高度做适配44        /*let designSize = 1920;45        let docEl = document.documentElement;46        let wH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;47        if (wH 48            wH = 1080 ;49        } else if (wH  > 5400) {50            wH = 5400 ;51        }52        console.log('调整尺寸',wW);53        let rem = wH * 100 / designSize;54        docEl.style.fontSize = rem + 'px';*/55    }56script>57<body>58    <div class="echarts-wrap">59        <div id="echarts-box" class="echarts-item">div>60    div>61    62    <script src="echarts.min.js">script>63    <script type="text/javascript">64        // 基于准备好的dom,初始化echarts实例65        let myChart = echarts.init(document.getElementById('echarts-box'));66        // 指定图表的配置项和数据67        let option = {68            title: {69                text: 'ECharts'70            },71            tooltip: {},72            legend: {73                data:['销量']74            },75            xAxis: {76                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],77                axisLabel: {78                    fontSize: '100%',79                }80            },81            yAxis: {},82            series: [{83                name: '销量',84                type: 'bar',85                barWidth:20,86                data: [5, 20, 36, 10, 10, 20]87            }]88        };8990        // 使用刚指定的配置项和数据显示图表。91        myChart.setOption(option);92    script>9394body>95html>
其实最开始我不是这样实现的,那时候因为一下子没有想到设置字号百分比去实现,而是直接写了一个方法,echart的字号那里直接调用方法,算出字号,不过那种方法,不如这种直接设置百分比的简洁。代码也贴一下吧,主要想说明的是,一种效果可以有多种实现方式,就是在不断的实践中找到最优解。如果大家有不一样的实现方法,欢迎点击在看评论。
 1html> 2<html lang="en"> 3<head> 4    <meta charset="UTF-8"> 5    <title>Documenttitle> 6    <style> 7        body{ 8            font-size: 100px; 9            width: 100%;10        }11        .echarts-wrap{12            width: 100%;13            height: 300px;14            font-size: 1rem;15        }16        .echarts-item{17            width: 30%;18            height: 100%;19        }20    style>21head>22<body>23    <div class="echarts-wrap">24        <div id="echarts-box" class="echarts-item">div>25    div>26    27    <script src="echarts.min.js">script>28    <script type="text/javascript">29        function getFontSize(res) {30            // 根据窗口高度做适配31            let wH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;32            if (!wH) return;33            if (wH 1080) {34                wH = 1080 ;35            } else if (wH  > 5400) {36                wH = 5400 ;37            }38            let fontSize = 100 * (wH / 1080);39            return res*fontSize;40        }41        // 基于准备好的dom,初始化echarts实例42        let myChart = echarts.init(document.getElementById('echarts-box'));43        // 指定图表的配置项和数据44        let option = {45            title: {46                text: 'ECharts'47            },48            tooltip: {},49            legend: {50                data:['销量']51            },52            xAxis: {53                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],54                axisLabel: {55                    fontSize: getFontSize(0.12),56                }57            },58            yAxis: {},59            series: [{60                name: '销量',61                type: 'bar',62                barWidth:20,63                data: [5, 20, 36, 10, 10, 20]64            }]65        };6667        // 使用刚指定的配置项和数据显示图表。68        myChart.setOption(option);69    script>7071body>72html>
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页