百度echarts制作餅狀圖，echarts制作餅
我也是一個剛畢業的，有什麼不對的地方，多多指教，直接上代碼
//引用百度echarts庫和jquery庫
<script src="../../js/echarts/echarts.min.js"></script>
<script src="../ui/js/jquery.min.js"></script>
//定義一個div塊，用來存放餅狀圖
<div id="echart1" ></div>
//js代碼裡寫echart控件的數據集
var myChart = echarts.init(document.getElementById('echart1'));
//echart控件的數據集
option = {
title: {
text: '設備類型統計圖',
subtext: '',
x: 'center',
y: "10%",
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'horizontal',
//left: 'left',
x: "center",
y: "bottom",
data: []
},
series: [
{
name: '設備型號',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
formatter: "{b}: {c} ({d}%)"
},
color: function (params) {
var colorList = [
'#C1232B', '#B5C334', '#E87C25', '#FCCE10', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
}
}
},
}
]
};
//ajax獲取後台數據
$(document).ready(
function () {
Chartload();
});
function Chartload() {
//延遲動畫
myChart.showLoading();
//ajax獲取echart所需的數據
$.ajax({
url: "Handler.ashx?action=GetPie",
data: {
cmd: "pie",
"depcode": $("#dep").val(),
"zhuangtai": $('#zhuangtai').val(),
},
cache: false,
async: false,
dataType: 'json',
success: function (data) {
if (data) {
var xatrnames = [];
var yvalidators = [];
var i = 0;
//對返回的數據進行相應的處理
for (i = 0; i < data.length; i++) {
if(data[i].value == 0){ //取得數據如果為0，不在echarts中顯示
continue;
}
else {
var name = data[i].name;
xatrnames.push(
data[i].name
);
yvalidators.push(
{
value: data[i].value,
name: data[i].name
}
);
}
}
//把處理後的數據填充到echart數據集中
option.legend.data = xatrnames;
option.series[0].data = yvalidators;
myChart.setOption(option);
myChart.hideLoading();
}
else {
//ajax返回的數據為null！
option.legend.data = ["W0", "W1", "DW2"];
option.series[0].data = ["0", "0", "0"];
myChart.setOption(option);
myChart.hideLoading();
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert("出錯啦");
option.legend.data = ["W0", "W1", "W2"];
option.series[0].data = ["10", "0", "10"];
myChart.setOption(option);
myChart.hideLoading();
}
});
}
//後台Handler.ashx拼json數據格式
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string action = GetValue(context, "action").ToLower();
if (action == "getpie")
{
GetPie(context);
}
else
{
context.Response.Write("Hello World");
}
}
public void GetPie(HttpContext context)
{
string where = "";
string sql11 = where + " and id like '00%'";
string sql15 = where + " and id like '01%'";
string sql16 = where + " and id like '02%'";
Newfei.BLL.car_school sBLL = new Newfei.BLL.car_school(); //這裡的有些單詞我給隨便改了一下
int value11 = sBLL.GetCountBySearch(sql11);
int value15 = sBLL.GetCountBySearch(sql15);
int value16 = sBLL.GetCountBySearch(sql16);
string a = "W11";
string b = "W15";
string c = "W16";
//將數據拼成json字符串格式
result = "[{\"name\":\"" + a + "\",\"value\":\"" + value11 + "\"},{\"name\":\"" + b + "\",\"value\":\"" + value15 + "\"},{\"name\":\"" + c + "\",\"value\":\"" + value16 + "\"}]";
context.Response.Write(result);
}
//另一種方法
添加 using System.Web.Script.Serialization;
//JavaScriptSerializer類，序列化和反序列化，用於在浏覽器和 Web 服務器之間傳遞的數據
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
string result = "";
string ouGuid = ""; //在全局變量中定義
//getpie方法 轉化為json數據格式
public void GetPie(HttpContext context)
{
DataTable dt = new DataTable();
dt = Select().Table; //將查詢結果存入dt中
lists = new List<object>();
foreach (DataRow dr in dt.Rows)
{
//var obj = new { name = dr["name"], value = dr["value"] };
var obj = new { name = Convert.ToString(dr["name"]) + Convert.ToString(dr["count"]), value = dr["value"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.ContentType = "text/plain";
context.Response.Write(result);
}
