Echarts分享经典课件

Echarts3分享Echarts简单介绍1.ECharts，一个纯Javascript的图表库，依赖轻量级的Canvas类库

ZRender。2.兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。3.它提供了折线图、柱状图、饼图、散点图、地图、雷达图、K线图、箱线图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘15中图表。Echarts下载方式Echarts有三种下载方式。（1）.第一种普通下载。（这种方式下载下来的Echarts图表库所有内容都放在一个.js后缀名的文件里面）（2）第二种是自定义在线构建下载。（这种方式下载下来的Echarts图表库所有内容都放在一个.js后缀名的文件里面）选择图表。选择坐标系。选择组件。选择是否支持IE8。以上选择完成后，有一个可点击的按钮，就可以在线生成Echarts库。（3）第三种是模块化源码下载。每个组件都是一个.js后缀名的文件。需要下载Echarts库源码以及一个canvas类库源码。Echarts库根目录。

Canvas类库zrender根目录。接下来就是配置图表所需要的内容。最后显示图表。完成以上代码配置，然后最简单的一个柱状图就配置完成了。所有的Josn组件都可以用属性show:true/false来显示隐藏，默认情况下是显示的，如果不需要这个组件可以隐藏。Title：标题组件，包含了主标题和副标题。Legend：图例组件。Tooltip：提示框组件。xAxis：坐标系X轴。yAxis：坐标系Y轴。Series：系列列表。最重要的通过type显示图表的类型。下面是15种图表的类型。饼图series配置name:'访问来源',type:'pie',//roseType:'radius',//南丁格尔图radiusarearadius:'50%',center:['50%','60%'],label:{饼图图形上的文本标签

normal:{

show:true, //position:'outside',//outside(半径模式)inside(面积模式)

formatter:"{b}:{c}({d}%)",

}, },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'} ],这是一个半径显示方式的南丁格尔图。toolbox:{show:true,feature:{restore:{show:true},saveAsImage:{show:true}}},Toolbox:工具组件左边是半径模式，右边是面积模式。radius:[20,80],radius:饼图的半径，可以是数组也可以是单个值。漏斗图series配置name:'漏斗图',type:'funnel',gap:3,//数据图形间距sort:'inside',//ascendinglabel:{normal:{position:'inside'//ascending}},data:[

{value:60,name:'访问'},

{value:40,name:'咨询'},

{value:20,name:'订单'},

{value:80,name:'点击'},

{value:100,name:'展现'}],

（2）第二种模块化引用。require(['echarts',

引入Echarts主模块'echarts/chart/gauge',

引入仪表盘图'echarts/component/title',

引入标题组件'echarts/component/tooltip'

引入提示框组件'echarts/component/legend',

引入图例组件]）,仪表盘series:[{name:'业务指标',type:'gauge',radius:'75%',detail:{formatter:'{value}%'},//详情data:[{value:78,name:'完成率'}],title:{offsetCenter:[0,'70%']}}雷达图radar:{雷达图坐标组件indicator:[雷达图指示器{text:'销售（sales）',max:6500},{text:'管理（Administration）',max:16000},{text:'信息技术（InformationTechology）',max:30000},{text:'客服（CustomerSupport）',max:38000},{text:'研发（Development）',max:52000},{text:'市场（Marketing）',max:25000}]},series:[{name:'预算vs开销（Budgetvsspending）',type:'radar',data:[{value:[4300,10000,28000,35000,50000,19000],name:'预算分配（AllocatedBudget）'},{value:[5000,14000,28000,31000,42000,21000],name:'实际开销（ActualSpending）'}]}]折线图title:{text:'折线图堆叠'},tooltip:{trigger:'axis'},触发类型legend:{data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']},grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},设置网格toolbox:{feature:{saveAsImage:{}}},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]}