Echarts入门学习PPT课件.pptxVIP

Echarts商业产品图表库主讲人：张兴玉2017年3月23日

01Echarts特性介绍02Echarts轻松上手03其他图表库目录

Echarts特性介绍ECharts，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的Canvas类库?ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts3中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。常规折线图柱状图散点图饼图K线图统计盒形图地理数据地图热力图线图BI商业智能漏斗图仪表盘关系数据关系图treemap多维数据可视化的平行坐标并支持图与图之间的混搭哦！！

Echarts轻松上手02

1、Echarts：一个纯Javascript的图表库，而且ECharts3开始不再强制使用AMD的方式按需引入，代码里也不再内置AMD加载器。只需要像普通的JavaScript库一样用script标签引入。官方下载界面/download.html。Echarts轻松上手

2、在绘图前我们需要为ECharts准备一个具备高宽的DOM容器。Echarts轻松上手

3、然后就可以通过?echarts.init?方法初始化一个echarts实例并通过?setOption?方法生成一个简单的柱状图（如下图），右侧是完整代码。Echarts轻松上手

简单介绍一下常用配置项（一）Echarts轻松上手title（标题）toolbox（工具箱）

简单介绍一下常用配置项（二）Echarts轻松上手tooltip（提示）legend（图例）dataZoom（数据区域缩放）

简单介绍一下常用配置项（三）Echarts轻松上手dataRange（值域）grid（绘图网格）axis（坐标轴）

其他图表库03

面向HTML5的JavaScript图表库1、D3.js—Data-DrivenDocuments现在提到图表的时候，我们第一个想到的就是?D3.js。作为一个开源项目，D3.js提供了很多其他现有库所没有的强大的功能。D3.js图表使用HTML+SVG+CSS渲染。D3.js不支持旧版本的浏览器。

面向HTML5的JavaScript图表库2、GoogleChartsGoogleCharts?创建图表更加的简单。它提供了很多内置的图表，如：条形图、日历图、饼图等等。GoogleCharts还提供了许多定制选项让你改变图表的外观。它通过HTML5/SVG渲染来支持跨浏览器兼容性，并且可以跨平台移植到iPads、iPhones、Android。它还包含支持旧版本IE的VML。

面向HTML5的JavaScript图表库3、ChartJSChartJS?为图表提供了漂亮的平面设计风格。它通过HTML5的canvas属性渲染。支持旧版本的浏览器如IE7/8。ChartJS默认是响应式的，它良好的适应手机端和平板端。

面向HTML5的JavaScript图表库4、HighchartsJSHighchartsJS?是另一款非常流行的图形图表库。预置了很多炫酷的动画效果，是你的网站足够吸引眼球。跟其他库一样，它提供了内置的图形，如：spline,area,areaspline,column,bar,pie,scatter等。使用HighchartsJS最大的优势是它兼容像IE6这样的旧版本浏览器。标准的浏览器使用SVG渲染，而旧版本的IE浏览器则使用VML。个人免费使用，而商业用户则需要购买许可证。

n3-chartsChartist.jsEmberChartsSmoothieChartsChartkickFusionchartsZingChartFlotamChartsEJSChartuvCharts等等面向HTML5的JavaScript图表库/lib/view/open1431504796419.html16

THANKYOU！