表格的制作還是和之前的一樣沒有什麽變化 現在是的需求是要將表格中的數據用圖表的形式展示出來

圖表用到的插件是echarts 官網和第三方網站有詳細的案例

第一步：在表頭上加一個div

<div>
	<div id="change1" style="float:left;width:99%;height:500px;"></div>
</div>

第二步：創建一個changeReview.js文件 這是一個兩個y軸的圖表

<%@ page contentType="text/html;charset=UTF-8" %>
<script type="text/javascript">
	 // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById(‘change1‘));
	//myChart.showLoading();
    // 指定圖表的配置項和數據
	option = {
		color:[‘#a77c17‘,‘#3d9400‘,"#dd4b39","#4d90fe",‘#42ccef‘,"#180a65"], //設置元素顏色  
	    title: {
	        text: ‘Change Management‘,
	        x:‘center‘,
	        textStyle:{
            fontFamily:"arial",//主題文字字體，默認微軟雅黑
            fontSize:14//主題文字字體大小，默認為18px
        	}
	    },
	    tooltip: {
	        trigger: ‘axis‘,
	        	 axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
	                 type : ‘shadow‘        // 默認為直線，可選為：‘line‘ | ‘shadow‘
	             }
	    },
	    legend: {
      
        data:[‘‘,‘‘,‘Ericcson‘,‘3rd Party‘,‘Virgin Media‘,‘Huawei‘,‘Caused by Change‘]  //給元素賦值

	    },
	    grid: {
	        left: ‘3%‘,
	        right: ‘4%‘,
	        bottom: ‘3%‘,
	        containLabel: true
	    },
	    toolbox: {
	    	show: true,
	        feature: {
	            saveAsImage: {
	            	show: true
	            }
	        }
	    },
	    calculable : true,
	    xAxis: {  //從後臺取出x軸的坐標
	        type: ‘category‘,
// 	        boundaryGap: false,
	        
	        data: [‘${wkMap["M-1"]}‘,‘${wkMap["M-2"]}‘,‘${wkMap["M-3"]}‘,‘${wkMap["M-4"]}‘,‘${wkMap["M-5"]}‘,‘${wkMap["M-6"]}‘,‘${wkMap["M-7"]}‘,‘${wkMap["M-8"]}‘,‘${wkMap["M-9"]}‘,‘${wkMap["M-10"]}‘,‘${wkMap["M-11"]}‘,‘${wkMap["M-12"]}‘],
	         axisLabel: {
                color:‘#777777‘,
	        	fontFamily:‘Roboto Light‘,
	        	fontSize:‘12‘
            }
	    },
	    yAxis: [
	    	{
                type: ‘value‘,
//                 name: ‘水量‘,      坐標軸上面的名稱
                min: 0,
                max: 60,
                interval: 10,
//                 axisLabel: {
////                      formatter: ‘{value} ml‘     坐標軸上的的單位
//                 }
            },
            {
                type: ‘value‘,
//                 name: ‘溫度‘,     第二個坐標軸上的信息
                min: 0,
                max: 40,
                interval: 5,
//                 axisLabel: {
//                     formatter: ‘{value} °C‘
//                 }
            }
            ],
	    series: [
	        {
	        	itemStyle : {
					normal : {
						label: {
					          show: false,
					          position: ‘top‘
					   }
					},
				},
	            name:‘Ericcson‘,  //元素名稱 對應上面的數據
	            type:‘bar‘,   //樣式 bar：柱形     line：線形
	            stack: ‘p0‘,  //錨點 定位到同一個po點 數據堆積成 多層疊加效果
	            data:[${crMap["Ericcson"]["jan"]}, ${crMap["Ericcson"]["feb"]}, ${crMap["Ericcson"]["mar"]}, ${crMap["Ericcson"]["apr"]}, ${crMap["Ericcson"]["may"]}, ${crMap["Ericcson"]["jun"]}, ${crMap["Ericcson"]["jul"]}, ${crMap["Ericcson"]["aug"]}, ${crMap["Ericcson"]["sep"]}, ${crMap["Ericcson"]["oct"]}, ${crMap["Ericcson"]["nov"]}, ${crMap["Ericcson"]["dec_"]}]
	        },
	        {
	        	itemStyle : {
					normal : {
						label: {
					          show: false,
					          position: ‘right‘
					   }
					},
				},
	            name:‘3rd Party‘,
	            type:‘bar‘,
	            stack: ‘p0‘,  
	            data:[${crMap["3rd Party"]["jan"]}, ${crMap["3rd Party"]["feb"]}, ${crMap["3rd Party"]["mar"]}, ${crMap["3rd Party"]["apr"]}, ${crMap["3rd Party"]["may"]}, ${crMap["3rd Party"]["jun"]}, ${crMap["3rd Party"]["jul"]}, ${crMap["3rd Party"]["aug"]}, ${crMap["3rd Party"]["sep"]}, ${crMap["3rd Party"]["oct"]}, ${crMap["3rd Party"]["nov"]}, ${crMap["3rd Party"]["dec_"]}]
	        },
	        
	        {
	        	itemStyle : {
					normal : {
						label: {
					          show: false,
					          position: ‘right‘
					   }
					},
				},
	            name:‘Virgin Media‘,
	            type:‘bar‘,
	            stack: ‘p0‘,
	            data:[${crMap["Virgin Media"]["jan"]}, ${crMap["Virgin Media"]["feb"]}, ${crMap["Virgin Media"]["mar"]}, ${crMap["Virgin Media"]["apr"]}, ${crMap["Virgin Media"]["may"]}, ${crMap["Virgin Media"]["jun"]}, ${crMap["Virgin Media"]["jul"]}, ${crMap["Virgin Media"]["aug"]}, ${crMap["Virgin Media"]["sep"]}, ${crMap["Virgin Media"]["oct"]}, ${crMap["Virgin Media"]["nov"]}, ${crMap["Virgin Media"]["dec_"]}]
	        },
	        {
	        	itemStyle : {
					normal : {
						label: {
					          show: false,
					          position: ‘right‘
					   }
					},
				},
	            name:‘Huawei‘,
	            type:‘bar‘,
	            stack: ‘p0‘,
	            data:[${crMap["Huawei"]["jan"]}, ${crMap["Huawei"]["feb"]}, ${crMap["Huawei"]["mar"]}, ${crMap["Huawei"]["apr"]}, ${crMap["Huawei"]["may"]}, ${crMap["Huawei"]["jun"]}, ${crMap["Huawei"]["jul"]}, ${crMap["Huawei"]["aug"]}, ${crMap["Huawei"]["sep"]}, ${crMap["Huawei"]["oct"]}, ${crMap["Huawei"]["nov"]}, ${crMap["Huawei"]["dec_"]}]
	        }
	        ,
	        {
	        	itemStyle : {
					normal : {
						label: {
					          show: false,
					          position: ‘right‘
					   }
					},
				},
	            name:‘Caused by Change‘,
	            type:‘line‘,
                yAxisIndex: 1,  //引入第二個y坐標
// 	            stack: ‘p0‘,      註銷錨點
	            data:[${crMap["Caused by Change"]["jan"]}, ${crMap["Caused by Change"]["feb"]}, ${crMap["Caused by Change"]["mar"]}, ${crMap["Caused by Change"]["apr"]}, ${crMap["Caused by Change"]["may"]}, ${crMap["Caused by Change"]["jun"]}, ${crMap["Caused by Change"]["jul"]}, ${crMap["Caused by Change"]["aug"]}, ${crMap["Caused by Change"]["sep"]}, ${crMap["Caused by Change"]["oct"]}, ${crMap["Caused by Change"]["nov"]}, ${crMap["Caused by Change"]["dec_"]}]
	        }
	    ]
	};
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
	
	//myChart.hideLoading();


	// 基於準備好的dom，初始化echarts實例
   
</script>

第三步：引入文件

	<%@include file="/WEB-INF/views/modules/delivery/input/changeReview.jsp" %>

echars圖表制作