实习工作总结（一）：Echats折线对比图

最新推荐文章于 2024-03-27 21:19:29 发布

原创

最新推荐文章于 2024-03-27 21:19:29 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

在实习中开发报表系统，运用Echarts框架创建折线对比图。通过参照官方文档逐步实现，包括定义div容器，设置横纵坐标及图示文本。后台代码负责获取并处理当月和上月数据，传递给前端展示。总结指出，虽然完成了功能，但对js的掌握还需提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前实习工作需要开发一个报表系统，需要用到各种图表。开发折线图用到了百度的Echats开源图形框架。
通过参考开发文档：http://echarts.baidu.com/option.html，一步一步搭建。
(1)定义一个div容器，并初始化它的宽高：<div class="layui-row"> <div id="] line_chart"></div> </div>
(2)js部分：定义横、纵坐标变量：

					var xAxisData = [];
					var yAxisDataBar1 = [];
					var yAxisDataBar2 = [];
					var yAxisDataBar3 = [];
					var yAxisDataBar4 = [];
					var yAxisDataBar5 = [];
					var yAxisDataBar6 = [];
					var yAxisDataBar7 = [];
					var yAxisDataBar8 = [];
					var yAxisDataBar9 = [];
					var yAxisDataBar10 = [];
					var yAxisDataBar11= [];
					var yAxisDataBar12 = [];
					//上个月数据
					var lAxisData=[];
					var yAxisDataLine1 = [];
					var yAxisDataLine2 = [];
					var yAxisDataLine3 = [];
					var yAxisDataLine4 = [];
					var yAxisDataLine5 = [];
					var yAxisDataLine6 = [];
					var yAxisDataLine7 = [];
					var yAxisDataLine8 = [];
					var yAxisDataLine9 = [];
					var yAxisDataLine10 = [];
					var yAxisDataLine11= [];
					var yAxisDataLine12= [];

定义图示文本：var legendData1 = [ '当月名片（张）', '上月名片（张）' ]; var legendData2 = [ '当月对话（条）', '上月对话（条' ]; var legendData3 = [ '当月点击（次）', '上月点击（次）' ]; var legendData4 = [ '当月实际消费（￥）', '上月实际消费（￥）' ]; var legendData5 = [ '当月展现（次）', '上月展现（次）' ]; var legendData6 = [ '当月留言（条）', '上月留言（条）' ]; var legendData7 = [ '当月消费（￥）', '上月消费（￥）' ]; var legendData8 = [ '当月总业绩（￥）', '上月总业绩（￥）' ]; var legendData9 = ['当月费比（%）','上月费比（%）' ]; var legendData10 = ['当月万点击率（%）','上月万点击率（%）' ]; var legendData11 = ['当月留电率（%）','上月留电率（%）' ]; var legendData12 = ['当月名片成本','上月名片成本' ];
定义初始化图形函数：

	function initEach(xData, yDataBar,first_type,yDataLine, legendData,nmin,
							nmax, ninterval,omin,omax,ointerval,colorBar,colorBarArea,colorLine,colorLineArea) {
						// ==============================
						var myEcharts = echarts.init(document
								.getElementById("main")); // 初始化
						var option = {
							tooltip : {
								trigger : 'axis',
								axisPointer : {
									type : 'cross',
									crossStyle : {
										color : '#AEEEEE'
									}
								}
							},
							 noDataLoadingOption: