最近需要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. linux中普通的文件查看操作（cat、more、less、head、tail）

    cat:基本是最常用的查看文件内容的linux命令. more 也是用来查看一个文件的内容.当文件内容太多,一屏幕不能占下,而你用cat肯定是看不前面的内容的,那么使用more就可以解决这个问题了.当 ...

  2. Redis数据过期和淘汰策略详解(转)

    原文地址:https://yq.aliyun.com/articles/257459# 背景 Redis作为一个高性能的内存NoSQL数据库,其容量受到最大内存限制的限制. 用户在使用Redis时,除 ...

  3. idea 和 eclipse 常用快捷键汇总

    序号 所属类别 快捷键名称 快键键方式 备注 所属平台 1 查询类 search everywhere double shift    idea 2 全文搜索 ctrl + H   通用 3 打开资源 ...

  4. CKEditor、UBB编辑器的使用总结

    2018-04-08 22:07:16.188 ERROR 14728 --- [nio-8082-exec-8] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Se ...

  5. 唱吧DevOps的落地，微服务CI/CD的范本技术解读----最大的难点并不是实际业务代码的编写，而是服务的监控和调试以及容器的编排

    1.业务架构:从单体式到微服务 K歌亭是唱吧的一条新业务线,旨在提供线下便捷的快餐式K歌方式,用户可以在一个电话亭大小的空间里完成K歌体验.K歌亭在客户端有VOD.微信和Web共三个交互入口,业务复杂 ...

  6. salesforce lightning零基础学习(四) 事件（component events）简单介绍

    lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按 ...

  7. 配置phpstorm自动上传代码

    本地的项目目录是 D:\www\guandan 虚拟机上的项目目录是 /var/www/guandan

  8. Eclipse报错Resource '/.org.eclipse.jdt.core.external.folders/.link5' already exists.

    Eclipse查看源码出现source not found,重新Build Path选择jdk的jar包时,出现Resource '/.org.eclipse.jdt.core.external.fo ...

  9. JS for循环有关变量类型的问题/魔兽世界样式的tooltip

    <script> var num = 100; for (var i=num-5;i<num+5;i++){ // console.log(typeof(i)); console.l ...

  10. 20个大大节省你时间的HTML5开发工具

    Rendera 如果你希望有个环境可以测试.浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果.类似 RunJS. Patternizer ...