百度 echarts 数据图形渲染技术学习指南

所需积分/C币:48 2016-10-08 01:53:37 1023KB PDF
108
收藏 收藏
举报

基于h5的图形化技术
The ECharts Learn Book animation Duration 4.22 animationeasing 4.23 animation Duration Update 4.24 animationEasingUpdate 4.25 Practice makes perfect The ECharts Learn Book My Awesome Book This book is just record some learning things for myself Introduction The ECharts Learn Book The characteristic of chart 官网介绍: ECharts,一个纯 Javascript的图表库,可以流畅的运行在PC和移动设各上,兼容当前 绝大部分浏览器(E89/10/11, Chrome, Firefox, Safari等),底层依赖轻量级的 Canvas类库 REnder,提供直观,生动,可交互,可高度个性化定制的数据可视化图 表。 ECharts3中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动 端做了深度的优化 丰富的图表类型: ECharts提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用 于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图, treemap,多 维数据可视化的平行坐标,还有用于B|的漏斗图,仪表盘,并且支持图与图之间的混 搭 你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌 包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构 建 多个坐标系的支持 ECharts3开始独立出了“坐标系”的概念,支持了直角坐标系( catesian,同grd)、极 坐标系(poar)、地理坐标系(geo)。图表可以跨坐标系存在,例如折、柱、散点等 图可以放在直角坐标系上,也可以放在极坐标系上,甚至可以放在地理坐标系中。 这里有很多例子可以"眼见为快 The characteristic of chart The ECharts Learn Book How to use it easily ·首先,在下载页面下载js文件 ·然后可以准备一个htm页面 Like this <I doctype html> <html> <header> <meta char set=utf-8> <!--引入 ECharts文件--> <script src=echarts min ]s ></script> s/html> 我觉得is文件引人还是应该按高性能编程那样,放 在</body>前面 <I dOCTYPE html> <html sheader> <meta charset=utf-8> </header> 1人 ts文件 <script src=echarts minjs ></script> </bod s/html> 这是一个简单的例子: How to use it easily The ECharts Learn Book <i doctype html> <html <header> <meta char set=utf-8 </header> <!--为 ECharts准备一个貝各大小(宽高)的Dom--> <div id="main"style="width: 600px; height: 400px;></div> <!--引入 ECharts文件 <script src=1s/echarts min js></script> <script type=text/javascript> /基于准备好的dom,初始化 echarts实例 var my Chart echarts init(document. getElementById( main)) ′指定图表的配置项和数据 var options =f titl text:' ECharts w门示例 ip:{} legend: i data:['销量'] XAX⊥S data:['衬衫','羊毛衫','雪纺衫','裤子',"高跟鞋','袜子'] s:{} series: [i name:'销量' ar data:[5,20,36,10,10,20] /使用刚指定的配置项和数据显示图表 my Chart. setoption(options </script> </html> 这是图表效果: How to use it easily The ECharts Learn Book ECharts入门示例 销量 30 20 衬衫 羊毛衫 至纺衫 高跟鞋 袜子 How to use it easily The ECharts Learn Book Learn The APl Firstly 我们先来学习官网的AP Learn The API Firstly The ECharts Learn Book echarts对象 这是一个全局对象,由之前加裁的 echarts. js创建的,在AMD环境下用 Irequire( echarts")获取。 我们先来打印这个 echarts对象看看 会发现它有这些属性和方法 connect: (t) dependencies: object disconnect: (t) dispose: (t) extendchartview:(t) extendcomponen tModel:(t) extendComponentView: (t) extendseriesModel: (t) format: object getInstanceBy Dom: (t) getInstanceById: (t) getMap:(t graphic: object init:(t,eri roadMap: () number: object registerAction: (t,er i) registercoordinateSystem:(t,e registerLayout: (t) registerMap: (t,e, 1) registerPreprocessor:(t) register processor:(t,e) register Theme:(t, e) registerVisualCoding: (t e) setcanvasCreator: (t) util: object version: 3.0.2 object init:创建一个 ECharts示例,返回 echartsInstance,不能再单个容器上初始化多个 ECharts实例 (dom: HTMLDivElement HTMLCanvasElement, theme?: object string, opts?: devicepixelRatio?: number renderer?: string · connect:这个方法是2个 echarts:实例链接成依赖关系。 echarts. connect([ chart1 echarts

...展开详情
试读 70P 百度 echarts 数据图形渲染技术学习指南
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 领英

  • GitHub

  • 脉脉勋章

  • 签到王者

  • 技术圈认证

关注 私信
上传资源赚钱or赚积分
最新推荐
百度 echarts 数据图形渲染技术学习指南 48积分/C币 立即下载
1/70
百度 echarts 数据图形渲染技术学习指南第1页
百度 echarts 数据图形渲染技术学习指南第2页
百度 echarts 数据图形渲染技术学习指南第3页
百度 echarts 数据图形渲染技术学习指南第4页
百度 echarts 数据图形渲染技术学习指南第5页
百度 echarts 数据图形渲染技术学习指南第6页
百度 echarts 数据图形渲染技术学习指南第7页
百度 echarts 数据图形渲染技术学习指南第8页
百度 echarts 数据图形渲染技术学习指南第9页
百度 echarts 数据图形渲染技术学习指南第10页
百度 echarts 数据图形渲染技术学习指南第11页
百度 echarts 数据图形渲染技术学习指南第12页
百度 echarts 数据图形渲染技术学习指南第13页
百度 echarts 数据图形渲染技术学习指南第14页

试读结束, 可继续读6页

48积分/C币 立即下载