标签：
1、在我们开发程序中，经常会用到生成一些报表，比方说饼状图，条形图，折线图等。不多说了，直接上封装好的代码，如下Echarts.js所示
以下代码是封装在Echarts.js文件中
/** * Created by Administrator on 2015/8/7. */ var charec; // 路径配置 require.config({ paths: { echarts: ‘http://echarts.baidu.com/build/dist‘ } }); // 按需加载所需图表 require( [ ‘echarts‘, ‘echarts/chart/bar‘, //按需加载条形图 ‘echarts/chart/line‘, //按需加载折线图 ‘echarts/chart/funnel‘, ‘echarts/chart/pie‘, //按需要加载饼图 ‘echarts/chart/gauge‘, ‘echarts/chart/map‘, ], function (ec) { charec = ec; } ); /** * 创建饼图js 这个还可以抽出来封装下 * data[0] 呈现饼图的dom元素id * data[1] 统计图的主标题 * data[2] 图例 * data[3] 自定义名字 * data[4] 呈现的统计图数据 * @param data */ function createChart(data) { var myChart = charec.init(document.getElementById(data[0])); var option = { title: { text: data[1], subtext: ‘‘, x: ‘center‘, }, tooltip: { trigger: ‘item‘, formatter: "{a} <br/>{b}:{c} ({d}%)" }, legend: { orient: ‘vertical‘, x: ‘150‘, data: data[2] }, toolbox: { show: false, feature: { mark: false, dataView: {show: true, readOnly: false}, magicType: [‘line‘, ‘bar‘, ‘pie‘, ‘gauge‘], restore: true } }, calculable: true, series: [{ name: data[3], type: ‘pie‘, radius: ‘50%‘, center: [‘50%‘, ‘50%‘], data: data[4], itemStyle: { normal: {label: {show: true, formatter: ‘{b}:{c}人 ({d}%)‘}}, labelLine: {label: {show: true}} } }] }; myChart.setOption(option); }
2、如何使用
在前台页面引用以下js文件
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript" src="/Static/Js/Echarts.js"></script> -----这个文件就是上面封装的js代码
3、传送数据
前台js代码中，调用 createChart(data) 方法，并把data数据传递过去就行。
其中data的 json 数据格式如下所示,可以转换为一个数组传送过去
[ "pieArea", "XX广州上海活动情况统计图", [ "未参加活动", "参与活动未回答问卷", "参与活动并回答问卷" ], "会员活动详情", [ { "value": "3", "name": "未参加活动" },
{
"value": "5",
"name": "参与活动未回答问卷"
},
{
"value": "10",
"name": "参与活动并回答问卷"
}
]
]
--------以下是数组格式
$data=array(
0=>array("name"=>"未参加活动","value"=>"3"),
1=>array("name"=>"参加活动未填问卷","value"=>"5")
)
$pieData = array(
"pieArea", //呈现饼图的dom元素id
"XX活动情况统计图", //标题
array("未参加活动", "参与活动未回答问卷", "参与活动并回答问卷"), //lend 图例
"会员活动详情", //自定义名称
$data //统计数据
);
把$pieData 数据传递过去就行。
createChart(data);
4、哈哈哈，就这样，就完成了，十分简单的。
标签：
原文地址：http://www.cnblogs.com/luoyangcn/p/4712231.html
