Echarts implementation map timing switching points and multi-chart level joint linkage


Recently doing projects encountered a statistical related needs, about four or more graphics statistics, Baidu map, pie chart, column Figure, line type diagram. All storefronts are probably located all over the country, and there is a scatter in the map. If the default is displayed Zhengzhou scatter flash, other graphics display Zhengzhou related data; 5 seconds to switch the next area point, other chart data corresponds to changes. First, you need it, you can follow

echarts实现地图定时切换散点与多图表级联联动详解

2. Introduce Echarts and map-related JSON

Echarts 3 Start no longer forced to use AMD to introduce, the code is no longer built-in AMD loader. Therefore, the introduction method is much simpler, and only the Script tag is used as a regular JavaScript library.

            3. Interface layout     A plurality of layouts in a page have several forms Reference processing. 
The first type: Creating multiple DIV positioning in the web page, multiple canvas. This method declares multiple Echarts objects, no longer introduces, unless special personality needs, is not recommended.

Second: A Div, a canvas, an Option, multiple series, adjusting the graphic X / Y percent to locate the graphic display to the location on the interface. This method is used herein. The third type: As the second basic, the biggest difference is that there is a title on each icon, multiple Optioins; also multiple canvas, but it is recommended. Website reference: http://gallerY.echartsjs.com/Editor.html?c=XBKXGRWejm

