窗口大小不规范，教你怎么写默认窗口

直接上js

$(function(){var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值var wH = window.innerHeight;// 当前窗口的高度var wW = window.innerWidth;// 当前窗口的宽度var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值$('html').css('font-size', rem + "px");
});
$(window).resize(function (){// 绑定到窗口的这个事件中var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值var wH = window.innerHeight;// 当前窗口的高度var wW = window.innerWidth;// 当前窗口的宽度var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值$('html').css('font-size', rem + "px");
});

拿这个页面看一下

html代码

<!--* @Author: your name* @Date: 2021-11-23 22:36:48* @LastEditTime: 2021-12-21 10:54:41* @LastEditors: Please set LastEditors* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D营* @FilePath: \数据可视化通用模板\e006-echarts运营平台简版\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/index.css"><title>运营数据</title><script src="js/jquery-2.2.1.min.js"></script><script src="js/rem.js"></script><script src="js/echarts.min.js"></script><script src="js/index.js"></script></head>
<body><script src=""></script><div class="t_container"><header class="t_h_bg"><span>营售大数据统计大屏</span></header><main class="t_main"><div class="t_box"><header class="t_title"><span>本月销售额</span><span class="t_number">23，000，000.00</span></header><div class="t_list"><div class="t_min">订单量 <i></i></div><div class="t_min">客流量 100 <i></i></div><div class="t_min">转换率 5% <i class="down"></i></div></div><div id="chart_1" class="echart" style="width: 100%; height: 2.4rem;"></div></div><div class="t_box"><header class="t_title"><span>商品销售统计</span></header><div id="chart_2" class="echart" style="width: 100%; height: 3rem;"></div></div><div class="t_box"><header class="t_title"><span>年度销售额走势图</span></header><div id="chart_3" class="echart" style="width: 100%; height: 3rem;"></div></div><div class="t_box"><div class="main_table t_btn8"><table><thead><tr><th>销售价格</th><th>销售市场</th><th>销售任务</th> <th>销售量</th></tr></thead><tbody><tr><td>21449</td><td>26667</td><td>18248</td><td>20166</td></tr><tr><td>12227</td><td>21140</td><td>18208</td><td>20115</td></tr><tr><td>14977</td><td>20505</td><td>25342</td><td>20114</td></tr><tr><td>17494</td><td>19647</td><td>20227</td><td>20135</td></tr><tr><td>16493</td><td>18812</td><td>20394</td><td>20124</td></tr></tbody></table></div></div></main></div>
</body>
</html>

css，js（index）在此

