cesium-city3d/examples/js/Echartsadd.js

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';
				
			}
		
	}

	
}