Echarts的使用和学习心得体会
2016-04-28 13:16
447 查看
因为项目的原因,最近学习了Echarts插件,在开发过程中碰见许多的问题。问题大多数都是些无足轻重的,在这里主要是想把自己在学习期间的心得感悟写出来,以便大家参考和学习。
一、Echarts的下载方式
百度有两处下载地方,并有与之对应的API文档和实例等。
1.echarts.min.js
下载地址:http://echarts.baidu.com/download.html 如下图:
可以根据自身需求选择不同的版本,因为后期的升级等,我下载的是完整版。
2.echarts.js/echarts-all.js
下载地址:http://echarts.baidu.com/echarts2/doc/example.html 如下图:
这个可以根据个人的喜好和习惯去下载不同的版本,我在使用的时候,用的是echarts-2.2.7(from baidu)这个版本的。
二、Echarts的使用心得体会
在使用的时候,直接引入echarts的JS库文件即可,引入的方法就不说了,大家可自行百度。下面说说初学Echarts时,可能会走的一些误区。
1、只看实例,忽略API文档
所谓无规矩,不方圆。虽然实例看起来很快就能上手,但要运用流畅还是要多研究API文档,因为文档会把所有的组件和属性都一一注明。先看文档,了解大致的术语和使用方法,再去看实例,学习的效率比起只看实例要事半功倍。
2、对应版本,对应各自的文档
因为是两个种JS库文件,因此在学习和使用时根据相对应的API文档去学习和查看。比如:在echarts.min.js和echarts-all.js对应的文档中,对toolbox组件内的图标颜色定义的方式是不同的。
在echarts.min.js对应的文档中,toolbox组件中的图标颜色定义如下代码:
默认是灰色的,点击后变成蓝色。对应的效果图如下:
而在echarts-all.js对应的文档中,对图标的颜色定义则是如下代码:
color属性可以是一个数组,当有几个图标时,数据内依次定义几个所需的颜色值,其在页面渲染时会自动根据顺序渲染。
3、不明白时,反复研究文档和实例。
所谓勤能补拙,多练习几次,就会明白真谛。虽然道理每个人都懂,但真的实施起来,却不见得每个人都能成功。因此,练习的次数是很重要的。
4、成功克服困难 = 忍受寂寞 + 反复思考
成功其实就像沙漠中的绿洲,看似近在眼前,其实相差甚远。在到达成功的彼岸之前,要学会忍受寂寞,要善于反复思考问题,然后不断的总结。在笔者看来,无论做任何事,模式都是差不多的。要想成功克服困难,就要能耐得住寂寞,在反复的思考与总结中,取得胜利的果实。
三、WeX5使用时的一个小细节问题。
在使用WeX5开发工具时,引入其他的JS库时,当复制粘贴到自己的项目后,JS库文件报错出红色叉号时,如下情况:
解决的办法是屏蔽到Wex5对JS文件的默认方式。操作步骤如下:
鼠标右键UI2——选择属性——JSHint:
点击第二栏的Add按钮,出现如下界面:
修改Files matching文本框内的内容为* ,然后确定,在最后应用确定即可解决问题。
以上即为自己最近的学习心得和体会,感兴趣的朋友可以一起相互学习和交流,大家一同成长。QQ:530727668,随时欢迎交流。
(PS: 以上是临时兴起总结,如有不当的地方,还请各位不吝赐教,指出不足,笔者也会及时加备注更正,提前感谢。)
——写于2016年4月28日
一、Echarts的下载方式
百度有两处下载地方,并有与之对应的API文档和实例等。
1.echarts.min.js
下载地址:http://echarts.baidu.com/download.html 如下图:
可以根据自身需求选择不同的版本,因为后期的升级等,我下载的是完整版。
2.echarts.js/echarts-all.js
下载地址:http://echarts.baidu.com/echarts2/doc/example.html 如下图:
这个可以根据个人的喜好和习惯去下载不同的版本,我在使用的时候,用的是echarts-2.2.7(from baidu)这个版本的。
二、Echarts的使用心得体会
在使用的时候,直接引入echarts的JS库文件即可,引入的方法就不说了,大家可自行百度。下面说说初学Echarts时,可能会走的一些误区。
1、只看实例,忽略API文档
所谓无规矩,不方圆。虽然实例看起来很快就能上手,但要运用流畅还是要多研究API文档,因为文档会把所有的组件和属性都一一注明。先看文档,了解大致的术语和使用方法,再去看实例,学习的效率比起只看实例要事半功倍。
2、对应版本,对应各自的文档
因为是两个种JS库文件,因此在学习和使用时根据相对应的API文档去学习和查看。比如:在echarts.min.js和echarts-all.js对应的文档中,对toolbox组件内的图标颜色定义的方式是不同的。
在echarts.min.js对应的文档中,toolbox组件中的图标颜色定义如下代码:
默认是灰色的,点击后变成蓝色。对应的效果图如下:
而在echarts-all.js对应的文档中,对图标的颜色定义则是如下代码:
color属性可以是一个数组,当有几个图标时,数据内依次定义几个所需的颜色值,其在页面渲染时会自动根据顺序渲染。
3、不明白时,反复研究文档和实例。
所谓勤能补拙,多练习几次,就会明白真谛。虽然道理每个人都懂,但真的实施起来,却不见得每个人都能成功。因此,练习的次数是很重要的。
4、成功克服困难 = 忍受寂寞 + 反复思考
成功其实就像沙漠中的绿洲,看似近在眼前,其实相差甚远。在到达成功的彼岸之前,要学会忍受寂寞,要善于反复思考问题,然后不断的总结。在笔者看来,无论做任何事,模式都是差不多的。要想成功克服困难,就要能耐得住寂寞,在反复的思考与总结中,取得胜利的果实。
三、WeX5使用时的一个小细节问题。
在使用WeX5开发工具时,引入其他的JS库时,当复制粘贴到自己的项目后,JS库文件报错出红色叉号时,如下情况:
解决的办法是屏蔽到Wex5对JS文件的默认方式。操作步骤如下:
鼠标右键UI2——选择属性——JSHint:
点击第二栏的Add按钮,出现如下界面:
修改Files matching文本框内的内容为* ,然后确定,在最后应用确定即可解决问题。
以上即为自己最近的学习心得和体会,感兴趣的朋友可以一起相互学习和交流,大家一同成长。QQ:530727668,随时欢迎交流。
(PS: 以上是临时兴起总结,如有不当的地方,还请各位不吝赐教,指出不足,笔者也会及时加备注更正,提前感谢。)
——写于2016年4月28日
相关文章推荐
- 用Flash制作的站长工具箱Webmaster Toolbox
- ECharts仪表盘实例代码(附源码下载)
- Ajax获取到数据放入echarts里不显示的原因分析及解决办法
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- echarts图表导出excel示例
- 苹果App,不用上传苹果商店,也能让其他人安装
- 泡WeX5论坛,就能把钱给挣了! WeX5论坛 金币制启动 -- 让大家帮助大家,让知识变成收益
- Canvas和SVG的区别
- 解决ajax获取到数据放到echarts里不显示问题
- Intel SSD ToolBox自动优化SSD回写盘
- H5 APP开发必读,20个你不知道的Html5新特征和窍门
- 开发APP不搞清楚这20个问题,必然沦为一场灾难
- leaflet-echarts,使用leaflet加载echarts制作超炫可视化地图
- echarts 多个图形resize时的问题
- ECharts初使用,从后台得到数据源
- Convert shp to geoJSON,for ECharts.
- 基于ECharts报表开发
- echarts简单使用
- Spring 组合Echart.js