Baidu Echarts Pie Chart Column chart use example

Some time ago the company made public opinion related software, public opinion used a large number of charts, considerable data interaction. At that time did not tidy down, once used these things yesterday, so prepare to record down, easy to use later.

Baidu Echart is Baidu for data display do a chart plug-in bar, generally we use is not a problem, mainly for dynamic data analysis. Here I use pie charts, and columnar graphs for example:

First, we need to define a container for the drawing: (class is my own definition, this container can be a div)

<div class= "Fm_box pd-10 Border-grey" id= "shanxing" style= "height:500px"; ></div>
<div class= "Fm_box pd-10 Border-grey" id= "Zhuzhuang" style= "height:500px"; ></div>
Then we need to introduce our echart.min.js.

After the preparation is done, here is the time to initialize the chart.

First we need to define two mychart, respectively, as our pie-shaped and columnar graphs.

var MyChart = echarts.init (document.getElementById (' shanxing '));
var myChart2 = echarts.init (document.getElementById (' Zhuzhuang '));

option is then defined: The writing of the data format: (here because there are two graphs, the data is represented by option, Option2)

option = {


Title: {


Text: ' A site user access source ',


X: ' Center '


},


ToolTip: {


Trigger: ' Item ',


Formatter: "{A} &lt;br/&gt;{b}: {C} ({d}%)"


},


Legend: {


Orient: ' Vertical ',


x: ' Left ',


Data:[]


' Direct access ', ' mail marketing ', ' affiliate ads ', ' video ads ', ' Search engines '


},


Toolbox: {


Show:true,


Feature: {


Mark: {Show:true},


DataView: {show:true, readonly:false},


Magictype: {


Show:true,


Type: [' pie ', ' funnel '],


Option: {


Funnel: {


x: ' 25% ',


Width: ' 50% ',


Funnelalign: ' Left ',


max:1548


}


}


},


Restore: {show:true},


Saveasimage: {show:true}


}


},


Calculable:true,


Series: [


{


Name: ' Access source ',


Type: ' Pie ',


Radius: ' 55% ',


Center: [' 50% ', ' 55% '],


data:[


{value:335, Name: ' Direct Access '},


{value:310, Name: ' Mail Marketing '},


{value:234, Name: ' affiliate AD '},


{value:135, Name: ' Video ads '},


{value:1548, Name: ' Search engine '}


]


}


]


};


Option2 = {


Title: {


Text: ' Evaporation and precipitation in an area ',


Subtext: ' Pure fiction '


},


ToolTip: {


Trigger: ' axis '


},


Legend: {


data:[' number of items ']


},


Toolbox: {


Show:true,


Feature: {


Mark: {Show:true},


DataView: {show:true, readonly:false},


Magictype: {show:true, type: [' line ', ' Bar ']},


Restore: {show:true},


Saveasimage: {show:true}


}


},


Calculable:true,


Xaxis: [


{


Type: ' Category ',


Data: []


}


],


YAxis: [


{


Type: ' Value '


}


],


Series: [


{


Name: ' Project ',


Type: ' Bar ',


Data:[],


}


]


};


As you can see, I've commented out the data inside the series, or deleted it, because the charts are typically used to show Dynamic data, monitor data changes, and fixed charts don't have the meaning to write this blog.

Okay, next, let's simulate a JSON file. Used for our data. Very simple data format.

{"Result": 1, "MSG": null, "Object": [[website], "Weibo", "micro-letter", "forum", "News", "government affairs", "newspaper"],[10,20,180,995,450,250,360]], "Totalpage" : 0, "sum": 0}

This JSON is an ordinary data. Let's say we get a bunch of JSON in the background, and then we're going to parse it and put it in the way the chart draws.

We need to make a request first.

$.ajax ({


Type: "Get",


Async:true,//Synchronous execution


URL: "Tets.json",


DataType: "JSON",//return data in the form of JSON


Success:function (data) {


Console.log (data.object[0].length);


for (var i= 0,len=data.object[0].length;i&lt;len;i++) {


var json={};


var data2=data.object[0];


Json.name=data.object[0][i];


Json.value=data.object[1][i];


Option.series[0].data[i]=json;


OPTION.LEGEND.DATA=DATA.OBJECT[0];


OPTION2.XAXIS[0].DATA=DATA.OBJECT[0];


OPTION2.SERIES[0].DATA=DATA.OBJECT[1];


}


Mychart.clear ();


Mychart.hideloading ();


mychart.setoption (option);


Mychart2.clear ();


Mychart2.hideloading ();


Mychart2.setoption (option2);//Use the configuration items and data just specified to display the chart.


},


Error:function (errormsg) {


Alert ("Chart request data failed!");


}


});


