手把手帶你做出一個(gè)可視化大屏，輕松完成期末大作業(yè)。
關(guān)注公眾號(hào)”Python爬蟲與數(shù)據(jù)分析“回復(fù)“可視化大屏”獲取代碼及數(shù)據(jù)
涉及到的技術(shù)：Echarts、HTML、css、JavaScript
Echarts官網(wǎng)：
https://echarts.apache.org/handbook/zh/concepts/axis/
目錄
1、echarts同時(shí)展示多幅圖
2、使用css優(yōu)化界面
3、添加標(biāo)題
4、使用Ajax讀取數(shù)據(jù)
5、增加水印
1、echarts同時(shí)展示多幅圖
圖1-1
一開始學(xué)echarts時(shí)都是一幅幅圖學(xué)的，入下圖1-1，聲明一個(gè)div，規(guī)定好高度、寬度，再把圖放入div中。要同時(shí)展示多幅圖最簡單的方法就是聲明多個(gè)div即可，如下圖1-2。
圖1-2
2、使用css優(yōu)化界面
處理完展示多圖的問題后，就該考慮將圖調(diào)整到特定的位置，這時(shí)候你可以通過css去調(diào)整html標(biāo)簽的位置。如圖1-2要將下方的圖移到第一幅圖的同一行
圖2-1
我就不講這些css參數(shù)的含義了。
注意：HTML 元素的默認(rèn)值，即沒有定位，遵循正常的文檔流對象。靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。
3、添加標(biāo)題
圖3-1
兩次的副標(biāo)題均為按鈕，中間的標(biāo)題其實(shí)是灰色的底(div)加上了文字，實(shí)現(xiàn)起來也簡單就是聲明4個(gè)button標(biāo)簽，再聲明4個(gè)h3標(biāo)簽，最后通過css將h3標(biāo)簽移到對應(yīng)的button上。
圖3-2
簡單解釋一下參數(shù)：
- 將邊框由矩形轉(zhuǎn)變?yōu)槠叫兴倪呅?/li>
只需要在css中添加參數(shù)—transform: skew(30deg)，如下代碼：
.button1 {
background-color: white;
border: 2px solid #EEEEEE;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 9px 2px;
cursor: pointer;
width: 140px;
transform: skew(30deg);
position: relative;
left: 470px;
}
- 優(yōu)先級(jí)：z-index:999，這個(gè)是避免此標(biāo)簽被其他標(biāo)簽所覆蓋，數(shù)字越大優(yōu)先級(jí)越高。
4、使用Ajax讀取數(shù)據(jù)
我寫代碼一直避免用直接用值，而是使用變量，這樣可以避免數(shù)據(jù)更改時(shí)需要進(jìn)行大量的修改。
Json文件如下：
{
"消費(fèi)地點(diǎn)":["教學(xué)樓","食堂","體育館","田徑場","操場"],
"用戶人數(shù)":[35, 25, 9, 21, 18]
}
圖4-1
聲明兩個(gè)空列表->在方法中循環(huán)讀取數(shù)據(jù)->調(diào)用方法
這里Ajax中的參數(shù)async: false是重點(diǎn)，這個(gè)參數(shù)取消了Ajax的異步特性，使Ajax可以從上往下順序執(zhí)行。
5、增加水印
添加水印很簡單只需要在body標(biāo)簽中添加一段代碼即可。文章來源：http://www.zghlxwxcb.cn/news/detail-484455.html
function WaterMarker(str) {
var can = document.createElement('canvas');
var body = document.body;
body.appendChild(can);
can.width = 300; // 畫布的寬
can.height = 200; // 畫布的高度
can.style.display = 'none';
var cans = can.getContext('2d');
cans.rotate(-10 * Math.PI / 180); // 畫布里面文字的旋轉(zhuǎn)角度
cans.font = "25px Microsoft JhengHei"; // 畫布里面文字的字體
cans.fillStyle = "rgba(17, 17, 17, 0.50)"; // 畫布里面文字的顏色,第四個(gè)參數(shù)為透明度
cans.textAlign = 'left'; //畫布里面文字的水平位置
cans.textBaseline = 'Middle'; // 畫布里面文字的垂直位置
cans.fillText(str, can.width / 3, can.height / 2); // 畫布里面文字的間距比例
body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; // 把畫布插入到body中
}
WaterMarker("coder 謝公子");
關(guān)注公眾號(hào)”Python爬蟲與數(shù)據(jù)分析“回復(fù)“可視化大屏”獲取代碼及數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-484455.html
到了這里，關(guān)于Echarts實(shí)現(xiàn)可視化大屏的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
