一、oracle資料查詢出需要展示的資料結果

  select rownum id,
       sum(t.cap_ratio) over (order by rownum rows between unbounded preceding and current row) sum_cap_ratio,  
       t.user_ratio
 from (select rownum id,
       cast(cap_ratio * 100 as number(8, 5)) cap_ratio,
       cast(user_ratio * 100 as number(8, 5)) user_ratio
  from (select cons_name,
               sum_cap,
               cap_ratio,
               rownum / count_cons_name user_ratio
          from (select cons_name,
                       sum_cap,
                       total,
                       sum_cap / total cap_ratio,
                       (select count(distinct cons_name) from t_cons_plt where org_no like '13401%' and  build_date <= to_date('2016-12-12','yyyy-mm-dd')
                           ) count_cons_name
                  from (select cons_name,sum(contract_cap) sum_cap,
                               (select sum(contract_cap) from t_cons_plt where  org_no like '13401%' and  build_date <= to_date('2016-12-12','yyyy-mm-dd')
                           ) total
                          from t_cons_plt ts
                          where org_no like '13401%' and  build_date <= to_date('2016-12-12','yyyy-mm-dd')
                           
                         group by cons_name
                         order by sum_cap desc)))) t
 group by rownum,t.cap_ratio ,t.user_ratio
 order by rownum
 

中間省略........................................................

將結果直接賦給前臺js程式碼，即完成。。。。。

二、展示js程式碼

json.push(
						  {		id:"main0",
								title:"",
								unit:'合同容量(%)',
								legend:['使用者(%)'],
								xAxis:data.timeList,
								series: [
									{
										name:'使用者',
										type:'line',
										symbolSize: 6,
										itemStyle : {
											normal : {
												color:'#a7a7a7',
												borderColor:'#a7a7a7'
											}
										},
										lineStyle:{
											normal : {
												color:'#a7a7a7'
											}
										},
										data:data.dataList
									},{
										name:'80.00%',
										type:'line',
										symbolSize: 0,
										itemStyle : {
											normal : {
												color:'#FF44AA',
												borderColor:'#FF44AA'
											}
										},
										lineStyle:{
											normal : {
												color:'#FF44AA'
											}
										},
										data:data.eList
									}						
								]
							}	
				   );
				  creatLineCharts(json[0]);
 

function creatLineCharts(json){
			// 基於準備好的dom，初始化echarts例項
			var myChart = echarts.init(document.getElementById(json.id));

			option = {
				title : {
					text: json.title,
					subtext: json.subtitle,
					x:'center'
				},		
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					x : 'center',
					y : '92%',
					data: json.legend
				},
				grid: {
					top: '10%',
					left: '3%',
					right: '3%',
					bottom: '15%',
					containLabel: true
				},			
				xAxis: [
					{
						type: 'category',
						//name:'合同容量',
						data: json.xAxis,
						nameTextStyle:{
			            	color:'#666666'
			            },	
						splitLine:{ 
                            show:false
						},
						axisLine:{
							lineStyle:{
								color:'#dcdcdc'
							}
						},
						axisTick: {
							show:false,							
							alignWithLabel: true
						}							
					}
				],
				yAxis: [
					{
						type: 'value',
						name: json.unit,
						axisLabel: {
							formatter: '{value} %'
						},nameTextStyle:{
			            	color:'#666666'
			            },
						type: 'value',
						axisLine:{
							lineStyle:{
								color:'#dcdcdc'
							}
						},
						axisTick: {
							show:false,							
							alignWithLabel: true
						} 	
					}
				],
				series: json.series
			};
			
			// 使用剛指定的配置項和資料顯示圖表。
			myChart.setOption(option); 
		}