Create a pie chart with Baidu echarts and a pie chart with echarts
I am also a new graduate. What's wrong? I 'd like to give you a lot of advice and directly reference the code // Baidu echarts library and jquery library <script src = ".. /.. /js/echarts. min. js "> </script> <script src = ".. /ui/js/jquery. min. js "> </script> // defines a div block to store the pie chart <div id =" echart1 "style =" width: 90%; height: 90%; "> </div> // write the echart control dataset var myChart = echarts In the js Code. init (document. getElementById ('echart1'); // The dataset option of the echart control is {title: {text: 'device type statistics', 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: 'device model', type: 'pie', radius: '000000', center: ['000000', '000000'], 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 retrieves background data $ (document ). ready (function () {Chartload () ;}); function Chartload () {// delay animation myChart. showLoading (); // ajax obtains the data required by 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; // process the returned data accordingly (I = 0; I <data. length; I ++) {if (data [I]. value = 0) {// if the data obtained is 0, the continue is not displayed in echarts;} else {var name = data [I]. name; xatrnames. push (Data [I]. name); yvalidators. push ({value: data [I]. value, name: data [I]. name}) ;}// fill the processed data into the echart Data Set option. legend. data = xatrnames; option. series [0]. data = yvalidators; myChart. setOption (option); myChart. hideLoading ();} The data returned by else {// ajax is 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 ("error"); option. legend. data = ["W0", "W1", "W2"]; option. series [0]. data = ["10", "0", "10"]; myChart. setOption (option); myChart. hideLoading () ;}}) ;}// background Handler. 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 '20140901 '"; string sql15 = where + "and id like '000000'"; string sql16 = where + "and id like '000000'"; Newfei. BLL. car_school sBLL = new Newfei. BLL. car_school (); // I changed some words here to int value11 = sBLL. getCountBySearch (sql11); int value15 = sBLL. getCountBySearch (sql15); int value16 = sBLL. getCountBySearch (sql16); string a = "W11"; string B = "W15"; string c = "W16 "; // concatenate data into json string format result = "[{\" name \ ": \" "+ a +" \ ", \" value \": \ "" + value11 + "\" },{ \ "name \": \ "" + B + "\", \ "value \": \ "" + value15 + "\" },{ \ "name \": \ "" + c + "\", \ "value \": \ "" + value16 + "\"}] "; context. response. write (result);} // Add using System in another way. web. script. serialization; // JavaScriptSerializer class, Serialization and deserialization, used to transmit data between the browser and the Web server using JavaScriptSerializer jsS = new JavaScriptSerializer (); list <object> lists = new List <object> (); string result = ""; string ouGuid = ""; // define in global variables // The getpie method is converted to the json data format public void GetPie (HttpContext context) {DataTable dt = new DataTable (); dt = Select (). table; // Save the query result to 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 );}