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