目錄
一、購買云服務器（以下以阿里云為例）
二、配置云服務器
三、連接寶塔控制面板
三、部署專案
四、外網訪問
五、相關資源
一、購買云服務器（以下以阿里云為例）
作為新用戶的我可以白嫖一下
在上個頁面拉到最下方，免費試用
然后先完成個人認證
在上圖的頁面稍微往下一點有兩個試用
建議初學者選第一個，好像只能二選一，我也不知道能不能都有，我選了第一個后悔了
試用的時候，地區還有作業系統隨便選（地區不影響，作業系統下面需要改）
已購買的服務器如下
二、配置云服務器
配置之前先把服務器停止
更換作業系統
采用寶塔控制面板
自定義密碼確認訂單
配置安全組
添加埠
重啟服務器
三、連接寶塔控制面板
其他默認，密碼是剛才自己設定的密碼
打開寶塔控制面板
在新的頁面打開外網面板地址
輸入上圖中的賬號密碼
（因為剛才咱們設定8888埠的時候，授權物件是咱們自己的IP地址，所以即使別人拿到了這個賬號和密碼也無法訪問，但是如果設定成0.0.0.0所以人都以訪問）
在軟體商店安裝tomcat
版本按照自己需求來
打開tomcat檔案
改為80，和前面的80埠對應
保存退出
重啟tomcat
三、部署專案
四、外網訪問
五、相關資源
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--匯入資源 js-->
<script src="./js/jquery.min.js" ></script>
<script src="./js/echarts.js" ></script>
<script src="./js/china.js" ></script>
</head>
<body>
<h2>全國確診:<span id='num1'></span></h2>
<h2>死亡:<span id='num2'></span></h2>
<h2>累計治愈:<span id='num3'></span></h2>
<h4>-------Creat By ZhaoMu<span id='num3'></span></h4>
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
let data1=[]
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: { //標題資訊
text: '全國疫情實時資料統計',
subtext: 'data from iqiyi',
sublink: 'http://static.iqiyi.com/gzbd/index.html',
left: 'center'
},
tooltip: {
trigger: 'item' //當滑鼠選中某一個時 顯示的提示內容 item表示提示data中的資料
},
visualMap: {
min: 0,
max: 2000,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默認為數值文本
calculable: true,
show: true
},
toolbox: {//是否顯示右側工具列 資料視圖/保存圖片/重繪資料
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '確診',
type: 'map', //圖示型別 bar line pie map
mapType: 'china',
roam: true, //地圖能不能跟隨滾輪滾動 伸縮
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[] ,
}
]
};
$.post("http://toutiao.iqiyi.com/api/route/haoduo/nCoV/detail",//請求介面的地址
"",//發出請求時需要攜帶的引數
msg=>{
$("#num1").text(msg.data.totalConfirmedCount);
$("#num2").text(msg.data.totalDeadCount);
$("#num3").text(msg.data.totalCuredCount)
//遍歷msg中的data中detail 給data1賦值
msg.data.detail.forEach( x =>{
let str={}
//x表示每一個省的資料
str.name=x.provinceName
str.value=x.confirmedCount
//把當前組裝好的json添加到資料中
data1.push(str);
})
//[{name:xx,value:xx},{},{},{},]
//option中的series第一個{}
option.series[0].data = data1
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
},//服務器回傳資料 之后自動執行的方法
//給上邊的三個span 賦值
"json")
</script>
<script>
//當整個頁面加載完畢 執行以下代碼
$(function(){ //相當于 window.onload=function(){}
//發出異步請求，請求 愛奇藝的疫情介面
//$.post表示發出異步請求
$.post("http://toutiao.iqiyi.com/api/route/haoduo/nCoV/detail",//請求介面的地址
"",//發出請求時需要攜帶的引數
msg=>{
$("#num1").text(msg.data.totalConfirmedCount);
$("#num2").text(msg.data.totalDeadCount);
$("#num3").text(msg.data.totalCuredCount)
},//服務器回傳資料 之后自動執行的方法
//給上邊的三個span 賦值
"json")//我這個客戶端能夠接收的回應的型別
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/247150.html
標籤：其他
上一篇：編程題：猴子分桃---面向物件版