Pie chart:
Environment: Echarts 3.19 vs 2013
Implementation method: ajax+ashx+json
Note: The required format of the official website is [{value:23,name:'xxxx' }] Please do not write the name of the key incorrectly
For specific code, please look down.
<!--Please quote the file first-> <script src="../Scripts/jquery-1.8.2.min.js"></script><script src="../Scripts/echarts/echarts.min.js"></script>
Just set a div in the page section
<div><input type="button" id="btngo" value="Pie" /> </div><div id="contanis"></div>
Next is the js part. In fact, Echarts is still related to Canvans in HTML5. If you want to know, you can check the information.
$("#btngo").click(function () { //The click event is used here. Of course, this is also a simulation when you have conditional query var dom = document.getElementById('contanis');var mycharts = echarts.init(dom); option = {title: {text: 'Department population ratio',subtext: 'test data',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: []},series: [{name: '2012',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [],itemStyle: {empasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)' //How can this be .5? It seems that you still have to look at H5}}}]};mycharts.setOption(option);Next is the ajax part. Dynamic loading of data is the fundamental problem. It’s so boring. I’ll do this bowl of Mengpo soup in the next life. I’ll do UI design.
$.ajax({type: "get",async: true, //Async request (synchronous request will lock the browser, and other operations of the user must wait for the request to complete before execution) url: "../Handler/DepartmentHandler.ashx", data: {},//demo No conditional dataType: "json", //Return data form jsonsuccess: function (result) {for (var i = 0; i < result.length; i++){name.push(result[i].name); } mycharts.setOption({ //Load data chart legend:{data:name },series: [{data:result}]});},error: function (errorMsg) {//Execute this function alert when the request fails("Character request data failed!");}});The ashx part is much simpler to simply serialize data
DataTable result = BLL.Department.GetDeptNumber(); List<object> list = new List<object>();foreach (DataRow dr in result.Rows){// Attach the required format for Echarts: [{value:335, name:'Direct access'}]Deart d = new Deart();d.value = Convert.ToInt32(dr["number"]);// Use values Echarts carelessly and don't recognize it, it's always undefined d.name = dr["D_Name"].ToString(); list.Add(d);}JavaScriptSerializer jss = new JavaScriptSerializer();string json = jss.Serialize(list);public class Deart //In fact, you don't need to define yourself insofar as this, so that the value of it comes out is int{public int value { get; set; }public string name { get; set; } }Attach the renderings:
Bar chart:
Environment: Echarts 3.19 vs 2013
Implementation method: ajax+ashx+json
Notes: The required format of the official website is: [5,6,7,9,34] array type
For specific code, please look down.
<!--js code--> <script src="../Scripts/jquery-1.8.2.min.js"></script><script src="../Scripts/echarts/echarts.min.js"></script> <div><%---button triggers--%><input type="button" id="btncanv" value="Go Pikachu" /> </div><%--Declare a DIV to install the image drawn by Canvas--%><div id="contanis" ><script type="text/javascript"> $("#btncanv").click(function () {//Get the drawing domvar dom = document.getElementById("contanis");var myChart = echarts.init(dom);myChart.setOption({title: {text: 'Async data loading example' //Image title},tooltip: {},legend: {data: ['Department Population'] },xAxis: {data: []},yAxis: {},series: [{name: '2015',type: 'bar',//Can be changed to line (polyline) data: [] //Issues empty here to assign ajax value to it}]});The old rules are the ajax part:
myChart.showLoading(); //Before the data is loaded, a simple loading animation is displayed. var names = []; //Category array (actually used to hold X-axis coordinate values) var nums = []; //Sales array (actually used to hold Y-coordinate values) $.ajax({type: "post",async: true, //Async request (synchronous request will lock the browser, and other operations of the user must wait for the request to be completed before execution) url: "../Handler/DepartmentHandler.ashx", //The request is sent to ../Handler/DepartmentHandler data: {},dataType: "json", //Return data form jsonsuccess: function (result) { //Execute the function content when the request is successful, and result is the json object returned by the server if (result) {for (var i = 0; i < result.length; i++) {names.push(result[i].name); //Take out the categories one by one and fill in the category array}for (var i = 0; i < result.length; i++) {nums.push(result[i].values); //Take out the sales volume one by one and fill in the sales volume array}myChart.hideLoading(); //Hide loading animation myChart.setOption({ //Load the data chart xAxis:{data: names},series: [{ data: nums }]});}},error: function (errorMsg) {//Execute this function alert when the request fails("Character request data failed!"); myChart.hideLoading();}})});Attach the renderings:
In fact, the option setting can be placed in ajax and will produce effects and be easier to see.
Take the pie chart as an example. The code can be written like this
$.ajax({type: "get",async: true, //Async request (synchronous request will lock the browser, and other operations of the user must wait for the request to complete before execution) url: "../Handler/DepartmentHandler.ashx", data: {},//demo No conditional dataType: "json", //Return data form jsonsuccess: function (result) { for (var i = 0; i < result.length; i++){name.push(result[i].name); } option = {title: {text: 'Department population ratio',subtext: 'test data',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data:name},series: [{name: '2012',type: 'pie',radius: '55%',center: ['50%', '60%'],data: result,itemStyle: {empasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}; }, error: function (errorMsg) { //Execute the function alert when the request fails ("Character request data failed!"); } });If you want to learn this as a rookie who has suffered a loss, tell you to take a look at the official example first and then clarify your ideas and start
The above is the relevant knowledge introduced to you about the commonly used graphics (non-static) based on Echarts 3.19. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!