上图是头条号作者后台管理的数据饼图，要想实现这样的效果可以采用百度的ECharts数据可视化框架。如ECharts官网所示，此框架是一款直观，生动，可交互，可高度个性化定制的Web数据可视化图表。利用它可以做折线图、柱状图、饼图、关系图...... 甚至是3D路径图等等。
当然，今天我们要完成的没有那么复杂。今天要做的只是饼图的实现。首先在ECharts官网下载ECharts组件，然后在我们的网页中引入。因为ECharts需要配合JQuery一起使用，所以一并引入。
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
然后在网页中添加一个div来显示我们的图标。
<div id="DrawBoard" style="height: 750px;width: 1300px;"></div>
接着我们需要一个option对象，这个对象中包含了title、tooltip、legend、series等对象。其中title是标题，可以在里面设置标题内容，样式等；tooltip是鼠标移动到图上时的效果；legend是设置图例； series是具体的图表系列。
代码如下：
option = {
title : {
text: '阅读来源分析', //标题文本
subtext: '',
x:'200', //标题位置
textStyle:{
fontSize:30, //字体大小
align:'center', //对齐方式
lineHeight: 56, //行高
}
},
tooltip : { //鼠标放上的提示
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" //{a}是标题，{b}是饼图名称，{c}是图表项，{d}//是所占比重
},
legend: {
orient: 'vertical',//图例排列方式
left: 'left', //位置
data: ['推荐','频道','相关阅读','其他']//图例内容
},
series : [{
name: '阅读来源分析',//图表名称
type: 'pie',//图表类型，这里是饼图
radius : '80px',//半径
center: ['20%', '20%'],//位置
data:[//图表数据
{value:335, name:'推荐'},//value是具体数量，name是名称
{value:310, name:'频道'},
{value:310, name:'相关阅读'},
{value:310, name:'其他'}
],
itemStyle: {
normal : {
label : {
show : true , //显示标签
formatter: '{b}：{d}%', //标签内容
position:'outside'//标签位置
},
labelLine : {
show : true //显示连线
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
然后初始化ECharts
var demo = echarts.init(document.getElementById("PieDemo"));
将option放入其中
demo.setOption(option);
效果图
完整源码如下：
<!DOCTYPE html>
<html>
<head>
<title>PieDemo</title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>
<body>
<div id="PieDemo" style="height: 750px;width: 1300px;"></div>
<script type="text/javascript">
var demo = echarts.init(document.getElementById("PieDemo"));
option = {
title : {
text: '阅读来源分析',
subtext: '',
x:'200',
textStyle:{
fontSize:30,
align:'center',
lineHeight: 56,
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['推荐','频道','相关阅读','其他']
},
series : [{
name: '阅读来源分析',
type: 'pie',
radius : '80px',
center: ['20%', '20%'],
data:[
{value:335, name:'推荐'},
{value:310, name:'频道'},
{value:310, name:'相关阅读'},
{value:310, name:'其他'}
],
itemStyle: {
normal : {
label : {
show : true ,
formatter: '{b}：{d}%',
position:'outside'
},
labelLine : {
show : true
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
demo.setOption(option);
</script>
</body>
</html>