最近需要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. PHP开发基础知识

    PHP的学习 PHP脚本以<?php 开始 ?>结束 <?php //此处写代码 ? > php默认文件扩展名.php php文件通常包含HTML标签以及一些PHP脚本代码 “ ...

  2. SSM-SpringMVC-12：SpringMVC中BeanNameViewResolver这种视图解析器

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 视图解析器,这个很熟悉啊,之间就用过,就是可以简写/和.jsp的InternalResourceViewRes ...

  3. Linux时间子系统之（十三）：Tick Device layer综述

    专题文档汇总目录 Notes:从概念层次描述了tick-comm.oneshot tick.broadcast tick:重点介绍了tick和tickless概念及其区别,两种tick device: ...

  4. Ubuntu物理机中解决VirtualBox虚拟机无法连接USB设备的问题

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=611 问题描述: 在安装完VirtualBox的USB控制器扩展(关于在VirtualBox中安装USB控制器扩展的 ...

  5. mysql查询当天所有数据sql语句

    mysql查询当天的所有信息: select * from test where year(regdate)=year(now()) and month(regdate)=month(now()) a ...

  6. LoadRunner Mysql性能优化

    原文:https://blog.csdn.net/u011910905/article/details/49863787 一.查询与索引优化分析 1.show命令: show engines; 显示存 ...

  7. zookeeper 配置文件conf目录下 zoo文件 配置详解

    clientPort:客户端尝试连接server的端口号 (对外服务端口) 通常为2181 dataDir:存放快照文件snapshot的目录.(储存数据的目录) dataLogDir:事务日志存放位 ...

  8. Guava新增集合类型-Multimap

    Guava新增集合类型-Multimap 在日常的开发工作中,我们有的时候需要构造像Map<K, List<V>>或者Map<K, Set<V>>这样比 ...

  9. BZOJ_3173_[Tjoi2013]最长上升子序列_splay

    BZOJ_3173_[Tjoi2013]最长上升子序列_splay Description 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数 ...

  10. CentOS7防火墙管理firewalld

    学习apache安装的时候需要打开80端口,由于centos 7版本以后默认使用firewalld后,网上关于iptables的设置方法已经不管用了,想着反正iptable也不太熟悉,索性直接搬官方文 ...