《Echarts入门学习》由会员分享，可在线阅读，更多相关《Echarts入门学习（17页珍藏版）》请在金锄头文库上搜索。
1、,Echarts 商业产品图表库,主讲人：张兴玉 2017年3月23日,01,Echarts特性介绍,02,Echarts轻松上手,03,其他图表库,Echarts特性介绍,ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。,并支持图与图之间的混
2、搭哦！,Echarts轻松上手,02,1、Echarts：一个纯 Javascript 的图表库，而且ECharts 3 开始不再强制使用 AMD 的方式按需引入， 代码里也不再内置 AMD 加载器。只需要像普通的 JavaScript 库一样用 script 标签引入。 官方下载界面 http:/ 。,Echarts轻松上手,2、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。,Echarts轻松上手,3、然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单 的柱状图（如下图），右侧是完整代码。,Ec
3、harts轻松上手,简单介绍一下常用配置项（一）,Echarts轻松上手,title（标题）,toolbox（工具箱）,简单介绍一下常用配置项（二）,Echarts轻松上手,tooltip（提示）,legend（图例）,dataZoom（数据区域缩放）,简单介绍一下常用配置项（三）,Echarts轻松上手,dataRange（值域）,grid（绘图网格）,axis（坐标轴）,其他图表库,03,面向HTML5 的JavaScript图表库,1、D3.js Data-Driven Documents,现在提到图表的时候，我们第一个想到的就是 D3.js。作为一个开源项目，D3.js提供了很多其他现
4、有库所没有的强大的功能。D3.js 图表使用HTML+SVG+CSS渲染。D3.js不支持旧版本的浏览器。,面向HTML5 的JavaScript图表库,2、 Google Charts,Google Charts 创 建图表更加的简单。它提供了很多内置的图表，如：条形图、日历图、饼图等等。Google Charts 还提供了许多定制选项让你改变图表的外观。它通过HTML5/SVG渲染来支持跨浏览器兼容性，并且可以 跨平台移植到iPads、iPhones 、Android。它还包含支持 旧版本IE的VML。,面向HTML5 的JavaScript图表库,3、ChartJS,ChartJS 为图
5、表提供了漂亮的平面设计风格。它通过HTML5的canvas属性渲染。支持旧版本的浏览器如IE7/8。ChartJS 默认是响应式的，它良好的适应手机端和平板端。,面向HTML5 的JavaScript图表库,4、Highcharts JS,Highcharts JS 是另一款非常流行的图形图表库。预置了很多炫酷的动画效果，是你的网站足够吸引眼球。跟其他库一样，它提供了内置的图形，如：spline, area, areaspline, column, bar, pie, scatter等。 使用Highcharts JS最大的优势是 它兼容像IE6这样的旧版本浏览器。 标准的浏览器使用SVG渲染，而旧 版本的IE浏览器则使用VML。 个人免费使用，而商业用户 则需要购买许可证。,n3-charts Chartist.js Ember Charts Smoothie Charts Chartkick Fusioncharts ZingChart Flot amCharts EJS Chart uvCharts 等等,面向HTML5 的JavaScript图表库,http:/www.open- YOU！,
