Echarts的setOption怎么用

zhrubin 2015-05-29 11:45:27

我设置当我点击按钮的时候，里面的id为main的div显示echarts报表，可是显示了一下，马上又什么都没有了.......好像又被耍了一次，很奇怪。

<%@ page language="java" contentType="text/html; charset=UTF-8"

	pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<script type="text/javascript"

	src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

<script type="text/javascript"

	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>

<script type="text/javascript"

	src="${pageContext.request.contextPath}/js/SimpleCanleder.js"></script>

<script type="text/javascript"

	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->





<!-- ECharts单文件引入 -->

<script src="${pageContext.request.contextPath}/js/echarts.js"></script>

<script type="text/javascript">

	// 路径配置

	require.config({

		paths : {

			echarts : '${pageContext.request.contextPath}/js'

		}

	});

	// 使用

	require(

			[ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

			],

			function(ec) {

				// 基于准备好的dom，初始化echarts图表

				var myChart = ec.init(document.getElementById('main'));



				var option = {

					//animation:false,

					tooltip : {

						show : true,

						trigger : 'axis'

					},

					legend : {

						data : [ '销量', '营业额' ]

					},

					toolbox : {

						show : true,

						feature : {

							mark : {

								show : true

							},

							dataView : {

								show : true,

								readOnly : false

							},

							magicType : {

								show : true,

								type : [ 'line', 'bar' ]

							},

							restore : {

								show : true

							},

							saveAsImage : {

								show : true

							}

						}

					},

					xAxis : [ {

						type : 'category',

						data : (function() {

							var dataarr = [];

							$

									.ajax({

										async : false, //这句必须加

										method : 'post',

										url : '${pageContext.request.contextPath}/GetMonthServlet',

										dataType : "json",

										success : function(data) {

											dataarr = data.month;

										}

									});

							return dataarr;

						})()

					} ],

					yAxis : [ {

						type : 'value'

					} ],

					series :[]/* [

							{

								"name" : "销量",

								"type" : "line",

								"data" : [](function() {

									var dataarr = [];

									$

											.ajax({

												async : false, //这句必须加

												method : 'post',

												url : '${pageContext.request.contextPath}/GetSalesVolumeServlet',

												dataType : "json",

												success : function(data) {

													dataarr = data.sales;

												}

											});

									return dataarr;

								})()

							},

							{

								"name" : "营业额",

								"type" : "line",

								"data" :[] (function() {

									var dataarr = [];

									$

											.ajax({

												async : false, //这句必须加

												method : 'post',

												url : '${pageContext.request.contextPath}/GetBusinessVolumeServlet',

												dataType : "json",

												success : function(data) {

													dataarr = data.businessVolume;

												}

											});

									return dataarr;

								})()

							} ]*/

				};

				//myChart.showLoading({text:'正在努力加载数据中....'});



				// 为echarts对象加载数据 

				myChart.setOption(option);

			});//end of require

</script>

<script type="text/javascript">

	function submitForm() {

		var dom = document.getElementById('main');

		var myChart = require('echarts').init(dom);



		var option = {

			tooltip : {

				show : true,

				trigger : 'axis'

			},

			legend : {

				data : [ '销量', '营业额' ]

			},

			xAxis : [ {

				type : 'category',

				data : (function() {

					var dataarr = [];

					$

							.ajax({

								async : false, //这句必须加

								method : 'post',

								url : '${pageContext.request.contextPath}/GetMonthServlet',

								dataType : "json",

								success : function(data) {

									dataarr = data.month;

								}

							});

					return dataarr;

				})()

			} ],

			yAxis : [ {

				type : 'value'

			} ],

			series : [ {

				name : "销量",

				type : "line",

				data : [ 1, 2, 3, 4, 5, 6 ]



			}, {

				name : "营业额",

				type : "line",

				data : [ 6, 5, 4, 3, 2, 1 ]

			} ]

		};



		//设置series

		myChart.setOption(option);



	}//end of submitForm

</script>

<title>ECharts</title>



</head>





<body>



	<div>

		<form onsubmit="">

			First name: <input type="text" name="x1" /> <br /> Last name: <input

				type="text" name="x2" />

			<button type="submit" class="btn btn-default" onclick="submitForm()">查询</button>

		</form>

	</div>

	<div id="main" style="height:400px"></div>



</body>