Create a pie chart with Baidu echarts and a pie chart with echarts

Source: Internet
Author: User

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 );}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.