入门学习.pptx

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,#,CLICK TO EDIT MASTER TITLE STYLE,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,20/11/2019,#,Echarts,商业产品图表库,主讲人：张兴玉,2017,年,3,月,23,日,01,Echarts,特性介绍,02,Echarts,轻松上手,03,其他图表库,目录,Echarts,特性介绍,ECharts,，一个纯,Javascript,的图表库，可以流畅的运行在,PC,和移动设备上，兼容当前绝大部分浏览器（,IE8/9/10/11,，,Chrome,，,Firefox,，,Safari,等），底层依赖轻量级的,Canvas,类库,ZRender,，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。,ECharts 3,中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。,常规,折线图,柱状图,散点图,饼图,K,线图,统计,盒形图,地理数据,地图,热力图,线图,BI,商业智能,漏斗图,仪表盘,关系数据,关系图,treemap,多维数据可视化的平行坐标,并支持图与图之间的混搭哦！,Echarts,轻松上手,02,1,、,Echarts,：一个纯,Javascript,的图表库，而且,ECharts 3,开始不再强制使用,AMD,的方式按需引入，,代码里也不再内置,AMD,加载器。只需要像普通的,JavaScript,库一样用,script,标签引入。,官方下载界面,Data-Driven Documents,现在提到图表的时候，我们第一个想到的就是,D3.js,。作为一个开源项目，,D3.js,提供了很多其他现有库所没有的强大的功能。,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,为图表提供了漂亮的平面设计风格。它通过,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,图表库,www.open-