解决苹果手机点击html网页输入框出现页面自动放大问题 做好网站，发现苹果手机，点击输入框调起键盘之后，解网页被方法，出现这个问题是应为没有在meta标签设置好禁止放大的缘故解决苹果手机点击html网页输入框出现页面自动放大问题：原始配置：<meta name="viewport" content="width=device-width, initial-scale=1.0">正确配置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">说明：区别在于加入了maximum-scale=1.0, user-scalable=no"，使得缩放比例为1，这样在苹果手机上就不会自动放大

记录一次站点内禁止了referrer的统计，导致百度统计无法统计到数据的问题 一、原因分析：站点内禁止了referrer的统计，导致pv请求无法正确发出，从而导致百度统计无法统计到数据二、原因解释：<meta content="always" name="referrer">导致的，以下是referrer的介绍referrer：html文档控制http请求中的referer。可用的值：referrer：never 删除http请求head中的refererreferrer：always 不改变http请求dead中的referer的值。注意，这种情况下，如果当前页面使用了https协议，而要加载的资源使用http协议，加载资源的请求head中也会携带refererreferrer：origin 从当前页面中发起的http请求只携带origin部分。referrer：default 如果当前页面使用的是https协议，而正要加载的资源使用的是普通的http协议，则将http请求head中的referer置为空。例如，百度首页源码中的：<meta content="always" name="referrer">三、问题解决：我们把<meta content="always" name="referrer">去掉就可以统计到数据了。网站之前测试防盗链功能的时候加了referrer，正是因为加了这个导致百度统计无法正常统计内页，因为除了首页全部页面都加了，删除之后久违的百度统计终于可以统计到内页的流量。

ECharts图表生成、大小自适应手机、pc端 echarts的图表，如果在bootstracp等框架div是自适应宽度的，如果设置成100%，页面会出现问题，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，下面是高度只适应的2种方法，pc端固定宽度，手机端自适应。 <div class="col-sm-12"> <hr> <div id="main"></div> </div>1、自适应手机pc宽度、高度 <script type="text/javascript"> var worldMapContainer = document.getElementById('main'); var resizeWorldMapContainer = function () { worldMapContainer.style.width = window.innerWidth+'px'; worldMapContainer.style.height = window.innerHeight+'px'; }; //设置容器高宽 resizeWorldMapContainer(); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '网站访问量数据分析' }, tooltip : { trigger: 'axis' }, legend: { data:['访问PV','访问IP'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'line']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, //data : ['周一','周二','周三','周四','周五','周六','周日'] data: {$data_time} } ], yAxis : [ { type : 'value' } ], series : [ { name:'访问IP', type:'line', stack: '总量', itemStyle : { normal : { color:'#007500', lineStyle:{ color:'#007500' } } }, //data:[220, 182, 191, 234, 290, 330, 310] data:{$count_ip} }, { name:'访问PV', type:'line', stack: '总量', itemStyle : { normal : { color:'#ff0000', lineStyle:{ color:'#ff0000' } } }, data: {$count} } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //用于使chart自适应高度和宽度 window.onresize = function () { //重置容器高宽 resizeWorldMapContainer(); myChart.resize(); }; </script>2、固定pc宽度，自适应手机宽度、高度<script type="text/javascript"> var worldMapContainer = document.getElementById('main'); var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){ //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeWorldMapContainer = function () { worldMapContainer.style.width = '100%'; worldMapContainer.style.height = '470'+'px'; }; }else{ var resizeWorldMapContainer = function () { worldMapContainer.style.width = window.innerWidth+'px'; worldMapContainer.style.height = window.innerHeight+'px'; }; } //设置容器高宽 resizeWorldMapContainer(); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '网站访问量数据分析' }, tooltip : { trigger: 'axis' }, legend: { data:['访问PV','访问IP'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'line']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, //data : ['周一','周二','周三','周四','周五','周六','周日'] data: {$data_time} } ], yAxis : [ { type : 'value' } ], series : [ { name:'访问IP', type:'line', stack: '总量', itemStyle : { normal : { color:'#007500', lineStyle:{ color:'#007500' } } }, //data:[220, 182, 191, 234, 290, 330, 310] data:{$count_ip} }, { name:'访问PV', type:'line', stack: '总量', itemStyle : { normal : { color:'#ff0000', lineStyle:{ color:'#ff0000' } } }, data: {$count} } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //用于使chart自适应高度和宽度 window.onresize = function () { //重置容器高宽 resizeWorldMapContainer(); myChart.resize(); }; </script>

百度 Echarts showLoading 和 hideLoading 使用方法 百度 Echarts showLoading 和 hideLoading 使用方法在使用ECharts渲染数据时，由于从后台执行获取到前台需要3-4s，想要通过增加正在执行，请等待这类提示信息提升用户体验，myChart1 = echarts.init(document.getElementById(ipArr[idx]+'echarts'))； myChart1.showLoading({ text : '正在加载数据' }); //增加提示 ··· //省略通过ajax异步获取数据，获取数据完成后，调用下面function //function中echarts部分代码 var option = {···} myChart1.hideLoading(); //提示关闭 myChart1.setOption(option);ECharts自带的加载框可以调整样式myChart.showLoading({ text: 'loading', color: '#c23531', textColor: '#000', maskColor: 'rgba(255, 255, 255, 0.8)', zlevel: 0 });

echarts生成中国地形图，中国地图数据统计 基于echarts实现中国地图显示，省份区域地区鼠标悬停显示区域数据，数据从低到高，显示不同的颜色，主要用于数据统计。效果如下图所示：步骤1：引入相关地图文件引入 echarts.min.js 和 china.js附件下载及案例：扫码关注“简忆博客”，回复“echartcn”，获取。步骤2：用于存放地图的盒子<div id="region" style="width: 700px;height:600px;"></div>步骤3：js实例化代码:<script> var myChart2 = echarts.init(document.getElementById('region')); var option2 = { backgroundColor: '#FFFFFF', title: { text: '中国', x:'center' }, tooltip : { trigger: 'item' }, visualMap: { min: 0, max: 1000000, text:['高','低'], realtime: false, calculable: false, color: ['orangered','yellow','lightskyblue'] }, series: [{ name: '浏览量', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderWidth: .5,//区域边框宽度 borderColor: '#FFF7FB',//区域边框颜色 areaColor:"#C4E1FF",//区域颜色 }, emphasis: { borderWidth: .5, borderColor: '#4b0082', areaColor:"#ece39e", } }, data:[ {name: '北京', value: 1100}, {name: '湖北', value: 2221250}, {name: '上海', value: 1500}, {name: '广州', value: 5200}, {name: '广东', value: 900500}, {name: '新疆', value: 5000}, {name: '西藏', value: 500000}, {name: '湖南', value: 21250}, {name: '内蒙古', value: 182250} ] }] }; myChart2.setOption(option2); </script>以上就是echarts实现中国地图分布案例，常见的区域分布图，我们在百度统计上可以看到类似，还有今年2020的全国区域疫情概况分布图，大家只需稍微更改下，自定义下即可。注：echarts生成世界地图方法参考：https://www.tpxhm.com/fdetail/391.html