Ajax dynamically assigned echarts instances (pie charts and column charts), ajaxecharts
This article takes the Dynamic assignment of bar chart and pie chart ajax as an example.
I. Assignment steps
(1) jsp page
<! -- Introduce echarts official js --> <script src = "js/echarts. js"> </script> <body> <! -- Prepare a DOM cookie with the size (width and height) for ECharts --> <div id = "first" style = "width: 600px; height: 400px; "> </div> [html] view plain copy </body>
(2) js page
// Pie chart template var dom = document. getElementById ("first"); var myChart = echarts. init (dom); var app ={}; option = null; option = {title: {text: 'user location records', subtext: '', x: 'center'}, tooltip: {trigger: 'item', formatter: "{a} <br/> {B }:{ c} ({d} % )"}, legend: {orient: 'vertical ', x: 'left', data: []}, toolbox: {show: true, feature: {mark: {show: true }, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['pie ', 'funnel'], option: {funnel: {x: '20180101', width: '20180101', funnelAlign: 'left', max: 25% }}, restore: {show: true}, saveAsImage: {show: true }}, calculable: true, series: [{name: '', type: 'pie ', radius: '000000', center: ['2016 ', '20140901'], data: []}; if (option & typeof option = "object") {myChart. setOption (option, true);} // the pie chart is dynamically assigned var year = $ ("# year-search "). val (); var mouth = $ ("# mouth-search "). val (); $. ajax ({type: "get", url: rootPath + "/wxbound/getPieDataByMouth. action ", data: {" year ": year," mouth ": mouth}, cache: false, // disable the cache dataType:" json ", success: function (result) {var names = []; // defines two arrays var nums = []; $. each (result, function (key, values) {// here I return list <String, map <String, String> cyclic map names. push (values. province_name); var obj = new Object (); obj. name = values. province_name; obj. value = values. count; nums. push (obj) ;}); myChart. setOption ({// load the data chart legend: {data: names}, series: {// corresponding series name: ['quantity'], data: nums}) ;}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert ("query failed ");}});
(3) The background code should be based on your own code.
(4) display style
Ii. Column chart assignment steps
(1) jsp page
<! -- Introduce echarts official js --> <script src = "js/echarts. js"> </script> <body> <! -- Prepare a DOM column with the size (width and height) for ECharts --> <div id = "second" style = "width: 600px; height: 400px; "> </div> </body>
(2) js page
// Bar chart template var domLong = document. getElementById ("second"); var myChartSecond = echarts. init (domLong); var app ={}; option = null; option = {color: ['# 3398db'], tooltip: {trigger: 'axis', axisPointer: {// coordinate axis indicator, which triggers a valid type: 'shadow '// The default is a straight line. Optional values: 'line' | 'shadow' }}, grid: {left: '3% ', right: '4%', bottom: '3% ', containLabel: true}, xAxis: [{type: 'category', data: [], axisTick: {alignWithLabel: true}], yAxis: [{type: 'value'}], series: [{name: 'Access directly ', type: 'bar ', barWidth: '000000', data: []}; if (option & typeof option = "object") {myChartSecond. setOption (option, true);} // assign var year = $ ("# year-search") to the column category "). val (); $. ajax ({type: "post", url: rootPath + "/wxbound/getWxboundList. action ", data: {" year ": year}, cache: false, // disable the cache dataType:" json ", success: function (result) {console. log (result); var linNames = []; var linNums = []; $. each (result. lin, function (key, values) {linNames. push (values. mouth); linNums. push (values. count) ;}); // The column marker value is myChartSecond. setOption ({// load the data chart xAxis: {data: linNames}, series: {// corresponding series name: ['quantity'], data: linNums }}) ;}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert ("query failed ");}});}
(3) The background code is just as needed...
(4) image styles
You can try your echarts icon...
The above ajax dynamic echarts instance (pie chart and column chart) is all the content shared by the editor. I hope it can be used as a reference and support for the customer's house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
