《ECharts介绍.doc》由会员分享，可在线阅读，更多相关《ECharts介绍.doc（19页珍藏版）》请在三一文库上搜索。
1、Echats介绍刘營2019/l/28<zWhat is ECharts?“Echarts可能是百度唯_良心产品”某网友> 1、Echarts （Enterprise Charts 商业产品图表库）是来自百度商业前端数据可视化团队EFE ,基于Html5生动、Canvas类库,是一个纯Javascript图表库,提供直观、可交互、可个性化定制的数据可视化图表。A 2、2013年6月发布第一版本后,到现在已经更新了 10几个版 本,目前最新发布的版本是ECharts3o 特点：2)D流畅地运行在PC和移动端;兼容当前绝大部分浏览器（IE6/7/8/9/10/11,Chrome, Fi
2、refox, Safari等）；3）赋予了用户对数据进行挖掘、整合的能力;4）开源免费，多维数据分析，多平台展示。Why Echarts?可炫光特效LoadingHow to use Echarts?How to use Echarts?图类How to use Echarts?How to use Echarts?BarLineScatterKHeRadar柱状图折线图散点图K銭IB饶图达Hhlllji0©ChordForceMapGaugeFunnelIsland和弦图力导布局图地图仪表盘逅斗图©1acw1 How to use Echarts?How to use E
3、charts?AxisGridPolarTitleTooltipLegendDataZoom坐标轴网格极坐标标饉提乔凰例数据区域缩放基础库DataRangeToolboxTimeline值域浸游工具箱时间轴How to use Echarts?How to use Echarts?zrender（canvas 类庫）How to use Echarts?>1.建立一个Html文件f引入echarts js包< !-弓i 入 echarts.j 3 >v !这里是加载刚卡好的echarta .min. js7注意路径-> <scrip七 src=,wechart3
4、.min j 3,w></script>>2.设置Dom画布/容器并初始化< ! -为ECharts准备一个具备大小(宽高)的Dom -><div id=l,maiiL,1 吕七lOOOpx; height: 60Opx; '*></diT> <script type="text/j ava3cript">If基于准备好的do叫 初始化echarts例5rar myChart = echarts . inlt (document getElementByld ( 1 main 1 );optio
5、n对象(标题.工具栏.图例.坐标轴数据)填入数据series:运行显示使用刚搭走的配蛋项和数据显示图表二 myChar-t. setOption (option);/填入團表数据series :name :'访问来源type:1 pie'zradius:155%1rdata:/设宣峥表的组件'言息及数据 var option = tooltip :/tool box:rlegend:zxAxis :JzyAxis:zseries :Jrros value ; 400, name : 1 搜索引宰丫 , value : 335z name :'直接说丁可、 zg0
6、 寸0 *0 o一 一 -rFLcu厂s uo-ss;96id.j1ssx agquowso)6(dhe(u£-lZ lpeQsal.Epasn srelpwEcharts usedy /1 u / / «/ I II / / /粗昌/ /g ./ / /暗宁点广州，惊 Top10 Top10 广州Top10 地图in research ?基础雷达圏预葺分配(Allocated Budget实际开链(Actual Spending )销售(sales)管理(Administration )Information Techology)市场(Marketing )研发(Development)Echarts used力导向图类目1类目3类目6in research ?iudgeLes Miserables和弦图Know more Echarts?更多了解> 1% :教程源码API配置项手册下载文件等> 2. hot&page二 1 :慕课网教程> 3. 144622 :林峰访谈录>4% : 选择Echarts的理由11Thanks !12