Echarts生成饼状图、条形图以及线形图 JS封装

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
* ["pieArea","活动2情况统计图",["活动1","活动2","活动3"],"活动详情",
* [{"value":"5","name":"活动1"},{"value":"3","name":"活动2"},{"value":"8","name":"活动3"}]]
*
*/
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',
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);

}

/**
* 创建条形图或者折线图
* data[0] 呈现饼图的dom元素id
* data[1] 统计图的主标题
* data[2] 图例
* data[3] 自定义名字
* data[4] 呈现的统计图数据
* data[5] X轴数据
* data[6] 图表类型 bar line
* @param data
*/
// $pieData = array(
// "pieArea", //呈现饼图的dom元素id
// "某地区蒸发量和降水量", //标题
// array("蒸发量", "降水量"), //lend 图例
// "蒸发量或者降水量", //自定义名称
// array(2.6,5.9,6.8,3.1,1.2,8.9),
// array("1月", "2月", "3月","4月","5月","6月"),
// "line"
// );
function createBarChart(data) {
var myChart = charec.init(document.getElementById(data[0]));
var option = {
title: {
text: data[1],
subtext: '',
x: 'center',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: data[2],
orient: 'vertical',
x: '150',
},
toolbox: {
show: false,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'pie', 'gauge']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: data[5]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: data[3],
type: data[6],
data: data[4]
}
]
};
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、哈哈哈，就这样，就完成了，十分简单的。