ECharts饼图制作分析
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!--为ECharts准备一个具备大小(宽高)的Dom--> 9 <div id="main" style="height:400px;"></div> 10 <!--ECharts单文件引入--> 11 <script src="echarts-all.js"></script> 12 <script type="text/javascript"> 13 //基于准备好的dom,初始化echarts图表 14 var myChart=echarts.init(document.getElementById('main')); 15 16 //图表使用 17 var option = { 18 tooltip : {//提示框,鼠标悬浮交互时的信息提示 19 trigger: 'item',//触发类型,默认数据触发,可选为:'axis' 20 formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式 21 }, 22 legend: {//图例,每个图表最多仅有一个图例 23 orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical' 24 x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px) 25 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列) 26 }, 27 toolbox: {//工具箱,每个图表最多仅有一个工具箱 28 show : true,//显示策略,默认只是false.可选为:true显示|false隐藏 29 feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理. 30 mark : {show: true},//辅助线标志,此处启用. 31 dataView : {//打开数据视图，可设置更多属性 32 show: true, 33 readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能 34 }, 35 magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换 36 show: true, 37 type: ['pie', 'funnel'],//饼图,漏斗图 38 option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项 39 funnel: {//漏斗图配置 40 x: '25%', 41 width: '50%', 42 funnelAlign: 'center', 43 max: 1548 44 } 45 } 46 }, 47 restore : {show: true},//还原,复位原始图表 48 saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性. 49 } 50 }, 51 calculable : true,//是否启用拖拽重计算特性,默认关闭 52 series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据 53 { 54 name:'访问来源',//系列名称 55 type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar 56 radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径] 57 itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式） 58 normal : {//默认样式 59 label : { 60 show : false 61 }, 62 labelLine : { 63 show : false 64 } 65 }, 66 emphasis : {//强调样式 67 label : { 68 show : true, 69 position : 'center',//标签显示位置,地图标签不可指定位置 70 textStyle : { 71 fontSize : '30', 72 fontWeight : 'bold' 73 } 74 } 75 } 76 }, 77 data:[ 78 {value:335, name:'直接访问'}, 79 {value:310, name:'邮件营销'}, 80 {value:234, name:'联盟广告'}, 81 {value:135, name:'视频广告'}, 82 {value:1548, name:'搜索引擎'} 83 ] 84 } 85 ] 86 }; 87 88 //为echats对象加载数据 89 myChart.setOption(option); 90 </script> 91 </body> 92 </html>
