大家好，又见面了，我是你们的朋友全栈君 目录 一、Echarts官方地图资源 二、实现 三、重要更新 四、结尾 五、参考 ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家...来自：ECharts 地图数据在线生成工具 http://ecomfe.github.io/echarts-map-tool/# 一、Echarts官方地图资源 Echarts官方文档已经暂停了地图数据的下载...，但是百度Echarts给我们留了下载的官方接口：https://echarts.apache.org/examples/vendors/echarts/map/ JSON格式 https://.../echarts/map/js/ 二、实现 下载china.js文件 https://echarts.apache.org/examples/vendors/echarts/map/js/china.js...很多同学讲到急用却找不到资源，这里统一回复一下，帮大家找了 China.js 的文件 我放在 GitHub 里了，地址：资源系列之 Echarts 中国地图官方 china.js 文件 四、结尾 我是圆圆
使用THREE.CanvasTexture通过echarts图表库canvas生成Texture，然后贴图，render时设置材质更新。...几个《传热学》相关的小程序总结如下，可在微信中点击体验： 有限元三角单元网格自动剖分 Delaunay三角化初体验 （理论戳这） Contour等值线绘制 （理论戳这） 2D非稳态温度场有限元分析 1D...《(计算)流体力学》中的几个小程序，可在微信中点击体验： Blasius偏微分方程求解速度边界层 （理论这里） 理想流体在管道中的有势流动 （源码戳这） 涡量-流函数法求解顶驱方腔流动...LBM(=Lattice Boltzmann Method)计算得到的圆柱绕流“卡门涡街”演示（由于网格较少，分辨率低，圆柱近乎正方形）： ?...顺便，《(热工过程)自动控制》中关于PID控制器的仿真可点击此处体验：PID控制演示小程序，（PID控制相关视频见：基础/整定/重要补充）。动画如下： ?
Echarts toolbox 增加数据导出Excel的功能 Echarts的toolbox提供了很多工具，例如saveAsImage(导出图片)、magicType(切换类型)等，具体的可以参考toolbox...(downloadLink); // 触发元素的点击事件，开始下载 downloadLink.click(); // 下载完成后，从文档中移除...其实大体设计思路就是将数据编码为HTML的表格（前端不会展示该表格），最终下载这个表格，包裹的是最终导出Excel文件中每一列的列名。...，因此我才想着能否使用原生JS解决，不过由于我的JS水平也就属于半吊子，所以我自己写不出来，翻遍了搜索引擎也没找到用原生JS实现的代码。...后来我是在Echarts的Github Issues中翻到了一位大佬的提问，从他的提问代码中窥探到了答案，在这里贴出这个Issue，并且感谢下这位大佬
image, 0, 0, image.width, image.height); const url = canvas.toDataURL('image/png'); // 得到图片的base64.../ 创建一个单击事件 a.download = 'img.png' || 'photo'; // 设置图片名称 a.href = url; // 将生成的URL...设置为a.href属性 a.dispatchEvent(event); // 触发a的单击事件 }; image.src = imgPath;
废话不多说 var doc = ['下载的url','下载的url2']; for (i = 0; i < doc.length; i++) { console.log(doc
做项目时，会遇到一些零碎的技术点。记录下来以防忘记 需求：做可视化界面，但是需要兼容ie8，需要用纯css、js 的H5页面对接echarts，下面为效果图（带定时器循环显示tooltip）。...实现方式（此处为一个中央云南地图的实现方法）： 1、定义容器 // 页面逻辑 2、声明参数 var myChart4 =...echarts.init(document.getElementById('main4')); 3、配置echarts参数样式 // 打点函数 function convertData(data) {
Document <script src="lib/<em>echarts</em>.min.<em>js</em>...<em>ECharts</em>最基本<em>的</em>代码结构 //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] //3. y轴数据:[88, 92,...将type<em>的</em>值设置为bar var mCharts = <em>echarts</em>.init(document.querySelector("div")) // 初始化echarts实例对象 var... Document <script src="lib/<em>echarts</em>.min.<em>js</em>...将type<em>的</em>值设置为line var mCharts = <em>echarts</em>.init(document.querySelector('div')) var xDataArr = ['1月'
大家好，我是前端实验室的大师兄! echarts 是什么，不用多说了，国内最知名的可视化图表库之一。...而今天要和大家分享的 echarts-for-react ，就是echarts的一个极简的 React 封装。...官方根据Echarts的不同版本，给出了示例： Echarts.js V5： import React from 'react'; // 引入核心库. import ReactEChartsCore from...onChartReady={this.onChartReadyCallback} onEvents={EventsDict} opts={} /> Echarts.js v3 or v4: import...style 包含echarts图表的div的样式，默认是{height: '300px'}. className 包含echarts图表的div的类名.
描述一下今天的业务场景 为了方便维护，在JS里的把html模板和业务逻辑做了分离，在业务逻辑里向模板对象传递指定的data对象返回生成好的html，以往的数据对象是用户交互产生的，今天需要改成从接口拉取...研究了好一会，才发现没考虑异步的问题（JS遇见异步函数，放进执行队列，不等待它执行完成，而直接执行后面的代码）； 数据对象在网络请求没完成的时候，已经开始解析模板了。...若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，获取async函数的返回值可通过await； echarts使用记录 图例（legend）...2.渐变内置生成器echarts.graphic.LinearGradient series: [ { name: '发起申请',...包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色 JS Api 1.Notifications API 接口用于向用户配置和显示桌面通知。
本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制散点图的实现步骤，包括二维和三维。...，所以仅仅通过二维普通图表绘制的方式是无法实现这类图表绘制的，所以就需要我们来扩展eCharts的相关功能，使其能够够结合最新版的ArcGIS JS API来完成地图上这类图表的绘制，eCharts官网也提供了相应的扩展插件...，但这种插件并不能很好地支持我们ArcGIS JS API的高版本，所以我们在这篇文章里直接扩展了一个图层类，下面是具体的实现思路： 实现ArcGIS JS API和eCharts的结合，最最关键的是要实现两个插件库里的坐标系转换...在此处转换坐标时我们使用了eCharts提供的registerCoordinateSystem方法，通过这个方法我们注册了一个名为”arcgis”的坐标系，里面对eCharts中的dataToPoint...总结 本文在上一篇文章的基础之上跟大家介绍了一下使用ArcGIS JS API和eCharts来绘制二维和三维场景下的散点图的过程，为了便于代码组织，这篇文章中的代码是在src目录下新建了一个scatterDiagram
/js/pdfjs/pdf.js"> var url = '.....初步总结如下，常规的附件处理方式，会影响分片下载的效果 场景3：使用php 结合httprange,实现分片的效果 3.1 这里是从网上搜集到的分片下载php 函数 代码的核心是，增加head 头，.../doc/big.pdf'; //分片下载 chunk_download_file($filePath); /** * 分篇下载的汉书 * * @param $file * @param...，支持多段下载 if (!
//JS创建多个下载任务 function Down() { //文件名 var namearr = []; //文件路径 var hrefarr = []; $...(".downs .col-md-4").each(function (index, item) { namearr.push(需要下载的文件名); hrefarr.push...(需要下载的文件路径); }) for (var index = 0; index < hrefarr.length; index++) { download(namearr
/static/xxx.xlsx" download="xxx.xlsx">下载 直接点击可以下载，需要注意的是download属性，当不加download属性时，如果文件格式为txt、pdf、...jpg等浏览器支持直接打开的文件格式，那么不会下载，而是浏览器直接打开；添加download属性之后，就会下载，并且下载文件默认命名为你download属性的值。.../static/xxx.xlsx") window.open("https://download.test.com/postedit/static/xxx.xlsx") 当然，下载的资源可以是本地的，也可以是网上的...3.通过form表单提交的方式（get请求） 动态生成一个form表单，利用表单提交功能实现下载 //url 文件地址 或 接口地址 //data 请求参数：[{key:name,key1:value}...form.appendChild(input) } form.style.display = 'none'; form.method = "GET";//请求方式 form.action = 'url'； //下载文件地址
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。...一、 echarts下载 下载页：http://echarts.baidu.com/download.html ?...var option={}//..图表的配置 myChart.setOption(option); 关于地图图表 需要引用中国区域的js或者使用json初始化地图 下载中国/世界地图的js...或者json 文档：http://echarts.baidu.com/download-map.html 文档底部有js和json的使用示例 ?...JavaScript 引入示例
配合tab切换时，被display:none的元素init设置echarts失败 2018-11-09 18:09:35 现象描述：有一个tabs选项卡，每个切换项A、B中都有使用echarts，默认展示的...检查B的echarts盒子还在且是css中设置的宽高大小。但是内部canvas为空，即图表没有绘制。 找问题过程： 假如我的echarts图表所在元素为：div#echartsDiv。...对比一个父元素没有隐藏的元素，他的宽高就很正常： ? 这样我们就明白了，echarts绘制之前是要获取要绘制区域的宽高的，如果皆为0那肯定失败的。...所以我利用js的方法在js的开端设置了下： let echartsW= $('.echarts-box').width(); $('.echarts-cont').css('width',echartsW...); echarts-box是我存放图标的总的父元素，echarts-cont是我所有图标公用的类名。
html2canvas截图模糊处理： 1 /*图片跨域及截图模糊处理*/ 2 let canvasContent = document.getElementById('canvas'),//需要截图的包裹的...（原生的）DOM 对象 3 width = canvasContent.clientWidth,//canvasContent.offsetWidth || document.body.clientWidth...参数 3 canvas: canvas, //自定义 canvas 4 logging: false, //日志开关，便于查看html2canvas的内部执行流程 5 width...= imgUrl; 7 }else{ 8 return imgUrl; 9 } 10 }); 11 } 调用 1 html('jpg') //只获取base64后的jpg...图片地址 2 html('png',true) //下载png格式的图片功能 仓促记录，待完善和测试
最近用了百度echarts做PPT的图，还是比较方便的，其中有些图标题和标签的字体是可以设置的，示例中可能没说，提供几个参考。...echarts的介绍和具体操作可参考《图表数字化的制作神器》 饼图中如果需要设置标题和标签字体，如下所示， 1...."需求"的字体设置，xAxis和yAxis的axisLabel中可以设置fontSize。 3....图中"1"数字的字体设置，series中增加lable标签，配置textStyle，可以设置fontSize等配置。
本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的迁徙图的实现步骤，包括二维和三维。...概述 上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制，因为这些图表绘制其实是跟地理坐标无关的，只需要设置图表的位置即可，所以仅仅用了纯前端的方式去实现。...，所以就需要我们来扩展eCharts的相关功能，使其能够够结合最新版的ArcGIS JS API来完成地图上这类图表的绘制，eCharts官网也提供了相应的扩展插件，但这种插件并不能很好地支持我们ArcGIS...JS API的高版本，所以我们在这篇文章里直接扩展了一个图层类，下面是具体的实现思路： 实现ArcGIS JS API和eCharts的结合，最最关键的是要实现两个插件库里的坐标系转换，这是重点，只要搞清楚了这一点...总结 本文主要介绍下ArcGIS JS API高版本和eCharts 4版本的结合使用，在这篇文章里最重要的是我们实现了两个图表库中的坐标系转换工作，只要完成了这个步骤，那接下来的绘制其实跟eCharts
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
