echarts教程

最终效果

后台代码（Java）

第一次使用这个，本来想用ajax的方式输出图表，但是输出的json格式并不适合echarts的格式要求。最后在后台用model输出。

html页面代码

	 <input type="hidden" id="startTime" value="${startTime}">
	 <input type="hidden" id="platformOrder" value="${platformOrder}">
	 <input type="" id="paymentAmount" style="width: 61%" value="${paymentAmount}">
	 <input type="hidden" id="shopName" value="${shopName}">
	 <input type="hidden" id="headId" value="${headId}">
	 <input type="hidden" id="team" value="${team}">
	 <input type="hidden" id="payCurrency" value="${payCurrency}">
	<div id="myDiv1" style="height: 750px; width: 1000px;"></div>

ajax代码

//shopName 、startTime 、payCurrency 都是从后台传值过来。
	var shopName = $('#shopName').val().split(",");
	var startTime = $('#startTime').val().split(",");
	var paymentAmount = $('#paymentAmount').val().split(",");
	var payCurrency = $('#payCurrency').val().split(",");
	//获取显示的div的id，colors 为定义的颜色数组
	var myChart1 = echarts.init(document.getElementById('myDiv1'));
	var colors = ['#5793f3', '#d14a61', '#675bba'];
	var option1 = {
		color : colors, tooltip : {
			trigger : 'axis', formatter : function (params) {
			//params是获取X、Y轴上的数据
				console.log(params)
				var res = "<p>" + params[0].name + "</p>";
				res += "<p>" + params[0].data+payCurrency + "\n" + "</p>";
				return res;
			}
		}, toolbox : {
		//显示工具栏
			feature : {
				dataView : {
					show : true, readOnly : false
				}, restore : {
					show : true
				}, saveAsImage : {
					show : true
				}
			}
		}, dataZoom : [{}, {
		//可用滚轮放大缩小
			type : 'inside'
		}], xAxis : {
			type : 'category', data : shopName
		}, yAxis : {
		//注意type的类型，如果为category则无法按大小排序。能按大小排序的是value或者时间等
			type : 'value', min : 'dataMin', max : 'dataMax', axisLine : {
				lineStyle : {
					color : colors[0]
				}
			}, axisLabel : {
				formatter : '{value} '
			}
		}, series : [
		//bar是柱状图，line是折线图。
			{name : '金额', type : 'bar', data : paymentAmount, itemStyle: {
				color : colors[2],
			}},
			{name : '金额', type : 'line', data : paymentAmount, lineStyle : {
				color : colors[0],
			}}
		]
	};
	//设置option  
	myChart1.setOption(option1);

问题

第一次使用这个，踩过的坑很多。例如，formatter里的params在tooltip和series使用的方法不一样——tooltip输出的formatter是html格式，而series是直接输出内容。