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 点亮中国插件研究的更多相关文章
-
使用echarts简单制作中国地图,echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
-
用echarts.js制作中国地图,点击对应的省市链接到指定页面
这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...
-
react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
-
Unity3d插件研究之Easytouch
但我们开发移动端的游戏时,发现使用Input.GetMouseButtonDown的方法不可用,怎么办? 虽然unity3d也有自带触屏的方法,但是使用起来代价太高,什么单击,双击这些功能都要自己封装 ...
-
16、vue引入echarts,划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
-
Unity插件研究-EasyTouch V5
抽空研究了下Easy Touch 5插件,发现确实很好用,下面是相应的用法: 1. Easy Touch Controls:实现虚拟摇杆的组件 在项目的"Hierarchy"窗口下 ...
-
echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。
解决方法:ZeroClipboard.js先于echarts.js加载.
-
有关信息ACM/ICPC竞争环境GCC/G++叠插件研究记录的扩展
0.起因 有时.DFS总是比BFS受人喜爱--毕竟DFS简单粗暴,更,而有些东西BFS不要启动,DFS它似乎是一个可行的选择-- 但是有一个问题,DFS默认直接写入到系统堆栈.系统堆栈和足够浅,此时O ...
-
echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
随机推荐
-
Nexus3.0.0+Maven的使用(三)
这章主要讲怎么和Maven做集成,集成的方式主要分以下种情况:代理*仓库.Snapshot包的管理.Release包的管理.第三方Jar上传到Nexus上 1 代理*仓库 只要在PMO文件中配置 ...
-
B树系列
参见 http://blog.csdn.net/quitepig/article/details/8041308
-
centos6.6安装配置jboss7.1.1
Centos6.6下安装配置Jboss7.1.1 在了解jboss牛逼特性之后,我决定安装下jboss7.1.1试试 下面是安装包百度云盘链接: http://pan.baidu.com/s/1o6O ...
-
bzoj:1584: [Usaco2009 Mar]Cleaning Up 打扫卫生
Description 有N头奶牛,每头那牛都有一个标号Pi,1 <= Pi <= M <= N <= 40000.现在Farmer John要把这些奶牛分成若干段,定义每段的 ...
-
Beta冲刺 总结
Beta冲刺 总结 1. 完成情况 经过了为其七天的beta冲刺,我们基本完成了之前在<beta开始前准备>博客中所列出的内容. 增加关于征信的功能,贴近选题主题.在学生的信用活动记录中添 ...
-
Linux下/proc目录的作用
文章是摘抄过来,方便自己查阅! 1. /proc目录 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在 ...
-
剑指Offer (汇总)
刷完剑指Offer很久了,前几天想起来去年开通的博客园,正好把刷题笔记整理一下 刷题平台:牛客网 刷题语言:Python **链表(8道)** [剑指Offer 3. 从尾到头打印链表 (链表)](h ...
-
Linux系统调用:进程的终止
之前总结了Linux的系统创建,主要是fork()函数和vfork()函数,最近总结了Linux进程的终止,主要的调用是_exit()和exit(). 先看看两个函数的原型以及各自属于的头文件,可以发 ...
-
webpack学习笔记——--save-dev和--save
--save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西. dependencies是运行时(发布后)依赖,devDependencies是开发时的依赖 比如,你写 ES6 ...
-
[UE4]角度和弧度
1角度 = 一个圆周的1/360 1弧度 = 长度为半径的弧,其所对的圆心角