利用echarts-2.2.7做报表视图

痛定思痛。 2023-06-25 08:07 18阅读 0赞

先上几张效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 3]  
HTML:

<!DOCTYPE html>
    <html >
      <head>
        <meta charset="UTF-8">
        <title>报表</title>
      </head>
      <body>
        <div id="main" style="width:900px;height:400px"></div>
    <script src="${contextLocation}res/js/lib/echarts-2.2.7/build/dist/echarts-all.js" ></script>
    <script>
    	seajs.use("project/data/operation/adOperation.js",function (page) { 
    		page.init();
    	});
    </script>
      </body>
    </html>

引入echarts-all.js这样就不用一个一个引入报表Js  
adOperation.js:

define("project/data/operation/adOperation.js",function(require, exports, module) { 
    function init () { 
    	// 基于准备好的dom，初始化echarts图表 
    	var myChart = echarts.init(document.getElementById('main'));
    	option = { 
    		    title : { 
    		        text: '广告投放近7天趋势',
    		        subtext: '趋势图'
    		    },
    		    tooltip : { 
    		        trigger: 'axis'
    		    },
    		    legend: { 
    		        data:['展示','点击','下载','下载成功','安装成功','激活成功']
    		    },
    		    toolbox: { 
    		        show : true,
    		        feature : { 
    		            dataView : { show: true, readOnly: false},
    		            magicType : { show: true, type: ['line', 'bar', 'stack', 'tiled']},
    		            restore : { show: true},
    		            saveAsImage : { show: true}
    		        }
    		    },
    		    calculable : true,
    		    xAxis : [
    		        { 
    		            boundaryGap : false,
    		            data : []
    		        }
    		    ],
    		    yAxis : [
    		        { 
    		            type : 'value'
    		        }
    		    ],
    		    series : [
    		        { 
    		            name:'展示',
    		            type:'line',
    		            smooth:true,
    		            itemStyle: { normal: { areaStyle: { type: 'default'}}},
    		            data:[]
    		        },
    		        { 
    		            name:'点击',
    		            type:'line',
    		            smooth:true,
    		            itemStyle: { normal: { areaStyle: { type: 'default'}}},
    		            data:[]
    		        },
    		        { 
    		            name:'下载',
    		            type:'line',
    		            smooth:true,
    		            itemStyle: { normal: { areaStyle: { type: 'default'}}},
    		            data:[]
    		        },
    		        { 
    		            name:'下载成功',
    		            type:'line',
    		            smooth:true,
    		            itemStyle: { normal: { areaStyle: { type: 'default'}}},
    		            data:[]
    		        },
    		        { 
    		            name:'安装成功',
    		            type:'line',
    		            smooth:true,
    		            itemStyle: { normal: { areaStyle: { type: 'default'}}},
    		            data:[]
    		        },
    		        { 
    		            name:'激活成功',
    		            type:'line',
    		            smooth:true,
    		            itemStyle: { normal: { areaStyle: { type: 'default'}}},
    		            data:[]
    		        }
    		    ]
    		};
    	getChartData('');
    	function getChartData(params) { 
    	    $.ajax({ 
    	        url: contextLocation + "data/operation/reportAdQuery.html",
    	        data: params,
    	        type: "get",
    	        dataType: "json",
    	        success: function(data) { 
    	            if (data.return_code === '1') { 
    	            	option.xAxis[0].data = data.report.date;
    	                option.series[0].data = data.report.showCount;
    	                option.series[1].data = data.report.clickCount;
    	                option.series[2].data = data.report.downloadCount;
    	                option.series[3].data = data.report.dsCount;
    	                option.series[4].data = data.report.installCount;
    	                option.series[5].data = data.report.isCount;
    	                //comAverageList = data.comAverageList;
    	                myChart.setOption(option);
    	            } else { 
    	            	option.xAxis[0].data = [];
    	                option.series[0].data = [];
    	                option.series[1].data = [];
    	                option.series[2].data = [];
    	                option.series[3].data = [];
    	                option.series[4].data = [];
    	                option.series[5].data = [];
    	                myChart.setOption(option);
    	            }
    	        }
    	    });
    	}
    }
     
    return { 
        init: init
    };
    });

这里引用了sea.js，  
getChartData:这方法通过ajax事件从后台获取数据，然后再对报表中进行设置

option.xAxis[0].data = data.report.date;
    	                option.series[0].data = data.report.showCount;
    	                option.series[1].data = data.report.clickCount;
    	                option.series[2].data = data.report.downloadCount;
    	                option.series[3].data = data.report.dsCount;
    	                option.series[4].data = data.report.installCount;
    	                option.series[5].data = data.report.isCount;
    	                myChart.setOption(option);

后端传回的json数据

{ "return_msg":"操作成功","report":{ "clickCount":["0","0","0","0","0","0","606"],"date":["2015-12-09","2015-12-10","2015-12-11","2015-12-12","2015-12-13","2015-12-14","2015-12-15"],"downloadCount":["0","0","0","0","0","0","600"],"dsCount":["0","0","0","0","0","0","60"],"installCount":["0","0","0","0","0","0","54"],"isCount":["0","0","0","0","0","0","30"],"length":1,"showCount":["0","0","0","0","0","0","6000"]},"return_code":"1"}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191227112820930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191227112859391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191227112903471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191227112917732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70