【mq】從零開始實現 mq-08-配置優化 fluent
阿新 • • 發佈：2022-05-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入介面</title>
<link rel="stylesheet" href="login.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-wordcloud.js"></script>
<style>
.column1{
text-align:center;
}
</style>
</head>
<body>
<div class="column1" style="width: 100%;height: 10%;" >
<p>輸入詞雲圖的個數：<input type="text" id="count" ><input type="button" value="顯示" onclick="click1(mydata)" ></p>
</div>
<div style="width: 100%; height: 400px">
<table border="1" align="left">
<THEAD align="center"><TR><TH>單詞</TH><TH>詞頻</TH></TR></THEAD>
<TBODY id='main'></TBODY>
</table>
<div id="main1" style="width:100%; height: 400px" align="center"></div>
<script type="text/javascript">
var b = new Array();
var n = new Array();
var c = new Array();
var mydata = new Array();
window.onload = function () {
var url = "sheet1.json";
var request = new XMLHttpRequest();
request.open("get",url);
request.send(null);
request.onload = function(){
if (request.status == 200){
var json = JSON.parse(request.responseText)
for (var i = 0;i<json.length;i++) {
var d = {};
d['name'] = json[i].name;
d['value'] = json[i].count;
mydata.push(d);
}
console.log(mydata)
}
}
}
function compare(property,desc) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
if(desc==true){
// 升序排列
return value1 - value2;
}else{
// 降序排列
return value2 - value1;
}
}
}
function click1() {
//資料排序
var name = document.getElementById("count");
var num = name.value;
mydata.sort(compare('value',false));
//擷取
b = mydata.slice(0,num);//
for(i=0;i<b.length;i++){
n.push(b[i].name);
c.push(b[i].value);
}
var chart = echarts.init(document.getElementById('main1'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data:b
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
//}
var div1 = document.getElementById('main');
var code = "";
for(a=0;a<b.length;a++){
code += "<TR><TD>"+b[a].name+"</TD><TD>"+b[a].value+"</TD></TR>";
}
//code += "<TR><TD>Learning</TD><TD>123</TD></TR>";
//code += "<TR><TD>Image</TD><TD>61</TD></TR>";
//code += "<TR><TD>Network</TD><TD>57</TD></TR>";
//code += "<TR><TD>Deep</TD><TD>57</TD></TR>";
div1.innerHTML = code;
// 初始化echarts實列物件
/*var myChart = echarts.init(document.getElementById("main"));
// 指定配置項和資料(option)
var option = {
legend: {
top: "0%",
right:"0%",
textStyle: {
color: "#2f89cf",
fontSize: "12",
},
},
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 座標軸指示器，座標軸觸發有效
type: "shadow", // 預設為直線，可選為：'line' | 'shadow'
},
},
// 修改圖示的大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true,
},
xAxis: [{
type: "category",
data: n,
axisTick: {
alignWithLabel: true,
},
// 修改刻度標籤相關樣式
axisLabel: {
color: "rgba(12, 25, 255, .6)",
fontSize: "12",
interval: 1, //控制是否全部顯示
},
// 不顯示x軸的樣式
}, ],
yAxis: [{
type: "value",
// 修改刻度標籤相關樣式
axisLabel: {
color: "rgba(255, 255, 255, .6)",
fontSize: "12",
},
// y軸座標系
axisLine: {
lineStyle: {
color: "rgba(255, 255, 255, .1)",
width: 2,
},
},
// y軸分割線的顏色
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, .1)",
},
},
}, ],
series: [
{
name: "詞頻",
type: "bar",
color:"orange",
// 修改柱子的寬度
barWidth: "10%",
data: c,
itemStyle: {
// 修改柱子的圓角
barBorderRadius: 5,
},
},
],
};
// 把配置項給實列物件
myChart.setOption(option);
// 讓圖表跟隨螢幕自動的去適應
window.onresize = chart.resize;
window.addEventListener("resize", function() {
myChart.resize();
});
*/
}
</script>
</div>
</body>
</html>