由于作業中要用到基于ECharts的大屏可視化資料展示，下方為自己先用靜態資料進行的可視化效果圖一角，逐步完善中......，后續會基于Python的Flask框架以及ajax傳輸資料，包括篩選各種條件后的資料對圖形進行異步無重繪改變，，，，，，
嘻嘻，2年沒有敲代碼了，部分代碼有進行演算法練習，勿見怪哦......
效果圖一角：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實體</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
var data = https://www.cnblogs.com/zmdComeOn/archive/2022/02/20/[
['x軸', '60px','101npx','178xpx','289ypx'],
['西南航空', 60,101,178,289],
['國泰航空', 120,180,190,303],
['東方航空', 90,92,97,103]
]
console.log("我是源資料1data=https://www.cnblogs.com/zmdComeOn/archive/2022/02/20/====》",data)
/***
* @注意
* @以下純屬練習處理資料（原因2年沒敲代碼了，練習下，嘻嘻）
*/
var newAarry = []
for(var i=0;i<data.length;i++){
if(i!=0){
newAarry.push(data[i][0])
}
}
console.log("我是圖例=====》",newAarry) //列印結果是 ['西南航空', '國泰航空', '東方航空']
var newData = https://www.cnblogs.com/zmdComeOn/archive/2022/02/20/[]
console.log("我是源資料2data=https://www.cnblogs.com/zmdComeOn/archive/2022/02/20/====》",data)
for(var j=0;j<data.length;j++){
var news = data[j].slice(1)
//console.log("我是回圈中的資料news=====》",news)
newData.push(news)
}
console.log("我是處理后的資料newData=https://www.cnblogs.com/zmdComeOn/archive/2022/02/20/====》",newData)
/***
* @注意
* @以下是有用資料，上方資料處理純屬練習處理資料（原因2年沒敲代碼了，練習下，嘻嘻）
*/
//回圈往series里push資料
var series1 = []
var countMax = 0
for(var key in data){
console.log(data[key])
if(key!=0){
//去除第一行
series1.push(
{
name:data[key][0],//圖例
type:'line',//折線 bar 餅狀
data:data[key].splice(1)
}
)
}
countMax++;
}
console.log("我是動態的series=====》",series1)
// 指定圖表的配置項和資料
var option = {
title:{text:'我是折線圖'},
//圖例
legend: {
orient:'vertical',
x:'right',
y:'center',
itemGap:25,
},
tooltip: {},
//dataset:{ source:newData},
// 宣告一個 X 軸，類目軸（category），默認情況下，類目軸對應到 dataset 第一列，
xAxis: {
type: 'category',
data: data[0].slice(1) //將x軸設定為物件資料第一列（去除第一個元素）
},
// 宣告一個 Y 軸，數值軸，
yAxis: {},
// 宣告多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列，
series: series1
};
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
</script>
</body>
</html>
當然了，作業中的資料比這個復雜多了，這只是第一步已經完成了，going......
作者：子欽加油出處：https://www.cnblogs.com/zmdComeOn/
個性簽名：努力生活，努力走路
阿里云拼團：https://www.aliyun.com/1111/home?userCode=f4ee1llo1核2G1M，86一年，229三年；2核4G5M，799三年；2核8G5M，1399三年
騰訊云三月采購計劃特價：https://cloud.tencent.com/act/cps/redirect?redirect=1073&cps_key=15d0b1673287c43fe946626d9f4e2eee&from=console1核2G1M，88一年；1核2G1M，268三年；2核4G5M，998一年；4核8G5M，2888元三年
您的資助是我最大的動力！
金額隨意,歡迎來賞！
如果，想給予我更多的鼓勵，求打
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/428495.html
標籤：其他
上一篇：IO流學習筆記