欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Echarts 3.19 制作常用的圖形(非靜態(tài))

 更新時(shí)間：2016年05月19日 11:56:13   作者：嚴(yán)芷云  
這篇文章主要介紹了基于Echarts 3.19 制作常用的圖形(非靜態(tài))的相關(guān)資料,需要的朋友可以參考下

餅圖：

環(huán)境：Echarts 3.19 vs2013

實(shí)現(xiàn)方式：ajax+ashx+json

注意事項(xiàng)： 官網(wǎng)所需格式為 [{value:23,name:'xxxx' }] 請(qǐng)將key 的名字不要寫(xiě)錯(cuò)

具體代碼，各位看官 請(qǐng)下移目光。

<!--請(qǐng)先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/echarts/echarts.min.js"></script>

頁(yè)面部分就設(shè)置一個(gè)div 就好了

<div><input type="button" id="btngo" value="Pie" /> </div>
<div id="contanis" style="width:px;height:px"></div>

　接下來(lái)就是js部分了 其實(shí)Echarts 跟HTML5中的 Canvans 還是有聯(lián)系的 想知道的可以查資料喲 

$("#btngo").click(function () { //這里用的是點(diǎn)擊事件下面 當(dāng)然這也是模仿你有條件查詢(xún)的時(shí)候咯
var dom = document.getElementById('contanis');
var mycharts = echarts.init(dom);
option = {
title: {
text: '部門(mén)人口比例',
subtext: '測(cè)試數(shù)據(jù)',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
name: '2012年度',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' //這怎么會(huì)有個(gè).5呢？ 看來(lái)還是要看看H5喲
}
}
}
]
};
mycharts.setOption(option);

　接下來(lái)就是 ajax部分了 動(dòng)態(tài)加載數(shù)據(jù)才是根本的 數(shù)據(jù)固定多沒(méi)意思，來(lái)干了這碗孟婆湯 來(lái)世就做UI設(shè)計(jì)尸

$.ajax({
type: "get",
async: true, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶(hù)其他操作必須等待請(qǐng)求完成才可以執(zhí)行）
url: "../Handler/DepartmentHandler.ashx", 
data: {},//demo 沒(méi)加條件
dataType: "json", //返回?cái)?shù)據(jù)形式為json
success: function (result) {
for (var i = 0; i < result.length; i++)
{
name.push(result[i].name); 
} 
mycharts.setOption({ //加載數(shù)據(jù)圖表
legend:{data:name },
series: [{
data:result
}]
});
},
error: function (errorMsg) {
//請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)
alert("圖表請(qǐng)求數(shù)據(jù)失敗!");
}
});

　ashx部分就簡(jiǎn)單多了 單純的序列化數(shù)據(jù)

DataTable result = BLL.Department.GetDeptNumber(); 
List<object> list = new List<object>();
foreach (DataRow dr in result.Rows)
{
// 附上Echarts 所需的格式：[{value:335, name:'直接訪問(wèn)'}]
Deart d = new Deart();
d.value = Convert.ToInt32(dr["number"]);
//自己粗心 用values Echarts 不認(rèn) 一直就是undefined 
d.name = dr["D_Name"].ToString(); 
list.Add(d);
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(list);
public class Deart //其實(shí)可以不用這么定義 自己保險(xiǎn)讓它出來(lái)的 value 值為int
{
public int value { get; set; }
public string name { get; set; } 
}

附上效果圖吧：

柱狀圖：

環(huán)境：Echarts 3.19 vs2013

實(shí)現(xiàn)方式：ajax+ashx+json

注意事項(xiàng)： 官網(wǎng)所需格式為：[5,6,7,9,34] 數(shù)組類(lèi)型

具體代碼，各位看官 請(qǐng)下移目光。

<!--js代碼 --> <script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/echarts/echarts.min.js"></script> 
<div>
<%--按鈕觸發(fā)--%>
<input type="button" id="btncanv" value="去吧 皮卡丘" /> 
</div>
<%--聲明一個(gè)DIV 用來(lái)裝Canvas繪制的圖片--%>
<div id="contanis" style="width:1000px;height:800px" >
<script type="text/javascript"> 
$("#btncanv").click(function () {
//獲取到繪制dom
var dom = document.getElementById("contanis");
var myChart = echarts.init(dom);
myChart.setOption({
title: {
text: '異步數(shù)據(jù)加載示例' //圖片標(biāo)題
},
tooltip: {},
legend: {
data: ['部門(mén)人口'] 
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '2015',
type: 'bar',//可以更改為 line（折線）
data: [] //此處給空 后面用ajax給他賦值
}]
});

老規(guī)律 下面就是ajax 部分了 ：

myChart.showLoading(); //數(shù)據(jù)加載完之前先顯示一段簡(jiǎn)單的loading動(dòng)畫(huà)
var names = []; //類(lèi)別數(shù)組（實(shí)際用來(lái)盛放X軸坐標(biāo)值）
var nums = []; //銷(xiāo)量數(shù)組（實(shí)際用來(lái)盛放Y坐標(biāo)值）
$.ajax({
type: "post",
async: true, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶(hù)其他操作必須等待請(qǐng)求完成才可以執(zhí)行）
url: "../Handler/DepartmentHandler.ashx", //請(qǐng)求發(fā)送到../Handler/DepartmentHandler處
data: {},
dataType: "json", //返回?cái)?shù)據(jù)形式為json
success: function (result) { 
//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對(duì)象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].name); //挨個(gè)取出類(lèi)別并填入類(lèi)別數(shù)組
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].values); //挨個(gè)取出銷(xiāo)量并填入銷(xiāo)量數(shù)組
}
myChart.hideLoading(); //隱藏加載動(dòng)畫(huà)
myChart.setOption({ //加載數(shù)據(jù)圖表
xAxis:{data: names},
series: [{ data: nums }]
});
}
},
error: function (errorMsg) {
//請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)
alert("圖表請(qǐng)求數(shù)據(jù)失敗!");
myChart.hideLoading();
}
})
});

附上效果圖吧：


　其實(shí)option的設(shè)置是可以放在ajax里面的 一樣會(huì)出效果 而且容易更看

就拿餅圖來(lái)說(shuō)吧 代碼可以這么寫(xiě)啊 

$.ajax({
type: "get",
async: true, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶(hù)其他操作必須等待請(qǐng)求完成才可以執(zhí)行）
url: "../Handler/DepartmentHandler.ashx", 
data: {},//demo 沒(méi)加條件
dataType: "json", //返回?cái)?shù)據(jù)形式為json
success: function (result) { for (var i = 0; i < result.length; i++)
{
name.push(result[i].name); 
} 
option = {
title: {
text: '部門(mén)人口比例',
subtext: '測(cè)試數(shù)據(jù)',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:name
},
series: [
{
name: '2012年度',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: result,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}; 
}, error: function (errorMsg) { //請(qǐng)求失敗時(shí)執(zhí)行該函數(shù) alert("圖表請(qǐng)求數(shù)據(jù)失敗!"); } });

如果你是想學(xué)習(xí)這個(gè) 作為一個(gè)吃過(guò)虧的菜鳥(niǎo)告訴你 先還是好好看看 官方的例子 然后理清思路在下手

以上所述是小編給大家介紹的基于Echarts 3.19 制作常用的圖形(非靜態(tài))的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論