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

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

$("#btngo").click(function () { //這里用的是點擊事件下面 當然這也是模仿你有條件查詢的時候咯var dom = document.getElementById('contanis');var mycharts = echarts.init(dom);option = {title: {text: '部門人口比例',subtext: '測試數據',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (iwvjtn8m0%)"},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)' //這怎么會有個.5呢？ 看來還是要看看H5喲}}}]};mycharts.setOption(option);

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

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

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

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

$.ajax({type: "get",async: true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）url: "../Handler/DepartmentHandler.ashx", data: {},//demo 沒加條件dataType: "json", //返回數據形式為jsonsuccess: function (result) { for (var i = 0; i < result.length; i++){name.push(result[i].name); } option = {title: {text: '部門人口比例',subtext: '測試數據',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (iwvjtn8m0%)"},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) { //請求失敗時執行該函數 alert("圖表請求數據失敗!"); } });