最近需要echart同时显示海南岛和南海诸岛，开始想寻找南海诸岛的数据，经过查找，这种简图数据是没有的(china.js地图数据一一找过了)，下图是echarts的一些示例，没有满足我们的要求



    后来在echarts.min.js中通过关键字'南海诸岛'查找到了关键的代码，echarts在地图名为china时，加入南海诸岛数据，然后经过坐标变换（先设置缩放比率再平移到指定点）展示到echart地图中。

    要想海南岛地图和南海诸岛简图显示到一起并不复杂。总共只要改四个参数就好了。
首先要修改左上角位置点，原先的源码设置[126, 25],要想修改靠近海南岛需要把这两个数值改小点[110.5, 18.5]。然后，修改hA[cA][dA][0] /= 300, hA[cA][dA][1] /= -300,这里的参数是设置缩放比率的。


    echarts.js和echarts.min.js的修改略有不同，原因还不太清楚
附:https://github.com/tpolong/echartshn

Echarts 南海诸岛简图显示位置调整的更多相关文章

  1. 关于echarts中南海诸岛的显示问题

    1.china.js 文件中  echarts.registerMap('china',    //名字要是'china',不能写成'中国'   2.echarts 配置中地图名称 mapName: ...

  2. echarts之字符云tooltip显示混乱问题的解决办法

    echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...

  3. Echarts饼图更改颜色、显示数据且换行

    var option = {   title : {       text: '数据来源',       x:'center'   },   tooltip : {       trigger: 'i ...

  4. echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  5. Echarts 的悬浮框tooltip显示自定义格式化

    最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...

  6. echarts x轴坐标文字显示不全

    在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻 ...

  7. Echarts按需引入后没有显示图例问题

    因为Echarts官网的例子都是引入整个Echarts.js.如果使用按需引入对应模块就要记得引入legend模块,才能显示出图例. 例如这样: require("echarts/lib/c ...

  8. echarts自定义悬浮框的显示

    最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...

  9. echarts Map(地图) 不同颜色区块显示

    以河南地图为例: 代码如下: <h3>天翼日必达完成率</h3> <div id="map" style="height:340px; te ...

随机推荐

  1. C++ 模板基础

    我们学习使用C++,肯定都要了解模板这个概念.就我自己的理解,模板其实就是为复用而生,模板就是实现代码复用机制的一种工具,它可以实现类型参数化,即把类型定义为参数:进而实现了真正的代码可重用性.模版可 ...

  2. java.util.BitSet 详细分析 学习笔记

    1,BitSet类    大小可动态改变, 取值为true或false的位集合.用于表示一组布尔标志.   此类实现了一个按需增长的位向量.位 set 的每个组件都有一个 boolean 值.用非负的 ...

  3. Scrapy 1.4 文档 02 安装指南

    安装 Scrapy Scrapy 运行在 Python 2.7 和 Python 3.3 或更高版本上. 如果您使用的是 Anaconda 或 Miniconda,则可以从 conda-forge 通 ...

  4. js术语扫盲贴：XHR、RegExp、call-apply、prototype

    (1) XHR:xml httprequestXHR注入:XHR 注入技术是通过XMLHttpRest来获取javascript的.但与eval不同的是,该机制是通过创建一个script的DOM元素, ...

  5. Loadrunner 11 中Run-Time Setting详细参数说明

    .General/Run Logic :用来设置运行脚本迭代的次数,迭代次数只对run部分的脚本迭代次数有影响,对init和End部分无印象.一般设置未1~3次,只会影响在单位时间内客户端想服务器提交 ...

  6. python如何优雅的打飞机

    这是一个打飞机的游戏,结构如下:     其中images中包含的素材为   命名为alien.png   命名为ship.png 游戏效果运行是这样的:     敌军,也就是体型稍微大点的,在上方左 ...

  7. VMware下对Ubuntu进行扩充磁盘大小

    今天用虚拟机的时候,发现虚拟机快满了,提示磁盘空间小,不得不扩充虚拟机空间.经过百度搜索,终于搞定了,记录如下 平台:VMware(10.0.3)+Ubuntu 14.04(32bit) 1.选择VM ...

  8. HTML5 & MUI 界面样式

    垂直居中+自动换行 样式效果如下所示,当文字没有超出一行时,显示如“备注信息”,当文字超出一行时,显示如“维修地点” HTML代码如下: <div class="mui-input-r ...

  9. 【bzoj 3306】树

    Description 给定一棵大小为 n 的有根点权树,支持以下操作:  • 换根  • 修改点权      • 查询子树最小值 Input 第一行两个整数 n, Q ,分别表示树的大小和操作数.  ...

  10. bzoj 4501 旅行

    01分数规划+最大权闭合子图 倒拓扑序处理每个节点 $$f[x]=\frac{\sum{f[v]}}{n}+1$$ 二分答案$val$ 只需要判断是否存在$\sum{f[v]}+1-val>0$ ...