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

echarts生成世界地图，百度echarts生成世界地图方法 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。然而我们现在来使用它制作世界地图。步骤1：引入相应的文件（echarts.min.js 和 world.js） <script type="text/javascript" src="https://www.tpxhm.com/fdetail/echarts/echarts.min.js"></script> <script type="text/javascript" src="https://www.tpxhm.com/fdetail/echarts/world.js"></script>附件下载及案例获取：步骤2：用户放地图的div盒子<div id="map" style="width:1200px;height:500px;"></div>步骤3：js实例化地图<script> // 区域分布图 var myChart1 = echarts.init(document.getElementById('map')); var provinces = { visualMap: { min: 0, max: 1000000, text:['高','低'], realtime: false, calculable: true, color: ['orangered','yellow','lightskyblue'] }, series: [ { name: 'World Population (2010)', type: 'map', mapType: 'world', roam: true, itemStyle:{ emphasis:{label:{show:true}} }, data: [ {name: '中国', value: 28397.812}, {name: '美国', value: 19549.124}, {name: '日本', value: 3150.143}, {name: '韩国', value: 8441.537}, {name: '澳大利亚', value: 1111844}, ] } ] }; myChart1.setOption(provinces); </script>世界地图分布主要用于数据统计，以上是一个简单的案例，仅供大家参考，注：echart生成中国地形图案例：https://www.tpxhm.com/fdetail/390.html

在vue中引入echarts方法，echarts5版本的引用方法 1、ECharts 5 新特性数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。除了动态排序图，Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果，支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画。视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。2、vue中引入echarts5方法2.1安装echarts5插件npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -S2.2、引入已安装插件<script> import * as echarts from 'echarts'; export default { // 此时页面上的元素已被渲染完毕 mounted(){ // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } </script>3、效果展示