echars图表制作

Posted 2021-01-29 jiajialeps

表格的制作还是和之前的一样没有什么变化 现在是的需求是要将表格中的数据用图表的形式展示出来

图表用到的插件是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" %>