最近工作中使用到了图表统计,综合使用方便,用户体验性等多方面考虑,决定使用百度开源的项目Echarts来作为项目图表显示的开发。
在工作中我们使用到了Echarts实例里的标准圆环图,就像是这样
Echarts的使用非常简单,只需要为图表显示设置一个div,再将如下一段js代码引入页面就可以完成了。
<script type="text/javascript"> require.config({ paths: { echarts: 'echarts-2.2.7/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip : { trigger: 'item',//触发类型,默认为item,指的是悬停在图表的某一项上触发。axis,指的是悬停在轴线上时触发,一般用于折线图之类。 formatter: "{a} <br/>{b} : {c} ({d}%)"//内容格式器,可以指定当鼠标悬停时显示的内容。 },//tooptip指的是鼠标悬停在图表上后弹出的提示框。 legend: { show:true,//是否显示。 orient : 'vertical',//布局方式,分为水平布局和垂直布局。 x : 'left',//水平放置位置,有左中右三种可选。 data:['直接访问','邮件营销','联盟广告','视频广告','测试','搜索引擎']//图例的内容,图例的数据必须和series中data的数据一致,否则图例将无法使用。 },//legend指的是图例。 calculable : true,//calculable指的是是否可以拖拽重计算,当设置为true的时候,可以将图表上的元素进行拖拽,并且重新计算生成新的图表。 series : [ { name:'访问来源',//系列名称 type:'pie',//类型,这里是标准圆环图,属于饼图类型。 radius : ['50%', '70%'],//半径,第一个参数为内环半径,第二个参数为外环半径 itemStyle : {//图形样式 normal : {//正常时的样式 label : { show : false }, labelLine : { show : false } }, emphasis : {//鼠标悬停时的样式 label : { show : true, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' } } } }, data:[ {value:25, name:'直接访问'}, {value:12, name:'邮件营销'}, {value:6, name:'联盟广告'}, {value:35, name:'视频广告'}, {value:11,name:'测试'}, {value:11, name:'搜索引擎'} ]//图表的数据。在实际应用中,可以将后台计算得到的各个项的数据传递到页面上,存储在hidden域中,再将这些值赋予到data中。 } ]//series指的是存放生成图表的数据的数组。 }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script>
以上就是标准圆环图的配置使用。
出于对ECharts的兴趣,我又学习了另外一个半圆环图的配置,如下,
配置如下:
<script type="text/javascript"> require.config({ paths: { echarts: 'echarts-2.2.7/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var dataStyle = {//自定义样式 normal: { label: {show:false}, labelLine: {show:false} } }; var placeHolderStyle = {//自定义占位时的样式 normal : { color: 'rgba(0,0,0,0)', label: {show:false}, labelLine: {show:false} }, emphasis : { color: 'rgba(0,0,0,0)' } }; option = { title: {//标题 text: '你幸福吗?', x: 'center',//水平位置 y: 'center',//竖直位置 itemGap: 20,//主副标题间距 textStyle : {//文本样式 color : 'rgba(30,144,255,0.8)', fontFamily : '微软雅黑', fontSize : 35, fontWeight : 'bolder' } }, legend: {//图例 orient : 'vertical', x : document.getElementById('main').offsetWidth / 2, y : 80 , itemGap:12, data:['20%','68%的人表示过的不错','29%的人表示生活压力很大','3%的人表示“我姓曾”'] }, series : [//数据 { name:'1', type:'pie', clockWise:false,//是否是顺时针方向 radius : [150, 175], itemStyle : dataStyle, data:[ { value:68,//这个值是需要显示的那一部分所占值 name:'20%'//这个name需要和图例里的data对应,否则无法使用图例 }, { value:32,//这个值是上面那个value与100之间的差值 name:'invisible',//不显示 itemStyle : placeHolderStyle//引用自定义的占位样式 } ] }, { name:'2', type:'pie', clockWise:false, radius : [125, 150], itemStyle : dataStyle, data:[ { value:68, name:'68%的人表示过的不错' }, { value:32, name:'invisible', itemStyle : placeHolderStyle } ] }, { name:'3', type:'pie', clockWise:false, radius : [100, 125], itemStyle : dataStyle, data:[ { value:29, name:'29%的人表示生活压力很大' }, { value:71, name:'invisible', itemStyle : placeHolderStyle } ] }, { name:'4', type:'pie', clockWise:false, radius : [75, 100], itemStyle : dataStyle, data:[ { value:3, name:'3%的人表示“我姓曾”' }, { value:97, name:'invisible', itemStyle : placeHolderStyle } ] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script>
对于标准圆环图,如果不想让其拖动,可以将calculable属性设置为false。在不能拖动的同时,又将其外面的圆环线给去掉了。如果想在保留圆环线的同时又不想让其进行拖动,那么可以修改echarts.js源码中的属性DRAG_ENABLE_TIME默认的120改为一个很大的数字,与此同时,calculable设置为true。这时,圆环外既保留了圆环线,用户去拖动的时候也是无法拖动的。DRAG_ENABLE_TIME这个属性指的是当鼠标拽着元素开始拖动时,经过多少毫秒后可以被拖动。当把这个值设置很大时,在实际的应用中,是不会有人会点住鼠标拖动很长时间的,因此就实现了既不能拖动,又保留外环线的效果。