The URL is the interface where we request the data, and when we request the data, we iterate over the data. You may see that I have defined an object in it because we do not meet our requirements according to the requested data, so we need to convert the data.

Detailed no longer say, own reference.

Let's say Mychart.clear (); mychart.hideloading (); mychart.setoption (option);

The first is to initialize and empty the canvas before each icon is drawn, in order to prevent the data from not being cleaned up and there being a cache or something. This can affect the drawing effect.

The second one is when the picture is drawn and a similar loading animation effect. There is also a mychart.showloading ();

The third one is drawing! The equivalent of calling all configurations to start drawing. The top container, the data write, is for the preparation, and Mychart.setoption () is the real drawing, using the configuration items and data just specified to display the chart.

Below is the complete code for the configuration except for the container:

Echart


var MyChart = echarts.init (document.getElementById (' Qinggan '));


var myChart2 = echarts.init (document.getElementById (' Bar '));


option = {


Title: {


Text: ' A site user access source ',


X: ' Center '


},


ToolTip: {


Trigger: ' Item ',


Formatter: "{A} &lt;br/&gt;{b}: {C} ({d}%)"


},


Legend: {


Orient: ' Vertical ',


x: ' Left ',


Data:[]


' Direct access ', ' mail marketing ', ' affiliate ads ', ' video ads ', ' Search engines '


},


Toolbox: {


Show:true,


Feature: {


Mark: {Show:true},


DataView: {show:true, readonly:false},


Magictype: {


Show:true,


Type: [' pie ', ' funnel '],


Option: {


Funnel: {


x: ' 25% ',


Width: ' 50% ',


Funnelalign: ' Left ',


max:1548


}


}


},


Restore: {show:true},


Saveasimage: {show:true}


}


},


Calculable:true,


Series: [


{


Name: ' Access source ',


Type: ' Pie ',


Radius: ' 55% ',


Center: [' 50% ', ' 55% '],


data:[


{value:335, Name: ' Direct Access '},


{value:310, Name: ' Mail Marketing '},


{value:234, Name: ' affiliate AD '},


{value:135, Name: ' Video ads '},


{value:1548, Name: ' Search engine '}


]


}


]


};


Mychart.hideloading ();


mychart.setoption (option);


Option2 = {


Title: {


Text: ' Evaporation and precipitation in an area ',


Subtext: ' Pure fiction '


},


ToolTip: {


Trigger: ' axis '


},


Legend: {


data:[' number of items ']


},


Toolbox: {


Show:true,


Feature: {


Mark: {Show:true},


DataView: {show:true, readonly:false},


Magictype: {show:true, type: [' line ', ' Bar ']},


Restore: {show:true},


Saveasimage: {show:true}


}


},


Calculable:true,


Xaxis: [


{


Type: ' Category ',


Data: []


}


],


YAxis: [


{


Type: ' Value '


}


],


Series: [


{


Name: ' Project ',


Type: ' Bar ',


Data:[],


}


]


};


Emotional Analysis Chart


$.ajax ({


Type: "Get",


Async:true,//Synchronous execution


URL: "Tets.json",


DataType: "JSON",//return data in the form of JSON


Success:function (data) {


Console.log (data.object[0].length);


for (var i= 0,len=data.object[0].length;i&lt;len;i++) {


var json={};


var data2=data.object[0];


Json.name=data.object[0][i];


Json.value=data.object[1][i];


Option.series[0].data[i]=json;


OPTION.LEGEND.DATA=DATA.OBJECT[0];


OPTION2.XAXIS[0].DATA=DATA.OBJECT[0];


OPTION2.SERIES[0].DATA=DATA.OBJECT[1];


}


Mychart.clear ();


Mychart.hideloading ();


mychart.setoption (option);


Mychart2.clear ();


Mychart2.hideloading ();


Mychart2.setoption (option2);//Use the configuration items and data just specified to display the chart.


},


Error:function (errormsg) {


Alert ("Chart request data failed!");


}


});