jsp动态引入echarts图表

##jsp:

     //准备容器
	<div id="Chart1" style="width: 950px; height: 350px;"></div>

##js:

$(fun1 = function() {
	  $.get("后端Controller路径", function(data) {
		// 基于准备好的DOM,初始化echarts实例
		var myChart = echarts.init(document.getElementById('Chart1'));
		// 定义参数,用来替换图表所需要的参数
		// 数组
		var numbers1 = new Array();
		var numbers2 = new Array();
		// 对data进行便历,获取参数
		for (var i = 0; i < data.length; i++) {
			numbers1[i] = data[i].salenum;
			numbers2[i] = data[i].saleline;
		}


		option = {
			
			legend : [ {
				data : [ '1' ],
				textStyle : {
					fontSize : 14
				}
			}, {
				data : [ '2' ],
				textStyle : {
					fontSize : 14
				}

			} ],

			tooltip : {},
			dataset : {
				source : [ [ 'product', '1', '2' ],
						[ '1', numbers1, numbers2 ],
						[ '2', numbers1, numbers2 ],
						[ '3', numbers1, numbers2 ],
						[ '4', numbers1, numbers2 ],
						[ '5', numbers1, numbers2 ],
						[ '6', numbers1, numbers2 ],
						[ '7', numbers1, numbers2 ] ]
			},
			xAxis : {
				type : 'category'
			},
			yAxis : {
				type : 'value'
			},
			series : [ {
				type : 'bar'
			}, {
				type : 'bar'
			} ]
		};
		// 自适应
		window.onresize = myChart.resize;
		// 显示图表
		myChart.setOption(option);

		console.log('Chart1');
	})

})


发布了11 篇原创文章 · 获赞 0 · 访问量 181
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览