Echarts3分享幻灯片

1、Echarts3分享,制作人：web前端开发-郭维帅 制作日期：2016.06.22,1,2,Echarts简单介绍,1.ECharts，一个纯 Javascript 的图表库，依赖轻量级的 Canvas 类库 ZRender。 2.兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。 3.它提供了折线图、柱状图、饼图、散点图、地图、雷达图、K线图、箱线图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘15中图表。,2,2020/6/23,Echarts下载方式,Echarts有三种下载方式。 （1）.第一种普通下载。 （这种方式下载下来

2、的Echarts图表库所有内容都放在一个.js后缀名的文件里面）,3,2020/6/23,（2）第二种是自定义在线构建下载。 （这种方式下载下来的Echarts图表库所有内容都放在一个.js后缀名的文件里面） 选择图表。,4,2020/6/23,选择坐标系。,5,2020/6/23,选择组件。,6,2020/6/23,选择是否支持IE8。 以上选择完成后，有一个可点击的按钮，就可以在线生成Echarts库。,7,2020/6/23,（3）第三种是模块化源码下载。 每个组件都是一个.js后缀名的文件。 需要下载Echarts库源码以及一个canvas类库源码。,8,2020/6/23,Echar

3、ts库根目录。 Canvas类库zrender根目录。,9,2020/6/23,Echarts引用方式,Echarts有两种引用方式。 （1）第一种普通标签引用。 （第一种和第二种下载方式应用） 首先要引用下载好的Echarts库。 然后需要准备一个有固定宽高的dom容器 在然后初始化echarts获取dom容器的ID,10,2020/6/23,接下来就是配置图表所需要的内容。,11,2020/6/23,最后显示图表。 完成以上代码配置，然后最简单的一个柱状图就配置完成了。,12,2020/6/23,所有的Josn组件都可以用属性show:true/false来显示隐藏，默认情况下是显示的，如

4、果不需要这个组件可以隐藏。 Title：标题组件，包含了主标题和副标题。 Legend：图例组件。 Tooltip：提示框组件。 xAxis：坐标系X轴。 yAxis：坐标系Y轴。 Series：系列列表。最重要的通过type显示图表的类型。,13,2020/6/23,下面是15种图表的类型。,14,2020/6/23,饼图,15,2020/6/23,series配置 name: 访问来源, type: pie, /roseType:radius, /南丁格尔图 radius area radius : 50%, center: 50%, 60%, label: 饼图图形上的文本标签 norm

5、al: show:true, /position:outside, /outside(半径模式) inside(面积模式) formatter: b : c (d%), , ,16,2020/6/23,data: value:335, name:直接访问, value:310, name:邮件营销, value:234, name:联盟广告, value:135, name:视频广告, value:1548, name:搜索引擎, value:400, name:1, value:500, name:2, value:1200, name:3, value:900, name:4 ,17,20

6、20/6/23,这是一个半径显示方式 的南丁格尔图。 toolbox: show:true, feature : restore : show: true, saveAsImage : show: true , Toolbox:工具组件,18,2020/6/23,左边是半径模式， 右边是面积模式。 radius : 20, 80, radius :饼图的半径， 可以是数组也可以是 单个值。,19,2020/6/23,漏斗图,series配置 name:漏斗图, type:funnel, gap: 3, /数据图形间距 sort: inside, /ascending label: normal

7、: position: inside /ascending ,20,2020/6/23,data: value:60, name:访问, value:40, name:咨询, value:20, name:订单, value:80, name:点击, value:100, name:展现 ,21,2020/6/23,（2）第二种模块化引用。 require( echarts, 引入Echarts主模块 echarts/chart/gauge, 引入仪表盘图 echarts/component/title, 引入标题组件 echarts/component/tooltip 引入提示框组件 ech

8、arts/component/legend, 引入图例组件 ）,22,2020/6/23,仪表盘,series: name: 业务指标, type: gauge, radius:75%, detail: formatter:value%, /详情 data: value: 78, name: 完成率, title:offsetCenter:0,70% ,23,2020/6/23,雷达图,radar: 雷达图坐标组件 indicator: 雷达图指示器 text: 销售（sales）, max: 6500, text: 管理（Administration）, max: 16000, text:

9、信息技术（Information Techology）, max: 30000, text: 客服（Customer Support）, max: 38000, text: 研发（Development）, max: 52000, text: 市场（Marketing）, max: 25000 ,24,2020/6/23,25,2020/6/23,series: name: 预算 vs 开销（Budget vs spending）, type: radar, data : value : 4300, 10000, 28000, 35000, 50000, 19000, name : 预算分配（

10、Allocated Budget）, value : 5000, 14000, 28000, 31000, 42000, 21000, name : 实际开销（Actual Spending） ,26,2020/6/23,折线图,title: text: 折线图堆叠 , tooltip: trigger: axis, 触发类型 legend: data:邮件营销,联盟广告,视频广告,直接访问,搜索引擎, grid: left: 3%,right: 4%,bottom: 3%,containLabel: true, 设置网格 toolbox: feature: saveAsImage: ,27,2020/6/23,28,2020/6/23,series: name:邮件营销, type:line,stack: 总量,data:120, 132, 101, 134, 90, 230, 210, name:联盟广告,type:line,stack: 总量,data:220, 182, 191, 234, 290, 330, 310, name:视频广告,type:line,stack: 总量,data:150, 232, 201, 154, 190, 330, 410, name:直接访