351 lines
7.5 KiB
JavaScript
351 lines
7.5 KiB
JavaScript
var myChart;
|
|
var myChart2
|
|
function addEcharts(DomID)
|
|
{
|
|
var dom = document.getElementById(DomID);
|
|
myChart = echarts.init(dom);
|
|
var app = {};
|
|
option = null;
|
|
var uploadedDataURL = "data/echartsdata.xml";
|
|
|
|
|
|
|
|
//myChart.showLoading();
|
|
$.get(uploadedDataURL, function (xml) {
|
|
//myChart.hideLoading();
|
|
|
|
var graph = echarts.dataTool.gexf.parse(xml);
|
|
/* console.log(graph.nodes);
|
|
console.log(graph.links);*/
|
|
|
|
var categories = [];
|
|
for (var i = 0; i < 7; i++) {
|
|
categories[i] = {
|
|
name: '类目' + i
|
|
};
|
|
}
|
|
graph.nodes.forEach(function (node) {
|
|
node.itemStyle = null;
|
|
node.value = node.symbolSize;
|
|
node.symbolSize /= 1.5;
|
|
node.label = {
|
|
normal: {
|
|
show: node.symbolSize > 0
|
|
}
|
|
};
|
|
node.category = node.attributes.modularity_class;
|
|
});
|
|
option = {
|
|
/* title: {
|
|
text: 'Les Miserables',
|
|
subtext: 'Circular layout',
|
|
top: 'bottom',
|
|
left: 'right'
|
|
},*/
|
|
tooltip: {},
|
|
grid:{
|
|
bottom:'0',
|
|
top:'0'
|
|
},
|
|
/* legend:
|
|
[{
|
|
//selectedMode: 'single',
|
|
selectedMode: false,
|
|
data: categories.map(function (a) {
|
|
return a.name;
|
|
})
|
|
}],*/
|
|
animationDurationUpdate: 1500,
|
|
animationEasingUpdate: 'quinticInOut',
|
|
series : [
|
|
{
|
|
name: '',
|
|
type: 'graph',
|
|
layout: 'circular',
|
|
circular: {
|
|
rotateLabel: true
|
|
},
|
|
data: graph.nodes,
|
|
links: graph.links,
|
|
categories: categories,
|
|
roam: true,
|
|
label: {
|
|
normal: {
|
|
position: 'right',
|
|
formatter: '{b}'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'source',
|
|
curveness: 0.3
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
myChart.setOption(option);
|
|
/* myChart.on('legendselectchanged',function(obj){
|
|
//alert(obj);
|
|
//var tt=myChart.getOption().series;
|
|
//myChart.getOption().series[0].data[0].value=200;
|
|
var option = myChart.getOption();
|
|
option.series[0].data[0].value=200;
|
|
myChart.setOption(option);
|
|
//var selected = obj.selected;
|
|
//var legend = obj.name;
|
|
|
|
}); */
|
|
}, 'xml');
|
|
}
|
|
|
|
function grabuttonOnclick(value)
|
|
{
|
|
var option = myChart.getOption();
|
|
if(value==20)
|
|
{
|
|
|
|
for(var i=0;i<60;i++)
|
|
{
|
|
if(i<20)
|
|
{
|
|
option.series[0].data[i].value=100;
|
|
}
|
|
else
|
|
{
|
|
option.series[0].data[i].value=15;
|
|
}
|
|
|
|
}
|
|
//myChart.clear();
|
|
//var tt=myChart.getOption();
|
|
myChart.setOption(option,true);
|
|
}
|
|
if(value==40)
|
|
{
|
|
for(var i=0;i<60;i++)
|
|
{
|
|
if(i>=20&&i<40)
|
|
{
|
|
option.series[0].data[i].value=100;
|
|
}
|
|
else
|
|
{
|
|
option.series[0].data[i].value=15;
|
|
}
|
|
|
|
}
|
|
//myChart.clear();
|
|
//var tt=myChart.getOption();
|
|
myChart.setOption(option,true);
|
|
|
|
}
|
|
if(value==60)
|
|
{
|
|
for(var i=0;i<60;i++)
|
|
{
|
|
if(i>40)
|
|
{
|
|
option.series[0].data[i].value=100;
|
|
}
|
|
else
|
|
{
|
|
option.series[0].data[i].value=15;
|
|
}
|
|
|
|
}
|
|
//myChart.clear();
|
|
//var tt=myChart.getOption();
|
|
myChart.setOption(option,true);
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function addEcharts2()
|
|
{
|
|
var dom = document.getElementById('echarts2');
|
|
myChart2 = echarts.init(dom);
|
|
var option;
|
|
// Generate data
|
|
var category = ['首尔-济州岛','札幌-羽田','羽田-福冈','墨尔本-悉尼','桃园-香港','孟买-新德里','冲绳-羽田','北京-虹桥','大阪-东京','里约-圣保罗'];
|
|
var barData2 = [700,610,580,500,420,390,385,385,370,365];
|
|
var lineData = [53.9,91.6,86.3,76.1,100,46.3,90,100,100,99.8];
|
|
//var barData2= [46.1,8.4,13.7,23.9,0,53.7,10,0,0,0.2];
|
|
|
|
var barData = [377.3,558.76,500.54,319.62,420,180.57,346.5,385,370,357.7];
|
|
var barData3= [322.7,51.24, 79.46, 180.38,0, 209.43,38.5,0,0,7.3];
|
|
|
|
|
|
/* for (var i = 0; i < 20; i++) {
|
|
var date = new Date(dottedBase += 1000 * 3600 * 24);
|
|
category.push([
|
|
date.getFullYear(),
|
|
date.getMonth() + 1,
|
|
date.getDate()
|
|
].join('-'));
|
|
var b = Math.random() * 200;
|
|
var d = Math.random() * 200;
|
|
barData.push(b)
|
|
lineData.push(d);
|
|
}*/
|
|
|
|
|
|
// option
|
|
option = {
|
|
/* backgroundColor: '#0f375f',*/
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
show: true,
|
|
backgroundColor: '#333'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['全服务','总计','全服务百分比'],
|
|
bottom: '0',
|
|
textStyle: {
|
|
color: '#ccc'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: category,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ccc'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval:0,
|
|
rotate:40
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {show: false},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ccc'
|
|
}
|
|
}
|
|
},
|
|
grid:{
|
|
bottom:'20%'
|
|
},
|
|
series: [
|
|
{
|
|
name: '全服务百分比',
|
|
type: 'line',
|
|
smooth: true,
|
|
showAllSymbol: true,
|
|
symbol: 'emptyCircle',
|
|
symbolSize: 15,
|
|
data: lineData
|
|
},
|
|
{
|
|
name: '全服务',
|
|
type: 'bar',
|
|
barWidth: 14,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#14c8d4'},
|
|
{offset: 1, color: '#43eec6'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: barData,
|
|
stack: 'test'
|
|
},
|
|
/* {
|
|
name: '底成本',
|
|
barGap: '-100%',
|
|
type: 'bar',
|
|
barWidth: 14,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color:'rgba(204,255,255,0.7)'
|
|
}
|
|
},
|
|
data: barData3,
|
|
stack: 'test'
|
|
|
|
},*/
|
|
{
|
|
name: '总计',
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
//type: 'bar',
|
|
barWidth: 12,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: 'rgba(0,255,255,1)'},
|
|
{offset: 0.5, color: 'rgba(0,255,255,0.4)'},
|
|
{offset: 1, color: 'rgba(0,255,255,0)'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
symbolRepeat: true,
|
|
symbolSize: [12, 4],
|
|
symbolMargin: 1,
|
|
z: -10,
|
|
data: barData2
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart2.setOption(option);
|
|
}
|
|
|
|
function EchartsDiVChange(chlickDIV)
|
|
{
|
|
if(chlickDIV.id='echarts')
|
|
{
|
|
if(chlickDIV.style.width>50)
|
|
{
|
|
chlickDIV.style.width=00+'px';
|
|
chlickDIV.style.hight=20+'px';
|
|
|
|
}
|
|
else
|
|
{
|
|
chlickDIV.style.width=500+'px';
|
|
chlickDIV.style.hight=500+'px';
|
|
|
|
}
|
|
|
|
}
|
|
else
|
|
{
|
|
if(chlickDIV.style.width>50)
|
|
{
|
|
chlickDIV.style.width=20+'px';
|
|
chlickDIV.style.hight=20+'px';
|
|
|
|
}
|
|
else
|
|
{
|
|
chlickDIV.style.width=500+'px';
|
|
chlickDIV.style.hight=300+'px';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|