$(function () {echart_1();echart_2();echart_3();function echart_1() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('chart_1'));//得到chart-1的idvar xAxisData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13','14','15','16','17','18','19','20'];var legendData = ['3月', '4月'];//上方为x轴数据，下方为y轴数据var title = "2018年度3月,4月销售额";//标题var serieData = [];var metaDate = [[1200, 1400, 1000, 1200, 3000, 2300, 1300, 1700, 1400, 1200, 3000, 2300, 2400, 2100, 2800, 3100, 3000, 2800, 2700, 2900],[2000, 1200, 3000, 2000, 1700, 3000, 2000, 1800, 2000, 1900, 3000, 2000, 2500, 2200, 2600, 2700, 2900, 3000, 3200, 3100]]for (var v = 0; v < legendData.length; v++) {var serie = {name: legendData[v],type: 'line',symbol: "circle",symbolSize: 10,data: metaDate[v]};serieData.push(serie);}var colors = ["#036BC8", "#FFF", "#5EBEFC", "#2EF7F3"];var option = {backgroundColor: '#0f375f',title: {text: title,textAlign: 'left',textStyle: {color: "#fff",fontSize: "12",fontWeight: "bold"}},legend: {show: true,left: "center",data: legendData,y: "5%",itemWidth: 18,itemHeight: 12,textStyle: {color: "#fff",fontSize: 14},},toolbox: {orient: 'vertical',right: '1%',top: '20%',iconStyle: {color: '#fff',borderColor: '#fff',borderWidth: 1,},feature: {saveAsImage: {},magicType: {// show: true,type: ['line','bar','stack','tiled']}}},color: colors,grid: {left: '2%',top: "12%",bottom: "5%",right: "5%",containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},},xAxis: [{type: 'category',axisLine: {show: true,lineStyle: {color: '#6173A3'}},axisLabel: {interval: 0,textStyle: {color: '#9ea7c4',fontSize: 12}},axisTick: {show: false},data: xAxisData,}, ],yAxis: [{axisTick: {show: false},splitLine: {show: false},axisLabel: {textStyle: {color: '#9ea7c4',fontSize: 12}},axisLine: {show: true,lineStyle: {color: '#6173A3'}},}, ],series: serieData};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}function echart_2() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('chart_2'));  var giftImageUrl = "data:image/png;base64,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";myChart.setOption({graphic: {elements: [{type: 'image',style: {image: giftImageUrl,width: 30,height: 30},left: '73%',top: 'center'}]},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['销售额'],left:'27%'},grid: {left: '1%',right: '60%',top: '10%',bottom: '10%',containLabel: true,},xAxis: {type: 'value',position:'top',splitLine: {show: false},boundaryGap: [0, 0.01],axisTick: {show: false},axisLabel: {textStyle: {color: '#9ea7c4',fontSize: 12}},axisLine: {show: true,lineStyle: {color: '#6173A3'}},},yAxis: {type: 'category',data: ['茶几','床头柜','斗柜','大床','电视柜'],axisTick: {show: false},splitLine: {show: false},axisLabel: {textStyle: {color: '#9ea7c4',fontSize: 12}},axisLine: {show: true,lineStyle: {color: '#6173A3'}},},series: [{name: '',itemStyle: {normal: {color: function(params) {// build a color map as your need.var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];return colorList[params.dataIndex]},shadowBlur: 20,shadowColor: 'rgba(0, 0, 0, 0.5)'}},type: 'bar',data: [260,210,190,170,170]},{type: 'pie',radius: [30, '80%'],center: ['75%', '50%'],roseType: 'radius',color: [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'],data: [{value: 26,name: '茶几'}, {value: 21,name: '床头柜'}, {value: 19,name: '斗柜'}, {value: 17,name: '大床'}, {value: 17,name: '电视柜'}],label: {normal: {textStyle: {fontSize: 14},formatter: function(param) {return param.name + ':\n' + Math.round(param.percent) + '%';}}},labelLine: {normal: {smooth: true,lineStyle: {width: 2}}},itemStyle: {normal: {shadowBlur: 30,shadowColor: 'rgba(0, 0, 0, 0.4)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function(idx) {return Math.random() * 200;}}]});}function echart_3() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('chart_3'));  option = {// backgroundColor: "#404A59",color: ["#036BC8", "#5EBEFC", "#2EF7F3"],title: [{text: '',left: '1%',top: '6%',textStyle: {color: '#fff'}}, {text: '',left: '83%',top: '6%',textAlign: 'center',textStyle: {color: '#fff',fontSize: 16}}],tooltip: {trigger: 'axis'},legend: {x: 300,top: '7%',textStyle: {color: '#ffd285',},data: ['2016年', '2017年', '2018年']},grid: {left: '1%',right: '28%',top: '16%',bottom: '6%',containLabel: true},toolbox: {"show": false,feature: {saveAsImage: {}}},xAxis: {type: 'category',"axisLine": {lineStyle: {color: '#fff'}},"axisTick": {"show": false},axisLabel: {textStyle: {color: '#fff'}},boundaryGap: false,data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12']},yAxis: {"axisLine": {lineStyle: {color: '#fff'}},splitLine: {show: false,lineStyle: {color: '#fff'}},"axisTick": {"show": false},axisLabel: {textStyle: {color: '#fff'}},type: 'value'},series: [{name: '',smooth: true,type: 'line',symbolSize: 9,symbol: 'circle',data: [90, 50, 39, 50, 120, 82, 80, 89, 92, 80, 102, 77]}, {name: '',smooth: true,type: 'line',symbolSize: 9,symbol: 'circle',data: [70, 50, 50, 87, 90, 80, 70, 77, 86, 94, 96, 99]}, {name: '',smooth: true,type: 'line',symbolSize: 9,symbol: 'circle',data: [100, 112, 80, 132, 60, 70, 90, 131, 121, 102, 95, 105 ]}, {type: 'pie',center: ['83%', '33%'],radius: ['30%', '35%'],label: {normal: {position: 'center'}},data: [{value: 335,name: '销售分析',itemStyle: {normal: {color: '#FF7E45'}},label: {normal: {formatter: '{d} %',textStyle: {color: '#ffd285',fontSize: 14}}}}, {value: 180,name: '占位',tooltip: {show: false},itemStyle: {normal: {color: '#fff'}},label: {normal: {textStyle: {color: '#ffd285',},formatter: '\n销售渠道'}}}]},{type: 'pie',center: ['83%', '72%'],radius: ['30%', '35%'],label: {normal: {position: 'center'}},data: [{value: 435,name: '销售分析',itemStyle: {normal: {color: '#4834CB'}},label: {normal: {formatter: '{d} %',textStyle: {color: '#fff',fontSize: 14}}}}, {value: 100,name: '占位',tooltip: {show: false},itemStyle: {normal: {color: '#fff'}},label: {normal: {textStyle: {color: '#fff',},formatter: '\n销售方向'}}}]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}
});

