版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
目錄A-2指標(biāo)內(nèi)容可視化展示模塊:<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui"/>
<title>echarts圖表報(bào)表</title>
<linkrel="stylesheet"href="css/charts_demo.css">
<scriptsrc="js/vuejs-2.5.16.js"></script>
<scriptsrc="js/axios-0.18.0.js"></script>
<scriptsrc="js/echarts.min.js"></script>
<scriptsrc="/js/jquery-2.1.0.min.js"></script>
</head>
<body>
<divid="app"class="my-box"style="height:2000px">
<divclass="my-box-left">
<button@click="one">關(guān)系圖(環(huán)形布局)</button><br/><br/>
<button@click="two">WebKit模塊關(guān)系依賴圖</button><br/><br/>
<button@click="three">樹狀圖</button><br/><br/>
<button@click="four">NPM依賴關(guān)系圖</button><br/><br/>
<button@click="five">徑向樹狀圖</button><br/><br/>
<button@click="six">關(guān)系圖</button><br/><br/>
</div>
<divclass="my-box-right">
<divid="container"style="height:1000px;"></div>
</div>
</div>
</body>
<script>
newVue({
el:"#app",
data:{},
methods:{
one(){
varmyChart=echarts.init(document.getElementById('container'));
myChart.showLoading();
$.getJSON('les-miserables.json',function(graph){
myChart.hideLoading();
graph.nodes.forEach(function(node){
node.label={
show:node.symbolSize>30
};
});
option={
tooltip:{},
legend:[
{
data:graph.categories.map(function(a){
return;
})
}
],
animationDurationUpdate:1500,
animationEasingUpdate:'quinticInOut',
series:[
{
name:'LesMiserables',
type:'graph',
layout:'circular',
circular:{
rotateLabel:true
},
data:graph.nodes,
links:graph.links,
categories:graph.categories,
roam:true,
label:{
position:'right',
formatter:''
},
lineStyle:{
color:'source',
curveness:0.3
}
}
]
};
myChart.setOption(option);
});
},
two(){
varmyChart=echarts.init(document.getElementById('container'));
myChart.showLoading();
$.get('webkit-dep.json',function(webkitDep){
myChart.hideLoading();
option={
legend:{
data:['HTMLElement','WebGL','SVG','CSS','Other']
},
series:[
{
type:'graph',
layout:'force',
animation:false,
label:{
position:'right',
formatter:''
},
draggable:true,
data:webkitDep.nodes.map(function(node,idx){
node.id=idx;
returnnode;
}),
categories:webkitDep.categories,
force:{
edgeLength:5,
repulsion:20,
gravity:0.2
},
edges:webkitDep.links
}
]
};
myChart.setOption(option);
});
},
three(){
varmyChart=echarts.init(document.getElementById('container'));
myChart.showLoading();
$.get('flare.json',function(data){
myChart.hideLoading();
data.children.forEach(function(datum,index){
index%2===0&&(datum.collapsed=true);
});
myChart.setOption(
(option={
tooltip:{
trigger:'item',
triggerOn:'mousemove'
},
series:[
{
type:'tree',
data:[data],
top:'1%',
left:'7%',
bottom:'1%',
right:'20%',
symbolSize:7,
label:{
position:'left',
verticalAlign:'middle',
align:'right',
fontSize:9
},
leaves:{
label:{
position:'right',
verticalAlign:'middle',
align:'left'
}
},
emphasis:{
focus:'descendant'
},
expandAndCollapse:true,
animationDuration:550,
animationDurationUpdate:750
}
]
})
);
});
},
four(){
varmyChart=echarts.init(document.getElementById('container'));
myChart.showLoading();
$.getJSON(
'npmdepgraph.min10.json',
function(json){
myChart.hideLoading();
myChart.setOption(
(option={
animationDurationUpdate:1500,
animationEasingUpdate:'quinticInOut',
series:[
{
type:'graph',
layout:'none',
//progressiveThreshold:700,
data:json.nodes.map(function(node){
return{
x:node.x,
y:node.y,
id:node.id,
name:node.label,
symbolSize:node.size,
itemStyle:{
color:node.color
}
};
}),
edges:json.edges.map(function(edge){
return{
source:edge.sourceID,
target:edge.targetID
};
}),
emphasis:{
focus:'adjacency',
label:{
position:'right',
show:true
}
},
roam:true,
lineStyle:{
width:0.5,
curveness:0.3,
opacity:0.7
}
}
]
}),
true
);
}
);
},
five(){
varmyChart=echarts.init(document.getElementById('container'));
myChart.showLoading();
$.get('flare.json',function(data){
myChart.hideLoading();
myChart.setOption(
(option={
tooltip:{
trigger:'item',
triggerOn:'mousemove'
},
series:[
{
type:'tree',
data:[data],
top:'18%',
bottom:'14%',
layout:'radial',
symbol:'emptyCircle',
symbolSize:7,
initialTreeDepth:3,
animationDurationUpdate:750,
emphasis:{
focus:'descendant'
}
}
]
})
);
});
},
six(){
varmyChart=echarts.init(document.getElementById('container'));
myChart.showLoading();
$.getJSON('les-miserables.json',function(graph){
myChart.hideLoading();
graph.nodes.forEach(function(node){
node.label={
show:node.symbolSize>30
};
});
option={
tooltip:{},
legend:[
{
data:graph.c
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年廣西建設(shè)職業(yè)技術(shù)學(xué)院單招職業(yè)技能測試題庫參考答案詳解
- 2026年山東城市建設(shè)職業(yè)學(xué)院單招職業(yè)技能測試題庫及參考答案詳解
- 2026年安徽職業(yè)技術(shù)學(xué)院單招職業(yè)傾向性考試題庫帶答案詳解
- 2026年河南工業(yè)職業(yè)技術(shù)學(xué)院單招職業(yè)傾向性測試題庫及答案詳解1套
- 2026年浙江師范大學(xué)行知學(xué)院單招職業(yè)傾向性考試題庫及參考答案詳解1套
- 2026年鄭州衛(wèi)生健康職業(yè)學(xué)院單招職業(yè)適應(yīng)性測試題庫及答案詳解1套
- 2026年鄭州電子信息職業(yè)技術(shù)學(xué)院單招職業(yè)適應(yīng)性考試題庫附答案詳解
- 2026年皖西衛(wèi)生職業(yè)學(xué)院單招職業(yè)技能測試題庫及參考答案詳解一套
- 2026年成都航空職業(yè)技術(shù)學(xué)院單招職業(yè)技能考試題庫及答案詳解一套
- 2026年陜西國防工業(yè)職業(yè)技術(shù)學(xué)院單招職業(yè)傾向性考試題庫及參考答案詳解一套
- 回轉(zhuǎn)窯安裝說明書樣本
- 2025年中共宜春市袁州區(qū)委社會(huì)工作部公開招聘編外人員備考題庫附答案詳解
- 2026年中醫(yī)養(yǎng)生館特色項(xiàng)目打造與客流增長
- 2025年社保常識(shí)測試題庫及解答
- 2025年鐵路運(yùn)輸合同書
- 消防設(shè)施培訓(xùn)課件
- 疤痕子宮破裂護(hù)理查房
- 2025-2026學(xué)年人教版高一生物上冊(cè)必修1第1-3章知識(shí)清單
- 腎內(nèi)科常見并發(fā)癥的觀察與應(yīng)急處理
- GB/T 2075-2025切削加工用硬切削材料的分類和用途大組和用途小組的分類代號(hào)
- 《馬克思主義與社會(huì)科學(xué)方法論題庫》復(fù)習(xí)資料
評(píng)論
0/150
提交評(píng)論