发表于： 2017-04-08 20:18:49
2 1108
小课堂----echarts图表插件
1.背景介绍
ECharts来自百度EFE数据可视化团队①，是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上， 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
2.知识剖析
如何使用echarts创建图表
- 直接使用script标签引入echarts.js
- 创建一个有宽高和id的盒子
- 把盒子DOM初始化为图表的实例
var myChart=echarts.init() - 定义这个图标实例的配置②var myOption={};
- 把配置指定给图标实例mychart.setOption(myOption)
配置----一个chart的组成部分③
- 标题：说明这是对哪些数据的统计--title
- 图例：每个颜色代表的项目--legent
- 说明：（数据来源，越大/小越好）title
- 数据：把数据可视化--series
- 坐标轴--Axis
3.常见问题
何时添加数据
数据从何来
如何展示出来
如何改变默认的各项数据的颜色
4.解决方案
何时添加数据
数据从何来
如何展示出来----series.data详解
改变图表默认颜色--series.color
series④
- 不同的类型有不同的配置
- 必要的选项：type,name,data
- data的写法：二维数组
5.编码实战：图表--新增线上学员职业分布
- 步骤
- 配置
- 数据
6.扩展思考
什么是直角坐标系和极坐标系，各自适合那些用途?
echarts性能如何？
与其它图标插件对比，有哪些优缺点？⑤
7.参考文献
2. http://echarts.baidu.com/option.html#title
3.http://www.51edu.com/it/bgyy/103109.html
4. http://echarts.baidu.com/option.html#series
5. http://sc.chinaz.com/info/150621096824.htm
链接稍后。
8.更多讨论
历史天气：通过开源的天气数据库接口，绘制天气数据并展示成折线图
谢谢观看
Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status He
视频链接：http://v.qq.com/u/videos/#video
ppt链接：https://ptteng.github.io/PPT/PPT/js-11-introductionOfEcharts.html#/
demo链接：https://github.com/ptteng/PPT/tree/master/demo/js-11-introductionOfEcharts
文本链接：http://jnshu.com/daily/19908?uid=6039
今日完成:
1 日常任务，回复日报，复习相关知识。小课堂--echarts图标插件。
2 进行了一点任务10的要求。
明日计划：
1 日常任务：回复日报，复习相关；上传小课堂。
2任务10，完成控制器的部分逻辑，开始富文本编辑器。
问题：收获：
尽快完成任务10，然后申请做项目。还有很多要学的。
返回列表
评论