Echarts的使用

最近工作中使用到了图表统计，综合使用方便，用户体验性等多方面考虑，决定使用百度开源的项目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这个属性指的是当鼠标拽着元素开始拖动时，经过多少毫秒后可以被拖动。当把这个值设置很大时，在实际的应用中，是不会有人会点住鼠标拖动很长时间的，因此就实现了既不能拖动，又保留外环线的效果。