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数据里有一串代码:

  1. {
  2. name: '',
  3. // type: 'effectScatter',
  4. type: 'scatter',
  5. coordinateSystem: 'geo',
  6. showEffectOn: 'render',
  7. rippleEffect: {
  8. period: "5",
  9. scale: "7",
  10. brushType: 'stroke',
  11. //brushType: 'fill',
  12. },
  13. data: [{
  14. "value": ["123.50", "26.03", "1"]
  15. }, {
  16. "value": ["123.0", "25.93", "1"]
  17. }, {
  18. "value": ["122.8", "25.73", "1"]
  19. }, {
  20. "value": ["121.4", "22.33", "1"]
  21. }, {
  22. "value": ["119.55", "23.28", "1"]
  23. }],
  24. symbolSize: 2,
  25. itemStyle: {
  26. normal: {
  27. color: '#3a9cbd' // 数据点颜色
  28. }
  29. }
  30. }

这是客户要求加的南海的几个岛屿,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. HTML+Javascript制作拼图小游戏详解(终)

    上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...

  2. Python小白学习之路(十二)—【前向引用】【风湿理论】

    前向引用 风湿理论(函数即变量) 理论总是很抽象,我个人理解: 代码从上到下执行,一旦遇到定义的函数体,内存便为其开辟空间,并用该函数的名字作为一个标识但是该函数体内具体是什么内容,这个时候并不着急去 ...

  3. zabbix数据库表结构解析

     下面开始介绍: 1.添加监控表结构详解 (1)hosts,存储被监控的机器的信息,表结构如下: (2)items (3)hosts_templates,存储机器和模版或者模版和模版之间的关系 由于模 ...

  4. Spring Security构建Rest服务-1401-权限表达式

    Spring Security 的权限表达式 用法,在自定义的BrowserSecurityConfig extends WebSecurityConfigurerAdapter 配置文件里,每一个a ...

  5. IE6基本bug

    一.IE6双倍边距bug当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析 ...

  6. Python虚拟环境中pip install时没有权限问题

    virtualenv Permission denied 新建的python虚拟环境的目录的所属者必须是当前用户,才不会出现这种错误 比如 virtualenv py27 sudo chown zzf ...

  7. tensorflow VocabularyProcessor

    from tensorflow.contrib import learn import numpy as np vocab_process = learn.preprocessing.Vocabula ...

  8. mysql时间字符串按年/月/天/时分组查询 -- date_format

    SELECT DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * ) FROM test GROUP BY DATE_FORMAT( ...

  9. redis High Availability---Redis Sentinel翻译

    注意,本文档为最新(11月21日),旧版本的可以参考:http://redis.io/topics/sentinel-old 不鼓励使用旧版本的文档. Redis Sentinel是一个用来管理Red ...

  10. 如何学习JavaEE,项目又该如何做?

    本文主要分为三个部分: 如何学习java基础 如何学习javaEE 你关心的项目问题 01 java基础学习 建议初学者看视频学习,不推荐看书.入门视频选择非常重要,最好是通俗易懂.深入浅出的教学视频 ...