echarts 真的是个神奇的东西,最近做了一个需要点亮中国的移动端项目,前期就怎样点亮中国做了调研,发现微博当初炫酷的点亮效果就是用echarts做的,于是研究了一下。

一连研究了一堆demo,不管从官网还是GitHub上面,大多demo的数据都是自己的格式,于是乎根据API自己研究了一下,把demo和最终结果整理了一下。

网盘:https://pan.baidu.com/s/15ndzg5xjm0yqNL-6pi6SsQ 密码:idub

demo效果:

项目效果:

看上去效果不同是由于底色和数据量不同造成的。

一闪一闪的效果是由css3的循环显示隐藏制作 ,2个canvas,下面那个为地图背景,上面的是城市的点。

emmm,具体API我就不分析了,参考echarts官网:http://echarts.baidu.com/

还有就是data数据里有一串代码:

{
name: '',
// type: 'effectScatter',
type: 'scatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
rippleEffect: {
period: "5",
scale: "7",
brushType: 'stroke',
//brushType: 'fill',
},
data: [{
"value": ["123.50", "26.03", "1"]
}, {
"value": ["123.0", "25.93", "1"]
}, {
"value": ["122.8", "25.73", "1"]
}, {
"value": ["121.4", "22.33", "1"]
}, {
"value": ["119.55", "23.28", "1"]
}],
symbolSize: 2,
itemStyle: {
normal: {
color: '#3a9cbd' // 数据点颜色
}
}
}

这是客户要求加的南海的几个岛屿,echarts的china文件里没带,我就自己加上了。上面的gif图是项目做一半的时候录的 那时候还没有加上,请参考最终demo。

echarts 点亮中国插件研究的更多相关文章

  1. 使用echarts简单制作中国地图,echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  2. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

    这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...

  3. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  4. Unity3d插件研究之Easytouch

    但我们开发移动端的游戏时,发现使用Input.GetMouseButtonDown的方法不可用,怎么办? 虽然unity3d也有自带触屏的方法,但是使用起来代价太高,什么单击,双击这些功能都要自己封装 ...

  5. 16、vue引入echarts,划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  6. Unity插件研究-EasyTouch V5

    抽空研究了下Easy Touch 5插件,发现确实很好用,下面是相应的用法: 1. Easy Touch Controls:实现虚拟摇杆的组件 在项目的"Hierarchy"窗口下 ...

  7. echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  8. 有关信息ACM/ICPC竞争环境GCC/G++叠插件研究记录的扩展

    0.起因 有时.DFS总是比BFS受人喜爱--毕竟DFS简单粗暴,更,而有些东西BFS不要启动,DFS它似乎是一个可行的选择-- 但是有一个问题,DFS默认直接写入到系统堆栈.系统堆栈和足够浅,此时O ...

  9. echarts.js制作中国地图

    一.准备 1.  打开sublime,新建一个echarts文件夹,新建echarts.html文件 2.  在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...

随机推荐

  1. spring-security(2)

    记录一下spring security的配置 配置详解 <?xml version="1.0" encoding="UTF-8"?> <bea ...

  2. Spring配置项<context:annotation-config>的解释说明

    今天在闲逛CSDN论坛时,看到一位博主写的一篇关于<Spring中IOC的Annotation的实现>的文章, 于是点击进去看了下, 发现在说明中对Spring配置文件中的有些配置节点模凌 ...

  3. Sublime Text 3快捷键汇总

    转自:http://blog.sina.com.cn/s/blog_73c5cfbe0101ldj8.html Sublime Text 3非常实用,但是想要用好,一些快捷键不可或缺,所以转了这个快捷 ...

  4. spring定时任务的注解实现方式

    STEP 1:在spring配置文件中添加相应配置,以支持定时任务的注解实现 (一)在xml里加入task的命名空间 <!-- beans里添加:--> xmlns:task=" ...

  5. 【JXOI2018】排序问题 贪心

    我们令$sum_i$表示数字i在加完数字的数列中出现的次数,那么答案显然为$\dfrac{(n+m)!}{\sum_{i=0}^{\infty}sum_i!}$ 不难发现,当每次添加的数为$[l,r] ...

  6. 剑指offer二十三之二叉搜索树的后序遍历序列

    一.题目 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 二.思路 1.二叉搜索树又称二叉排序树(Binar ...

  7. thinkphp 实现rabbitMq常驻进程消费队列

    1,项目一级目录新建一个server文件 #!/usr/bin/env php <?php try { require __DIR__ . "/start.php"; } c ...

  8. php 数字 的简单加解密

    转载 <?php /** * 加密解密类 * 该算法仅支持加密数字.比较适用于数据库中id字段的加密解密,以及根据数字显示url的加密. * @author 深秋的竹子 * @email 812 ...

  9. 计算机硬件的五大单元 & CPU的种类 & 计算机的运行流程

    不多说,直接上干货! 计算机硬件的五大单元 关于计算机的组成部分,其实你可以观察你的桌面计算机分析一下,依外观来说这家伙主要分为三部分: 输入单元:包括键盘.鼠标.卡片阅读机.扫描仪.手写板.触摸屏幕 ...

  10. WordPress主题制作导航的N种方法

    在WordPress主 题制作中,导航菜单的制作算是一个重点,已经写好导航菜单的HTML代码,放在WordPress主题中如何动态调用呢?本文将给你介绍几种编写PHP代 码动态实现导航的方法,本文也将 ...