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