窗口大小不规范，教你怎么写默认窗口相关推荐

larvel php restful_Laravel教你简单写出专业的RestfulAPI
下面由Laravel教程栏目给大家介绍Laravel写出专业的RestfulAPI的方法,希望对需要的朋友有所帮助! Laravel教你简单写出专业的URL 引言在我们连接了数据库,并且使用迁移功能 ...
包含对象名字的游戏id_教你从头写游戏服务器框架（三）
关于作者:韩伟,腾讯互娱高级工程师,目前在Next产品中心研发创新类型游戏. 本文为系列文章的第 3篇第一篇:教你从头写游戏服务器框架(1) 第二篇:教你从头写游戏服务器框架(2) 协程 ...
清华大学车辆刚才专业大佬教你如何写SCI论文（转）
在B站看到清华大学车辆工程专业博士生的视频,教你如何写SCI论文,讲得非常好,对工科不好搞论文的专业有帮助,对科研入门或者迷茫没人指导的同学大有帮助. 国之栋梁的高校就是资源丰富,愿意分享知识.有个清 ...
牛客练习赛46 A 华华教奕奕写几何（简单数学）
链接:https://ac.nowcoder.com/acm/contest/894/A 来源:牛客网华华教奕奕写几何时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 524288K ...
计算机快捷键还原默认值,CAD默认快捷键如何恢复？教你还原CAD默认配置的方法...
小编告诉大家AutoCAD的操作命令和各种设置分为默认和自定义. 可以根据每个人的喜好进行设置. 不必完全遵循该软件的默认操作,只是因为此快捷键是可变的,所以我仍然不习惯更改我的个人操作,并且想要恢复 ...
Modelsim设置默认窗口排版
Modelsim设置默认窗口排版本人使用Modelsim的大多数情况,是从Vivado或Quartus II软件中联合调用的.如果使用默认的窗口排版,整个窗口显示会比较凌乱,轻微强迫症的我每次打开, ...
教我怎么写连笔字签名胡彦清
导读:今天来给大家分享[教我怎么写连笔字签名胡彦清]有叫这个名字的人可以来看看了! 一.学习签名首先是要决定是写在哪些地方; (1)用在普通的场合,想要一个比较独特的签名; 在这种时候,想要一个与众不 ...
不写默认无参构造方法，调用自定义构造方法时报错No constructor found in com...
如果在实体类里面自定义构造方法,没有写默认无参构造方法,然后初始化类的对象,调用自定义构造方法的时候,就会报如下错误: 解决办法是:在实体类中加入无参数构造方法即可,如下图
python + win32api,win32gui,win32con 写 exe 窗口的时候，怎么创建按钮呢？
问题描述: 自己用 python + win32api 想写 exe 脚本文件,但是按钮都不会创建 python + win32api,win32gui,win32con 写 exe 窗口的时候,怎么 ...
一篇文章教你如何写出【✨无法维护✨】的代码？
对,你没看错. 本文就是教你怎么写出让同事无法维护的代码. ❤️ 1.程序命名❤️ 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考虑 a1 ...

窗口大小不规范，教你怎么写默认窗口

直接上js

拿这个页面看一下

窗口大小不规范，教你怎么写默认窗口相关推荐

最新文章

热门文章