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、哈哈哈，就這樣，就完成了，十分簡單的。