Chart of ASP. NET MVC Project Development Echarts pie chart (ii)

The above describes the histogram, only the JS code backstage transfer, etc. we introduced the use of pie chart in the process of doing the introduction

With the introduction of histogram, in the use of pie chart, in fact, it is very easy, on the code

   // open Web page load    $ (function  () {        //  path configuration         require.config ({            paths: {                 ' Http://echarts.baidu.com/build/dist '}        );        Areaquery ();    })

View Code

Because not the front end of the professional, the front-end code is not very good, please don't take offense, query asynchronous code

 //Query Operations    functionAreaquery () {varName = "Marriage";//Account Nature Name        vararrays =NewArray ();//Save the obtained data information        varNamearrays =NewArray ();//Get Property name        varsum = 0;//Sum of data        varResId = $ ("#ddlResidence"). Val (); if(ResId = = "") {resId= 0; } Else{resId=parseint (resId); }        varCounty = $ ("#ddlCountyArea option:selected"). attr ("value");//County        varTown = $ ("#ddlTownArea option:selected"). attr ("value");//Town        varVillage = $ ("#ddlSubArea option:selected"). attr ("value");//Village        varAreaid = 0; varLevel = 0; if(Village! = "") { level= 3; Areaid=Village; } Else {            if(Town! = "")) {Areaid=Town ; level= 2; } Else {                if(County! = "") {Areaid=County; level= 1; }            }        }        //get the chart data asynchronously$.ajax ({type:"POST", URL:"@Url. Action (" Getmarriagelist ")", datatype:"JSON", data: {areaid:areaid, level:level}, Beforesend:function(XMLHttpRequest) {$ ("#pint"). Text ("Data is loading, please later ..."); }, Success:function(JSON) {Namearrays.splice (0, Namearrays.length);//clear the data first, then insert theArrays.splice (0, arrays.length);//clear the data first, then insert the                 for(varIteminchJSON)                    {Namearrays.push (item);                    Arrays.push (parseint (Json[item)); Sum= Sum +parseint (Json[item]);            } setoptionbar (name, namearrays, arrays, sum); }, Error:function() {alert ("No data in this area");    }        }); }

View Code

Setting codes for pie charts

  //Chart Settings    functionSetoptionbar (name, namedata, arrays, sum) {//Userequire ([' Echarts ',                ' Echarts/chart/pie '//load bar module with bar chart, load on Demand            ],            function(EC) {//Initialize the Echarts chart based on the prepared Dom                varMyChart = Ec.init (document.getElementById (' main '))); //Initialize the Echarts chart based on the prepared Dom                varMyChart = Ec.init (document.getElementById (' main '))); Option={tooltip: {trigger:' Item ', Formatter:' {A} <br/>{b}: {C} ({d}%) '}, Legend: {Orient:' Vertical ', x:' Left ', Data:namedata}, Toolbox: {Sho W:true, Feature: {mark: {show:true}, DataView: {show:true, ReadOnly:false}, Magictype: {show:true, type: [' Pie ']}, restore: {show:true}, Saveasimage: {show:true}} , calculable:false, Series: [{//Name: ' Access source ',Type: ' Pie ', Selectedmode:' Single ', Radius: [0, 70], ItemStyle: {normal: { Label: {position:' Center ', TextStyle: {color:' #9966CC ', align:' Center ', Baseline:' Middle ', fontFamily:' Microsoft Ya Black ', FontSize:30, FontWeight:' Bolder '}}, Lab Elline: {show:false                                    }                                }                            },                        Data: [{value:sum, name:name}] }, {name:' Marital status ', type:' Pie ', Radius: [100, 140],                            //For Funnelx: ' 60% ', Width:' 35% ', Funnelalign:' Left ', Max:1048, data: [{value:arrays[0], Name:namedata[0]}, {value:arrays[1], name:namedata[1]}, {value:arrays[2], name:namedata[2]}, {value:arrays[3], name:namedata[3] }                            ]                        }                    ]                }; varEcConfig = require (' Echarts/config ')); Mychart.on (EcConfig.EVENT.PIE_SELECTED,function(param) {varSelected =param.selected; varSerie; varstr = ' Current selection: ';  for(varIdxinchselected) {Serie=Option.series[idx];  for(vari = 0, L = serie.data.length; I < L; i++) {                            if(Selected[idx][i]) {str+ = ' "series ' + idx + '" ' + Serie.name + ': ' + ' "data ' + i + '" ' + Serie.data[i].name + ' ‘; }}} document.getElementById (' Wrong-message '). InnerHTML =str;            }) mychart.setoption (option); })    }

View Code

On

Here the pie chart is modified, the middle part shows the fields of the query, the data in the middle is the sum of all the query data. The comments in the code are very detailed and will not be explained, so we will introduce the data and transform it into the pattern we want.

ASP. NET MVC Project Development Chart Echarts pie chart (ii)