由于自己的一个项目涉及到图形显示，朋友推荐使用百度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);
加入后台返回的需要展示的数据，图形完美的展现出来客户需要的效果。