提取 ECharts 中的svg地图信息

地图的需求还是蛮大的，全国都要自己画的话，还是需要投入比较大的人力。

ECharts中有地图，那我们能不能把里面的地图文件提取出来呢，主要逻辑在map.js中。

看源代码发现，ECharts中地图信息，通过算法，把坐标信息，转换成基准[x,y]和坐标数组，再通过String.fromCharCode坐标数组转换成字符()，进行存储

这也是一种大量数字数据，前端压缩，编码的好办法。

ECharts的使用的这种方式，灵活性更高，可以修改图像的偏移，放大倍数。

而在项目中，使用的方式，可以通过viewBox完成，但是图像偏移就没有简便方法实现了

　　代码大部分都是ECharts内部代码，把用到的整理出来，通过raphael把地图显示出来，地址戳这里。

　　上个效果图

时间： 2024-08-30 15:55:55

提取 ECharts 中的svg地图信息的相关文章

提取代码中的部分代码字段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【ECharts】SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

1导入包,搭建SSH框架. 导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> 前提你的SSH已经搭好了,数据已经传递到了Struts层. 2在Action层,将数据封装成J

HTML5中的SVG

* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名为".svg" * SVG使用的是XML语法 * 概念 * SVG是一种使用XML技术描述二维图形的语言 * SVG的特点 * SVG绘制图形可以被搜索引擎抓取 * SVG在图片质量不下降的情况下,被放大 * SVG与Canvas的区别 * SVG * 不依赖分辨率 * 支持事件绑定 *

使用crash提取vmcore中预分析信息

一.介绍在linux系统内核发生崩溃或者服务器hang住时,Kdump(kernel crash dump:内核崩溃转储设备)生成vmcore文件,通过分析vmcore信息判断原因,而 crash是一个被广泛应用的内核奔溃转储文件分析工具,前提系统必须安装crash工具和内核调试工具kernel-debuginfo. 二.工具的安装与调试 1.安装包的版本,要与linux内核一致,查看linux内核版本: #uname -a 2.安装.配置.启动kdump: 安装kdump:

【前端】提取URL中的各个GET参数

1 /**************************** 2 * 有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e, 3 * 请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定), 4 * 将其按key-value形式返回到一个json结构中, 5 * 如{a:'1', b:'2', c:'', d:'xxx', e:undefined}. 6 ******************

python提取字符串中数字

题目:[这是一个复杂问题的简化]如下是一个字符串列表,提取字符串中第二个数字,并判断是否大于1000,如果是,从列表中删除这一行. 1000\t1002\n .....[省略].... 代码: <pre name="code" class="python">oldStr = "1000\t1002\n" newStr = oldStr #匹配目标数字左侧字符串 t=newStr.index("\t") newStr

echarts中的option.legend.data has not been defined.

1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec) { var mapChart = ec.init(document.getElementById('mapDataChart')); var option = { title : { text: '', x : 'center', y : 'top' }, tooltip : { trigger

echarts中视觉映射器（visualMap）与时间轴（timeline）混用的实现方法

1.简述 echarts中的 timeline 组件,提供了在多个 ECharts option 间进行切换.播放等操作的功能. 与其他组件些不同,它需要操作『多个option』. 所以除了基准的baseOption外,我们还需要设置一个原子option和多个原子option的复合option. 2. baseOption实现方式如下(以石家庄市地图为例): var mapDataByAreaTest = [ //各区域初始值 {name: '长安区', value: 12}, {name: '

爬虫(四)：正则表达式(提取str中网址)

3.采用beatifulsoup与re正则表达式一起使,提取html中的一些href的链接 http://cuiqingcai.com/1319.html 4.如何利用正则表达式边界匹配