Options = [// First graph {BackgroundColor: ‘ #Ffffff ‘, title: {text:’ sales revenue of can-lax 2016-2017, textStyle: {FONTSIZE: 14}}, tooltip: {// 提 提 组 组 组: ‘axis’, axispointer: {// coordinate Axis indicator, the coordinate axis trigger effective Type: ‘shadow’ // default is straight, optional: ‘line’ | ‘shadow’}}, legend: {data: [‘2016’, ‘2017’, ‘Growing Rate ‘], top: ’18’}, grid: {left: ‘3%, Right:’ 5% ‘, Bottom:’ 3% ‘, ContainLabel: true, show: false // Grid Border is displayed, And right box}, toolbox: {show: false, readonly: false}, // data attempt to display // magistype: {show: true, type: [‘stack “,’ tiled ‘]}, // restore: {show: true}, saveasimage: {show: true}}}, xaxis: {type:’ category ‘, BoundaryGap: true, // Random axisSplitline: {// NEGONE X-axis corresponds to Show: false}, Data: [‘Jan,’ February ‘,’ March ‘,’ April ‘,’ May ‘,’ June ‘,’ July ‘,’ August ‘,’ September ‘,’ REGEN ‘,’ NEGROTER ‘,’ Decene ‘]}, Yaxis: [// Double Y Carton {Name:’ Revenue (10K ) ‘, type:’ value ‘, splitline: {// Grid line Y axis corresponds to show: false}, Axislabel: {formatter:’ {value} ‘}}, {name:’ growing \ nrate (% ) ‘, // namelocation:’ start ‘, splitline: {// Whether the grid line Y axis corresponds to Show: False}, min: 0, max: 300, // Growing Rate Upper Limit Type:’ Value ‘, // Top: 10, Inverse: false, axisline: {lineestyle: {color: ‘# 2f4554’}}}], series: [{name: ‘2016’, type: ‘bar’, color: ‘# 00BFFF’, // stack: ‘Total’, MarkPoint: {data: [{type: ‘max “, name:’ max value ‘}, {type:’ min ‘, name:’ minimum ‘}]}, markline: { Data: [{Type: ‘Average’, NAMe: ‘Average’}]}, Data: [1741.9, 977, 1742.2, 1431.1, 1636.2, 1447, 1711.7, 1921.2, 2609.6, 3332.6, 3647.3, 2498.1]}, {Name: ‘2017’, TYPE: ‘BAR ‘, Color:’ # DC143C ‘, // stack:’ Total quantity ‘, MarkPoint: {data: [{type:’ max “, name: ‘maximum’}, {type: ‘min’, name: ‘Minimum Value ‘}]}, markline: {data: [{TYPE:’ AVERAGE ‘, NAME:’ Average ‘}]}, DATA: [2609, 1162.9, 2942.9, 5174.6, 5114.4, 5065.8, 3956.1, 3691.1, 4637.6, 4603.8, 6401.1, 4988.4]}, {name: ‘growing rate’, type: ‘line’, yaxisindex: 1, // YaxisIndex 1 Represents the second Y axis, default is 0 color: ‘# ffd700’, // stack : ‘Total quantity’, markpoint: {data: [{type: ‘max “, name:’ max value ‘}, // {type:’ min ‘, name:’ minimum ‘}]}, Data: [49.8 , 19, 68.9, 261.6, 212.6, 250.1, 131, 92.1, 77.7, 38.1, 75.5, 99.7]}]}, // VisuaLMAP: {# There is a visual mapping component // type: ‘Continuous’, // Dimension: 1, // text: [‘High’, ‘Low’], // Inverse: True, // ItemHeight: 200, // Calculable: True, // min: -2, // max: 6, // Top: 60, // Left: 10, // Inrange: {// Colorlightness: [0.4, 0.8] //}, / / outofrange: {// color: ‘#bbb’ //}, // controller: {// Inrange: {// color: ‘# 01949b’ //} //} //}, // 2nd graph {BackgroundColor: ‘# ffffff’, // Background Color Title: {text: ‘Cargo Load Factor-2016/2017’, TextStyle: {FONTSIP: 14,}}, Tooltip: {TRIGGER: ‘AXIS’}, legend: { Data: [‘CLF-2016’, ‘CLF-2017’], top: ’18 ‘// Distance from the top of the container}, grid: {left:’ 3%, Right: ‘4%, Bottom:’ 3%, ContainLabel: true}, Toolbox: {short: false, readonly: false}, // data tries to display SaveAsImage: {show: true}} in the control}, xaxis: {type: ‘category’, BoundaryGap: false, // Coordinate axis Two-sided white Policy splitline: {// Grid line X axis corresponds to show: false}, Data: [‘Jan’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘Room’, ‘November’, ‘Deceased’]}, yaxis: {type: ‘value’, name: ‘CLF (%)’, min: 70, max: 100, interval: 10, splitline: {// Net line Y axis corresponds to whether Show show: false}}, series: [{name: ‘CLF-2016’, TYPE: ‘LINE’, DATA: [88.29, 83.68, 89.64, 90.07, 90.85, 90.32, 90.56, 86.69, 81.77]}, {Name: ‘CLF-2017’, TYPE: ‘LINE’, DATA: [90.36, 86.21, 92.04, 89.03, 90.99, 88.35, 87.18, 86.29, 81.23]}]}, // 3rd Graph {BackgroundColor: ‘# fffff’, title: {text: ‘Sales StRCTURE OF CAN-LAX IN 2016’, // Left: ‘Center’, // Title Location TextStyle: {FONTSIZE: 14,} }, Tooltip: {TRIGger: ‘axis’, axispoint: {// Coordinate axis indicator, the coordinate axis trigger TYPE: ‘Shadow’ // default is straight, optional: ‘line’ | ‘shadow’}}, Toolbox: {Feature: {DataView: {show: false, readonly: false}, // Data Attempts to display // magistype: {show: true, type: [‘stack “,’ tiled ‘]}, // rest’, ’tiled’]}, // RESTORE: {show: {show : true}, saveasimage: {show: true}}}, legend: {data: [‘Direct “,’ Transfer ‘,’ Joint ‘,’ Mail ‘], Top: ’18’}, grid: {Left: ‘2%, Right:’ 9%, Bottom: ‘3%, ContainLabel: true, show: false // Grid border is displayed, up, and right box}, xaxis: [{type:’ category ‘, Splitline: {// NEGONE X-axis corresponds to Show: false}, Data: [‘Jan,’ February ‘,’ March ‘,’ April ‘,’ May ‘,’ June ‘,’ July ‘,’ August ‘,’ September ‘,’ RMB ‘,’ November ‘,’ December ‘]}], YAXIS: [{name:’ Revenue (10k) ‘, TYPE: The ‘Value’, the splitline: {// Whether the grid line Y axis corresponds to Show: false}, Axislabel: {Formatter: ‘{Value}’},}], Series: [{Name: ‘Direct’, Type: ‘Bar’, ItemStyle: {Normal: {Color: ‘# 01949b’},}, // markpoint: {// Data: [// {type: ‘max’, name: ‘Maximum Value ‘}, // {type:’ min ‘, name:’ minimum ‘} //] //}, markline: {data: [{type:’ average “, name: ‘average’}]}, Data: [919, 455.7, 1074.8, 911.7, 1006.8, 1075.6, 1106.1, 1274.5, 1755.6, 2562.7, 2056.1, 1227.9]}, {Name: ‘Transfer’, Type: ‘Bar’, ItemStyle: {Normal: {Color: ‘# Eba954’},}, // markpoint: {// data: [// {type: ‘max “, name:’ max), // {type: ‘min’, name: ‘minimum value } //] //}, markline: {data: [{type: ‘average “, name:’ average ‘}]}, Data: [567.1, 261.4, 456.8, 387, 419.2, 227, 417, 413.1, 564, 583, 915.9, 666.3]}, {Name: ‘Liabed’, Type: ‘Bar’, ItemStyle: {NORMAL: {Color: ‘# c23531’},}, // markpoint: {// DATA: [// {Type: ‘max’, name: ‘max value’}, // {type: ‘min’, name: ‘minimum’} //] //}, markline: {data: [{ TYPE: ‘AVERAGE’, NAME: ‘Average’}]}, DATA: [255.9, 259.8, 210.5, 118.2, 196.5, 140.6, 188.6, 204.4, 290, 186.9, 661.3, 468.2]}, {Name: ‘Mail ‘, Type:’ Bar ‘, ItemStyle: {Normal: {Color:’ # 6495ed ‘},}, // MarkPoint: {// Data: [// {TYPE:’ MAX ‘, NAME:’ Maximum ‘} , // {type: ‘min’, name: ‘minimum’} //] //}, markline: {data: [{type: ‘averge “, name:’ average ‘}]}, DATA: [ 0, 0, 0, 14.2, 13.7, 0.8, 0, 29.2, 0, 0, 14, 135.8]}]}, // 4th graph {BackgroundColor: ‘# fffff’, title: {text: ‘Cargo Structure Percentage ‘, Subtext:’ 2016 ‘, Left:’ Center ‘, SubTextStyle: {FontSize: 18}}, Toolbox: {Feature: {DataView: {show: false, readonly: false}, // Data try to display // magistype: {show: true, type: {show: true, type: {show: true}}}, SHOW: TRUE}}}, Tooltip: {Trigger: ‘Item’, Formatter: “{a}

{b}: {c} ({D}%)”}, legend: {// orient: ‘vertical’, // top: ‘ Middle ‘, Bottom: 20, Left:’ Center ‘, Data: [‘ Direct ‘,’ Transfer ‘,’ Liancai ‘,’ Mail ‘], Show: False // Legend Not Display}, Series: [{Name: ‘Cargo Source’, Type: ‘Pie’, AvoidLabeloverlap: False, Radius: ‘50%, Center: [‘50% ‘, ‘58%’], SelectDMode: ‘Single’, label: {normal: {show: True, TextStyle: {FONTSIZE: ’10’, // fontweight: ‘bold’}, formatter: ‘{b}: {D}%’, Position: ‘Outer’}, EMPHASIS: {show: true, textStyle: { FONTSIZE: ’30’, fontweight: ‘bold’}}}, labelline: {normal: {show: tRUE}}, Data: [{Name: ‘Direct “, Value: 61.8}, {Name:’ Joint ‘, Value: 13.2}, {Name:’ Transfer ‘, value: 24.2}, {name:’ Mail ‘ , Value: 0.8}], ItemStyle: {Emphasis: {Shadowblur: 10, ShadowoffSetx: 0, ShadowColor: ‘RGBA (0, 0, 0, 0.5)’}}}]}, // Fifth graph {BackgroundColor: ‘#Fffff’, title: {text: ‘Sales StRCTURE OF CAN-LAX IN 2017’, // Left: ‘Center’, // Title Location TextStyle: {FONTSIZE: 14,}}, Tooltip: {Trigger: ‘Axis ‘, axispointer: {// The coordinate axis indicator, the coordinate axis trigger valid type:’ shadow ‘// default is straight, optional as:’ line ‘|’ shadow ‘}}, Toolbox: {Feature: {dataview: { Show: false, readonly: false}, // Data Attempts to display // magistype: {show: true, type: [‘stack’, ’tiled’]}, // RESTORE: {show: true}, SaveAsImage: {show: true}}}}}}}, legend: {data: [‘direct “,’ transfer ‘,’ link”, ‘mail’], top: ’18’}, Grid: {Left:’ 2% ‘, Right:’ 9% ‘, Bottom:’ 3%, ContainLabel: True, Show: false // Grid border is displayed, up, and right box}, XAXIS: [{TYPE: ‘CATEGORY’, SPLITLINE: {// Grid line X axis corresponds to show: false}, data: [Jan ‘,’ February ‘,’ March ‘,’ April ‘, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘REGEN’, ’11 Emperor’, ‘During the’ Due ‘]}], Yaxis: [{Name:’ REVENUE (10K) ‘, TYPE:’ VALUE ‘, SPLITLINE: {// Grid line Y axis corresponds to show: false}, Axislabel: {Formatter:’ {value} ‘},}], series: [{ Name: ‘Direct’, Type: ‘Bar’, ItemStyle: {Normal: {Color: ‘# 01949b’},}, // MarkPoint: {// Data: [// {type: ‘max’, name: ‘ Maximum value ‘}, // {type:’ min ‘, name:’ minimum value ‘} //] //}, markline: {data: [{type:’ average “, name: ‘average’}]} DATA: [1504.2, 622.8, 2132, 3668.6, 3797.3, 3632.8, 2716, 2320.6, 3288.1, 3220, 3911.4, 2942]},{Name: ‘Transfer’, Type: ‘Bar’, ItemStyle: {Normal: {Color: ‘# eba954’},}, // MarkPoint: {// Data: [// {type: ‘max’, name: ‘Maximum’}, // {type: ‘min’, name: ‘minimum’} //] //}, markline: {data: [{type: ‘averge’, name: ‘average’}] }, Data: [861.7, 196.6, 600.7, 836.2, 757.8, 804.2, 766.3, 797, 677.5, 734.2, 1363.5, 977.3]}, {name: ‘联’, type: ‘bar’, ItemStyle: {Normal: {Color: ‘# c23531’},}, // markpoint: {// Data: [// {type: ‘max’, name: ‘maximum’}, // {type: ‘min’, name: ‘ Minimum value ‘} //] //}, markline: {data: [{type:’ average ‘, name:’ average ‘}]}, Data: [240.6, 294.4, 202.6, 476.9, 308.3, 376.4, 334.7 , 401, 514, 506.4, 766.2, 794.4]}, {Name: ‘Mail’, Type: ‘Bar’, ItemStyle: {Normal: {Color: ‘# 6495ed’},}, // markpoint: {// Data : [// {type: ‘max’, name: ‘max value’}, // {type: ‘min’, name: ‘minimum value’} //] //}, markline: {data: [{type: ‘ Average ‘, Name:’ Average ‘}]}, Data: [2.5, 49.1, 7.6, 192.9, 251, 252.9, 139.1, 172.5, 157.9, 143.4, 359.9, 274.7]}]}, // 6th graph {backgroundColor: ‘# FFFFFF’, title: {text: ‘Cargo Structure Percentage’, subtext: ‘2017’, left: ‘center’, subtextStyle: {fontSize: 18}}, toolbox: {feature: {dataView: {show : false, readonly: false}, // Data Attempts to display // magisty: {show: true, type: {show: Tiled ‘]}, // rest’, ’tiled’]}, // RESTORE: {show: true}, saveasimage : {show: true}}}, tooltip: {trigger: ‘item’, formatter: “{a}

{b}: {C} ({D}%)”}, legend: {// orient: ‘Vertical’, // Top: ‘Middle’, Bottom: 20, Left: ‘Center’, Data: [‘Direct “,’ Transfer ‘,’ Joint ‘,’ Mail ‘], Show: false // Legend does not display}, Series: [{name: ‘cargo source’, type: ‘Pie’, AvoidLabeloverlap: False, Radius: ‘50%, Center: [‘50%, ‘58% ‘] , SelectedMode: ‘SINGLE’, LABEL: {Normal: {show: true, textStyle: {FONTSIZE: ’10’, // fontweight: ‘bold’}, formatter: ‘{b}: {D}%’, Position: ‘Outer’}, Emphasis: {show: True, TextStyle: {FONTSIZE: ’30’, fontweight: ‘bold’}}}, labelline: {normal: {show: true}}, data: [{name: ‘Direct ‘, Value: 66.1}, {Name:’ Joint ‘, Value: 11.1}, {name:’ Transfer ‘, value: 19.1}, {name:’ Mail ‘, Value: 3.7}], ItemStyle: {Emphasis: {ShadowBluR: 10, ShadowoffSetx: 0, ShadowColor: ‘RGBA (0, 0, 0, 0.5)’}}}]}];

Because No, the third method is found, so it is temporarily used in the second way, not very good control.Set and increase or decrease graphs. If I let me do it, I will choose the third, and I feel more flexible. The above is a plurality of charts that I found in the integration, and there may be better, I look forward to your message. echarts实现地图定时切换散点与多图表级联联动详解

The static code is very simple. Here, look at the web code layout:
  

Synthesis Statistics - Big screen

#BTNSET {Padding: 0; Background-Color : # 020933; Box-Siting: Border-Box; Position: Absolute; Left: 30px; Top: 24px; Z-Index: 9999} .btnplay {height: 20px; border-style: solId; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #fff; transition: all.5s ease} .btnpause {width: 20px; height: 20px; border-style: Double; Border-Width: 0 0 0 20px; Border-Color: # FFF}

         4. JS realizes graphic layout      / ** map level * / var mapContaINER = Document.GtelementByid ('mapContainer'); // Used to make Chart adaptive height and width through form high wide computing container high wide var resizeWorldMapContainer = function () {$ ("# mapContainer"). width ($ (Window) .width ()); $ ("# mapContainer"). Height ($ (window) .Height ()); // ("#mapcontainer").css("width ", $ (Window). Width () + "px"); // ("#mapcontainer ".css ("HEIGHT", $ (Window) .Height () + "px");}; // Based on ready-to-prepare DOM, initialization Echarts instance var mychart = echarts.init (mapContainer); var geocoordmap = {'Henan': [113.664496, 34.817821], 'Henan': [113.75783, 34.502434], 'Beijing': [116.403694, 3915378], 'Tianjin City: [117.216837, 39.142415], 'Shanghai': [121.479662, 31.234329], 'Hebei Province: [114.494585, 38.129532],' Shanxi ': [112.569095, 37.908919],' Liaoning Province: .445046, 41.806913], 'Jilin Province': [126.582519, 43.86473], 'Xinjiang': [87.559985, 43.879367], 'Tibet': [91.160816, 29.653148], 'Inner Mongolia': [111.771822, 40.93481], 'Sichuan Province': [106.492302, 29.601285], 'Qinghai Province': [101.73138, 36.627027], 'Guangdong': [113.254301, 23.129454], 'Hunan': [112.953187, 28.265007]}; Var data = [{name: 'Henan ", Value: 3}, {name:' Henan ', value: 1}, {name:' Beijing ', value: 1}, {name:' Tianjin ', Value: 1}, {Name: 'Shanghai', Value: 2}, {name: 'Hebei Province', Value: 1}, {Name: 'Shanxi Province', Value: 1}, {Name: 'Liaoning Province ', Value: 0}, {Name:' Jilin Province ', Value: 1}, {Name:' Xinjiang ', Value: 0}, {Name:' Tibet ', Value: 1}, {Name:' Inner Mongolia ' , Value: 0}, {Name: 'Sichuan', Value: 0}, {Name: 'Qinghai Province', Value: 0}, {Name: 'Guangdong Province', Value: 0}, {Name: 'Hunan Province ', Value: 0}]; var convertdata = function (data) {var res = []; for (var i = 0; i  {b}: {c} ({D}%) "} Data: [{Value: 2, Name: 'No Party: 4, Name:' Party Member ', Selected: true}, {value: 5, name:' group '}, {Value: 1, Name: 'Other'}]}, {name: 'age accounts', TYPE: 'PIE', Z: 2, // global drawing disk. Color: ['# c23531', '# 2f4554', '# 61a0a8', '# 91c7ae', '# 749f83', '# CA8622', '# BDA29A', '# 6e7074', '# # 6e7074' 546570 ',' # c4ccd3 '], Radius: ['20%', '30% '], center: ['20%', '80%], label: {formatter: "{b} {D} % "}, ItemStyle: {// itemStyle has normal display: Normal, highlights with mouse HOVER: Emphasis Emphasis: {// Normal Shows Shadow, Shadow is related to shadow Set Shadowblur: 10, // Shadow Size ShadowoffSetx: 0, // Offset ShadowColor: 'RGBA (0, 0, 0, 0.5)' // Shadow Color}}, // Display Series, Tooltip: {TRIGGER: 'item', formatter: "{a}  {b}: {c} ({D}%)}, ​​data: [{value: 2, name: '18 -25 '}, {Value: 8 Name: '26 -30 '}, {value: 2, name: '31 -40'}, {value: 0, name: '41 -55 '}, {value: 12, name: '55 or more'} ]}, {ID: 'Bar', Name: 'Taiwan Station Rank', Type: 'Bar', XaxisIndex: 0, Yaxisindex: 0, Label: {Normal: {Show: True, Position: ["100%", "40 % "], Color:" #ffffff ", formatter:" {b}: {C}}}, tooltip: {TRIGGER: 'Item', Formatter: "{b}: {C}"}}} // The color of each column is each item in the ColorList array. If the number of columns is more than the length of ColorList, the column color loop uses the array color: function (params) {var colorlist = ['# c23531', ' # 2f4554 ',' # 61a0a8 ',' # 91c7ae ',' # 749f83 ',' # CA8622 ',' # bda29a ',' # 6e7074 ',' # 546570 ',' # c4ccd3 ']; Return colorList [params.dataindex];}}, z: 2, data: [{value: 3, name: 'Henan'}, {Value: 1, name: 'Henan'}, {value: 1, Name: 'Beijing'}, {Value: 1, Name: 'Tianjin'}, {Value: 2, Name: 'Shanghai'}, {Value: 1, Name: 'Hebei Province'}, {Value: 1, Name: 'Shanxi'}, {Value: 0, Name: 'Liaoning Province'}, {Value: 1, Name: 'Jilin Province'}, {Value: 0, Name: 'Xinjiang'}, {Value: 1, Name: 'Tibet'}, { Value: 0, Name: 'Inner Mongolia'}, {Value: 0, Name: 'Sichuan'}, {Value: 0, Name: 'Qinghai Province'}, {Value: 0, Name: 'Guangdong'}, {Value: 0, Name: 'Hunan' '}]}, {name:' Please fake ', type:' bar ', xaxisindex: 1, yaxisindex: 1, tooltip: {trigger:' item ', formatter: "{a }: {c} "}, data: [1, 3, 2, 4, 1, 4, 3]}, {name: 'late is', type: 'bar', xaxisindex: 1, yaxisindex: 1, Tooltip: {Trigger: 'Item', Formatter: "{A}: {C}"}, Data: [1, 2, 3, 4, 3, 2, 2]}, {name: 'early retreat', TYPE: 'BAR ', XaxisIndex: 1, YaxisIndex: 1, Tooltip: {Trigger:' Item ', Formatter: {A}: {C}}, Data: [1, 2, 3, 4, 3, 2, 4]} , {name: 'House, Type:' Bar ',XaxisIndex: 1, YaxisIndex: 1, Tooltip: {Trigger: 'Item', Formatter: "{A}: {C}"}, Data: [1, 3, 2, 4, 1, 4, 2]}, { Name: 'overtime', Type: 'Bar', XaxisIndex: 1, YaxisIndex: 1, Tooltip: {Trigger: 'Item', Formatter: "}: {C}"}: [1, 3, 2 , 4, 1, 4, 2]}, {Name: '工', Type: 'Bar', XaxisIndex: 1, YaxisIndex: 1, Tooltip: {Trigger: 'Item', Formatter: {A}: {C } "}, DATA: [1, 3, 2, 4, 1, 2]}]}; mychart.setoption (option); // Reset container high and wide resizeWorldMapContainer (); mychart.resize (); redomethod (); // Used to make the CHART adaptation height and width window.onResize = function () {// Reset container high and wide resizeWorldMapContainer (); mychart.resize ();}; // Loop do something. MYCHART. On ('Click', Function (params) {if (params.data) {// var index =Json.stringify (data) .indexof (params.data.name); // Result: index = 1 // if (INDEX> = 0) {// Only for maps to click on the event // Click on a certain station, attendance Automatic change // 1. Click Map to change 2. Click Ranking to change if (params.seriesindex == 0 || params.seriesindex == 3) {if ($ ($ "" # btnset "). Attr (" title) == "Click Stop") {$ ("# btnset"). Trigger ('Click');} redomethod (params.data.name);} // if (params.seriesIndex == 3) {// alert (params. Data.name); // // if ($ ("# btnset"). Attr ("Title" == "Click Stop") {/// $ ("# btnset"). Trigger ('click " ); //} //Redomethod (Params.Data.Name); //}}});};        5. Timed cycle jQuery implementation  
The scattering point on the map is flashing for 5 seconds, and all map information is involved in polling. The specific JS code is as follows:
/ *** Call the local ASHX * @file file name * @Param get parameter (a = 1 & b = 2 & c = 3) * @fn callback function: The server returns a result = xxx; the callback function directly handles the Result variable. * / $. ASHX= Function (file, param, fn, er) {var surl = file; $ .ajax ({type: "get", contentty: "Application / JSON", Cache: False, URL: SURL, DATA: PARAM, DATATYPE: "JSON", SUCCESS: FN, Error: Er});}; var globalindex = 0; // Map Click time Function Redomethod (deptname) {if (! deptname) {deptname = data [globalindex] .name; globalindex ++; if (GlobalIndex == Data.Length) {globalindex = 0;}} // alert (name); $ .ashx ("Ajax URL Address", "Action = XX & DeptName =" + DeptName, Function (Result) {ified ) {if (result.results == ") {return;} // debugger; //lert(Result.politcal); var option = mychart.getoption (); // Dynamically change graphic Option.series [0 ] .data = convertdata (data); // Map Option.series [0] .Symbolsize = function (val, params) {// tag size //lert (Name.Name); if (DEPTNAME == params.name) {RETURN 35; // Map flash} else {return 20;}}; option.Color = function (params) {if (deptname == params.name) {RGBA (245, 214, 251, 1) ";} else {return" # f4e925 ";}}; option.series [1] .DATA = result.results [0] .politcal; // Political view Option .Series [2] .data = result.results [1] .agescale; // age accounts.series [3] .ItemStyle.color = function (params) {ix (deptname == params.name) {Return " RGBA (245, 214, 251, 1) ";} else {var colorlist = ['# c23531', '# 2f4554', '# 61A0A8', '# 91c7ae', '# 749f83', ' # c8622 ',' # 6e7074 ',' # 546570 ',' # c4ccd3 ']; return colorlist [params.dataindex];}} Option.series [4] .data = [2, 7, 12 , 6, 4, 6, 6, 3]; // Check Option.Series [5] .data = [11, 5, 21, 3, 5,10, 8, 5]; // Late to option.series [6] .data = [6, 1, 11, 1, 7, 4, 3, 13]; // Early Option.Series [7] .DATA = [ 7, 2, 22, 14, 4, 4, 6, 9]; // Turn Option.Series [8] .data = [20, 7, 23, 11, 8, 4, 4, 7]; // Overtime Option.Series [9] .data = [33, 4, 24, 9, 6, 4, 1, 1]; // mychart.setoption (option);}}, function (ER) {// alert "Request Fail");});} $ (Function () {// Timer Cycle VAR Interval = SetInterval ("REDOTHOD ()", 5000); // Perform a redomethod () // if there are two A button: Continue, pause $ ("# btnset"). Click () {// Click Pause button if (Interval) {ClearInterVal (Interval); interval = NULL;} if ($ (this) .attr (" ") ==" Click Stop ") {$ (this) .attr (" Title "," Click Start "); $ (this) .attr (" Class "," Btnplay ");} else {$ (This ) .attr ("Title", "click stop"); $ (this) .attr ("class", "btnpause"); interval = setInterval ("REDOMETHOD ()", 5000);}});});
6. Summary

The above is that I have more page The ideas and pick-up code of graphics statistics and level relationships are processed, and the document code is copied from the project, the complete rate is 99.99%, the code is slightly chaos, and the idea of ​​the idea is not processed, forgive me.

Ok, the above is all the contents of this article, I hope this paper has a certain reference value for everyone’s learning or work. If you have any questions, you can leave a message, thank you for Tumi cloud support.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment