由于自己的一个项目涉及到图形显示，朋友推荐使用百度ECharts。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
引入下载的js文件，调用echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个图形。
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
var option = {
title : {
text: ‘鲍店煤矿在册职工统计‘,
subtext: ‘鲍店煤矿工会‘,
x:‘center‘
},
tooltip : {
trigger: ‘item‘,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: ‘vertical‘,
left: ‘left‘,
data: [‘职工总人数‘,‘女职工人数‘,‘男职工人数‘]
},
series : [
{
name: ‘访问来源‘,
type: ‘pie‘,
radius : ‘55%‘,
center: [‘50%‘, ‘60%‘],
data:[
{value:${gk.zgrs}, name:‘职工总人数‘},
{value:${gk.nzgrs}, name:‘女职工人数‘},
{value:(${gk.zgrs}-${gk.nzgrs}), name:‘男职工人数‘}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)‘
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
加入后台返回的需要展示的数据，图形完美的展现出来客户需要的效果。