The emergence of large-screen data visualization has set off a wave after another, and many business owners have wanted to build their own "cool dangling sky" domineering president's large-screen cockpit.
Some friends suggested that I take some video courses to learn Echarts, so that I can get started faster, so I recorded "Echarts - 0 Basic Introductory Course" , hoping to help those in need.
portal
Renderings show
1. Determine the demand plan
1. Determine the screen LED resolution for the online deployment of the product
This case is based on 16:9 aspect ratio, F11 full screen display.
2. Deployment method
Install-free executable program: support Windows, Linux, Mac and other operating systems; just copy the program to the server without other environment dependencies;
Viewing method: You can watch the program interface directly on the server, or you can open and play remotely with a browser, such as Chrome browser, 360 browser, etc.
2. Overall architecture design
- The front end is designed based on the Echarts open source library and uses the WebStorm editor;
- The backend is implemented based on Java Web, using IDEA editor;
- Data transmission format: JSON;
- Data source type: JSON file is currently used. Adding Mybatis by yourself can support PostgreSQL, MySQL, Oracle, Microsoft SQL Server, and SQLite. Adding Pandas by yourself can support Excel tables, etc. You can also customize the HTTP API interface method.
- Data update method: use http get polling method . In practical applications, you can also choose to monitor the real-time update of the back-end data and push it to the front-end in real time according to the situation;
3. Coding implementation (key code)
1. Front-end html code - page layout layout & style
<!--顶部-->
<header class="header left">
<div class="left nav">
<ul>
<li class="nav_active"><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
<li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
<li><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
<li><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
</ul>
</div>
<div class="header_center left" style="position:relative">
<h2><strong>厦门市某医院大数据展示案例</strong></h2>
</div>
<div class="right nav text_right">
<ul>
</ul>
</div>
</header>
<!--内容部分-->
<div class="con left">
<!--数据总概-->
<div class="con_div">
<div class="con_div_text left">
<div class="con_div_text01 left">
<img src="../images/info_1.png" class="left text01_img"/>
<div class="left text01_div">
<p>总采集数据量(G)</p>
<p id="t0">1235</p>
</div>
</div>
<div class="con_div_text01 right">
<img src="../images/info_2.png" class="left text01_img"/>
<div class="left text01_div">
<p>当月采集数据量(G)</p>
<p id="t1">235</p>
</div>
</div>
</div>
<div class="con_div_text left">
<div class="con_div_text01 left">
<img src="../images/info_3.png" class="left text01_img"/>
<div class="left text01_div">
<p>总门诊数(人)</p>
<p id="t2" class="sky">12356</p>
</div>
</div>
<div class="con_div_text01 right">
<img src="../images/info_4.png" class="left text01_img"/>
<div class="left text01_div">
<p>当月门诊数(人)</p>
<p id="t3" class="sky">12356</p>
</div>
</div>
</div>
<div class="con_div_text left">
<div class="con_div_text01 left">
<img src="../images/info_5.png" class="left text01_img"/>
<div class="left text01_div">
<p>总住院数(人)</p>
<p id="t4" class="org">12356</p>
</div>
</div>
<div class="con_div_text01 right">
<img src="../images/info_6.png" class="left text01_img"/>
<div class="left text01_div">
<p>当月住院数(人)</p>
<p id="t5" class="org">12356</p>
</div>
</div>
</div>
</div>
<!--统计分析图-->
<div class="div_any">
<div class="left div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_1.png">各医院采集数据量</div>
<p id="pieChart1" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_2.png">各医院门诊住院费用</div>
<p id="histogramChart" class="p_chart"></p>
</div>
</div>
<div class="div_any02 left ">
<div class="div_any_child div_height">
<div class="div_any_title any_title_width"><img src="../images/title_0.png">厦门市地图 </div>
<div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div>
</div>
</div>
<div class="right div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_3.png">数据采集条数(当日)</div>
<p id="lineChart" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../images/title_4.png">就诊人数(当日)</div>
<p id="lineChart2" class="p_chart"></p>
</div>
</div>
</div>
<div id="el-dialog" class="">
<div class="xc_layer"></div>
<div class="popBox" id="printView">
<div class="ttBox"><span class="tt" id="reportTitle">第一医院</span><img src="../images/close.png" style="width: 30px;float: right;cursor: pointer;" title="关闭弹窗" class="close"/></div>
<div class="txtBox" id="el-dialog_body">
<div style="height:100%;width: 98%;margin-left: 1%;">
<div class="left div_any01" style="width: 64%;">
<div class="div_any_child">
<div class="div_any_title"><div type="text" class="demo-input" id="date1" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_4.png">门诊住院人次</div>
<p id="lineChart3" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><div type="text" class="demo-input" id="date2" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_7.png">医疗费用</div>
<p id="lineChart4" class="p_chart"></p>
</div>
</div>
<div class="left div_any01" style="width: 32%;">
<div class="div_any_child">
<div class="div_any_title"><div type="text" class="demo-input" id="date3" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_18.png">病人年龄段分布</div>
<p id="pieChart2" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><div type="text" class="demo-input" id="date4" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_20.png">医疗费用组成</div>
<p id="pieChart3" class="p_chart"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>2. Front-end JS code - each echarts chart
var symptomName = last_month_day();
$(function(){
init();
init2();
$("#el-dialog").addClass("hide");
$(".close").click(function(event) {
$("#el-dialog").addClass("hide");
});
var date = new Date();
var numble = date.getDate();
var today = getFormatMonth(new Date());
$("#date1").html(today);
$("#date2").html(today);
$("#date3").html(today);
$("#date4").html(today);
lay('.demo-input').each(function(){
laydate.render({
type: 'month',
elem: this,
trigger: 'click',
theme: '#95d7fb',
calendar: true,
showBottom: true,
done: function () {
console.log( $("#startDate").val())
}
})
});
})
function init(){
//地图
var mapChart = echarts.init(document.getElementById('mapChart'));
mapChart.setOption({
bmap: {
center: [118.104103,24.477761],
zoom: 15,
roam: true,
},
tooltip : {
trigger: 'item',
formatter:function(params, ticket, callback){
console.log(params)
return params.value[2] + ":<br>" + params.value[3]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
symbolSize: 20,
data: [
[118.096435, 24.485408, '厦门市'] ,
[118.094564, 24.457358, '厦门第一医院'] ,
[118.104103, 24.477761, '厦门中山医院'],
[118.14748, 24.506295, '厦门中医院'],
[118.254841, 24.665349, '厦门第五医院'],
]
}]
});
mapChart.on('click', function (params) {
$("#el-dialog").removeClass('hide');
$("#reportTitle").html(params.value[2]);
});
var bmap = mapChart.getModel().getComponent('bmap').getBMap()
bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));
bmap.setMapStyle({style:'midnight'})
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
pieChart1.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}G ({d}%)"
},
calculable : false,
series : [
{
name:'采集数据量',
type:'pie',
radius : ['40%', '70%'],
center : ['50%', '45%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '20',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'厦门第一医院'},
{value:310, name:'厦门中山医院'},
{value:234, name:'厦门中医院'},
{value:135, name:'厦门第五医院'}
]
}
]
});
var lineChart = echarts.init(document.getElementById('lineChart'));
lineChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "k条"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : ['8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'厦门第一医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76]
},
{
name:'厦门中山医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[25, 10, 30, 55, 32.1, 35, 80, 65, 76]
},
{
name:'厦门中医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[35, 20, 40, 65, 42.1, 45, 90, 75, 96]
},
{
name:'厦门第五医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[45, 30, 50, 75, 52.1, 55, 100, 85, 106]
}
]
});
var histogramChart = echarts.init(document.getElementById('histogramChart'));
histogramChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '250',
x : 'center',
data:['厦门第一医院', '厦门中山医院','厦门中医院','厦门第五医院'],
textStyle : {
color : '#ffffff',
}
},
calculable :false,
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
xAxis : [
{
type : 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
splitLine:{
lineStyle:{
color:['#f2f2f2'],
width:0,
type:'solid'
}
}
}
],
yAxis : [
{
type : 'category',
data:['门诊人数(人)', '住院人次(人)','人均费用(元)'],
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
series : [
{
name:'厦门第一医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[320, 302, 301]
},
{
name:'厦门中山医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[120, 132, 101]
},
{
name:'厦门中医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[220, 182, 191]
},
{
name:'厦门第五医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[150, 212, 201]
}
]
});
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "k条"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : ['8:00','10:00','12:00','14:00','16:00','18:00'],
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'厦门第一医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, 0, 20, 45, 22.1, 25,].reverse()
},
{
name:'厦门中山医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[25, 10, 30, 55, 32.1, 35, ].reverse()
},
{
name:'厦门中医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[35, 20, 40, 65, 42.1, 45, ].reverse()
},
{
name:'厦门第五医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[45, 30, 50, 75, 52.1, 55, 6].reverse()
}
]
});
}
function init2(){
var lineChart3 = echarts.init(document.getElementById('lineChart3'));
lineChart3.setOption({
color:["#87cefa","#ff7f50",],
legend: {
y : 'top',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['门诊人次','住院人次'],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
dataZoom: {
show: true,
realtime : true,
start: 0,
end: 18,
height: 20,
backgroundColor: '#f8f8f8',
dataBackgroundColor: '#e4e4e4',
fillerColor: '#87cefa',
handleColor: '#87cefa',
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "人"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : symptomName,
boundaryGap : false,
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'门诊费用',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[1150, 180, 2100, 2415, 1212.1, 3125,1510, 810, 2100, 2415, 1122.1, 3215,1510, 801, 2001, 2245, 1232.1, 3245,1520, 830, 2200, 2145, 1223.1, 3225,150, 80, 200, 245, 122.1, 325]
},
{
name:'住院费用',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,]
},
]
});
var lineChart4 = echarts.init(document.getElementById('lineChart4'));
lineChart4.setOption({
color:["#87cefa","#ff7f50",],
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}元"
},
dataZoom: {
show: true,
realtime : true,
start: 0,
end: 18,
height: 20,
backgroundColor: '#f8f8f8',
dataBackgroundColor: '#e4e4e4',
fillerColor: '#87cefa',
handleColor: '#87cefa',
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "元"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : symptomName,
boundaryGap : false,
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'医疗费用',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[1500, 800, 1200, 2450, 1122.1, 1325,1150, 180, 1200, 1245, 1122.1, 1325,150, 180, 1200, 2145, 1212.1, 3215,1510, 180, 2100, 2415, 122.1, 325,150, 80, 200, 245, 122.1, 325].reverse()
},
]
});
//年龄分布
var pieChart2 = echarts.init(document.getElementById('pieChart2'));
pieChart2.setOption({
color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
series : [
{
name:'发病人数',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%',
sort : 'ascending',
data:[
{value:10, name:'婴儿(1-3岁)'},
{value:5, name:'少儿(4-10岁)'},
{value:15, name:'少年(10-18岁)'},
{value:25, name:'青年(18-45岁)'},
{value:125, name:'中年(45-60岁)'},
{value:175, name:'老年(60岁以上)'},
]
}
]
})
//医疗费用组成
var pieChart3 = echarts.init(document.getElementById('pieChart3'));
pieChart3.setOption({
color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}元"
},
calculable : true,
series : [
{
name:'发病人数',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%',
sort : 'ascending',
data:[
{value:10, name:'诊察费用'},
{value:500, name:'检查费用'},
{value:150, name:'检验费用'},
{value:250, name:'西药费用'},
{value:125, name:'中药费用'},
{value:1750, name:'手术费用'},
]
}
]
})
}
var chartMapElementId = 'mapChart';
// var chartMapElement = document.getElementById(chartMapElementId); 这种有问题，不显示图
//相对路径，页面的当前目录
// var jsonFileName = 'json/map.json';
//绝对路径，根目录
var jsonFileName = '/json/map.json';
var jsonFileNamechart_1 = '/json/chart_1.json';
var jsonFileNamechart_2 = '/json/chart_2.json';
function get_legend(data) {
var listLegend = new Array();
for (i=0; i<data.length; i++) {
n = data[i]["name"];
listLegend.push(n);
}
console.log("get_legend", listLegend);
return listLegend
}
function get_value(data) {
var listLegend = new Array();
var listValue = new Array();
for (i=0; i<data.length; i++) {
n = data[i][2];
v = data[i][3];
tmp = {"name": n, "value": v};
listLegend.push(n);
listValue.push(tmp);
}
console.log("get_value", listLegend, listValue);
return [listLegend, listValue]
}
function get_value2(data) {
var listLegend = new Array();
var listValue = new Array();
for (i=0; i<data.length; i++) {
n = data[i][2];
v = [data[i][3], data[i][4], data[i][5]];
tmp = {"name": n, "data": v};
listLegend.push(n);
listValue.push(tmp);
}
console.log("get_value2", listLegend, listValue);
return [listLegend, listValue]
}
function get_value3(data) {
var listLegend = new Array();
var listValue = new Array();
for (i=0; i<data.length; i++) {
n = data[i][2];
v = [data[i][3], data[i][4], data[i][5], data[i][3], data[i][4], data[i][5], data[i][3], data[i][4], data[i][5]];
tmp = {"name": n, "data": v};
listLegend.push(n);
listValue.push(tmp);
}
console.log("get_value3", listLegend, listValue);
return [listLegend, listValue]
}
function async_map_data() {
// 异步加载数据
$.getJSON(jsonFileName).done(function (data) {
// 1
var chartMapElement = document.getElementById(chartMapElementId);
console.log(chartMapElementId, "async_data")
var myChart = echarts.init(chartMapElement);
console.log(data)
myChart.setOption({
series: [{
data: data
}]
});
// 2
var pieChart1Element = document.getElementById("pieChart1");
var pieChart1 = echarts.init(pieChart1Element);
rs = get_value(data);
console.log(rs);
pieChart1.setOption({
legend: {
data: rs[0]
},
series: [{
data: rs[1]
}]
})
//3
var histogramChartElement = document.getElementById('histogramChart');
var histogramChart = echarts.init(histogramChartElement);
rs = get_value2(data);
console.log(rs);
histogramChart.setOption({
legend: {
data: rs[0]
},
series: rs[1]
})
// 4
var lineChart = echarts.init(document.getElementById('lineChart'));
rs = get_value3(data);
lineChart.setOption({
legend: {
data: rs[0]
},
series: rs[1]
})
// end
});//end $.getJSON
// 异步加载数据
$.getJSON(jsonFileNamechart_1).done(function (data) {
console.log(data);
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption({
legend: {
data: get_legend(data)
},
series: data
})
});//end $.getJSON
$.getJSON(jsonFileNamechart_2).done(function (data) {
t0 = document.getElementById('t0');
t0.innerText = data[0];
t1 = document.getElementById('t1');
t1.innerText = data[1];
t2 = document.getElementById('t2');
t2.innerText = data[2];
t3 = document.getElementById('t3');
t3.innerText = data[3];
t4 = document.getElementById('t4');
t4.innerText = data[4];
t5 = document.getElementById('t5');
t5.innerText = data[5];
});//end $.getJSON
}3. Back-end Java code
@RestController
@RequestMapping("/json")
public class Process {
@RequestMapping("/{filename}")
public String json(@PathVariable("filename") String filename) throws Exception {
System.out.println(filename);
ChangeJSON(filename);
String jsonStr = readJSON(filename);
System.out.println(jsonStr);
return jsonStr;
}4. Data communication JSON
[[118.094546, 24.457543, "厦门大学附属第一医院", 13, 33, 44, "福建省厦门市思明区镇海路55号"], [118.14748, 24.506295, "厦门中医院", 18, 93, 74, "福建省厦门市仙岳路1739号"], [118.14748, 24.506295, "厦门中医院", 18, 93, 74, "福建省厦门市仙岳路1739号"]]Fourth, development configuration & code structure description
5. More cases
This sharing is over, welcome to discuss! QQ WeChat same number: 6550523