echar官网t:http://echarts.baidu.com/
echart 是我目前了解的比较好的用来做前端表格展示的工具。由百度公司研发和维护,做的还是不错的。
以前了解过,但是没有真正在项目中运用,用过之后感觉其他使用的方法很简单,根据api想要什么就设置什么即可。
本博文只负责记录一下我弄得第一个实际小demo,应项目要求是折线图,所以简单写了一个小demo。
(讲道理,别的类型的图形都差不多,只要会根据api开发,啥都不是事),话不多说,直接上代码。
注:这里为了方便,是在线引用两个js文件,实际项目推荐下载到本地
这里面我主要讲一下我在开发的时候自己遇到的问题和解决方案:
①js文件的引用,推荐引用带有源码的echart.js,有的是使用echart.min.js ,echart是附带全部源码的文件,适合开发使用
②echarts的各个属性配置 按照需求根据官方api设置 推荐API地址:http://echarts.baidu.com/echarts2/doc/doc.html
⑤图表各项数据与后台交互,详细参考js中getChartData()方法。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ECharts-折线图</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugins/echart/echarts.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div>
<script>
//初始化
var myChart = echarts.init(document.getElementById('main'));
//参数设置
option = {
title: { //标题组件
// text:'消费金额统计图'
text:'消费金额统计图',
x:'center',
y:'top',
textAlign:'left'
},
tooltip: { //提示框组件
trigger: 'axis',
showDelay :5
},
legend: { //图例组件
left:'right',
data: ['消费金额(元)', '周环比(100%)']
},
grid: { //直角坐标系内绘图网格
// left: '3%',
// right: '4%',
// bottom: '3%',
x: 40,
x2: 100,
y2: 150,
containLabel: true
},
// toolbox: { //工具栏
// feature: {
// saveAsImage: {}
// }
// },
xAxis: { //直角坐标系 grid 中的 x 轴
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
rotate: 40,
},
textStyle:'#333',
name:"时间",
axisTick:{
show:false
},
data: []
},
yAxis: { //直角坐标系 grid 中的 y 轴
// min: 0,
// max: 4000,
// interval:500,
name:"值",
type: 'value'
},
series: [ //系列列表
{
name: '消费金额(元)',
type: 'line',
stack: '总量',
itemStyle : { normal: {label : {show: true}}},
data: []
},
{
name: '周环比(100%)',
type: 'line',
itemStyle : { normal: {label : {show: true}}},
stack: '总量',
data: []
}
]
};
myChart.setOption(option); //参数设置方法
myChart.hideLoading();
// getChartData();//aja后台交互
getChartData();
function getChartData() {
//获得图表的options对象
var options = myChart.getOption();
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "${pageContext.request.contextPath}/do/echart/getEchartData",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
// options.legend.data = result.legend;
options.xAxis[0].data = result.category;
options.series[0].data = result.series[0].data;
options.series[1].data = result.series[1].data;
myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
</script>
<script type="text/javascript">
</script>
</body>
</html>
后台EchartController .java方法(用于造数据)
package com.cn.control.echart;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.cn.model.echart.EchartData;
import com.cn.model.echart.Series;
/** * @author feifz:
* @date :2017年7月5日 上午11:13:42
* @return
* @desc
*/
@Controller
@RequestMapping("echart")
public class EchartController {
/**
*
* @return
*/
@RequestMapping("getEchartData")
@ResponseBody
public EchartData getEchartData(){
List<String> legendList=new ArrayList<String>();
List<String> categoryList=new ArrayList<String>();
categoryList.add("20170301-20170308");
categoryList.add("20170309-20170316");
categoryList.add("20170317-20170324");
categoryList.add("20170325-20170401");
categoryList.add("20170402-20170409");
categoryList.add("20170410-20170417");
categoryList.add("20170418-20170425");
List<Series> seriesList =new ArrayList<>();
List<Integer> data1 = new ArrayList<>();
data1.add(111);
data1.add(272);
data1.add(313);
data1.add(474);
data1.add(515);
data1.add(474);
data1.add(515);
seriesList.add(new Series("消费金额(元)", "line",data1));
List<Integer> data2 = new ArrayList<>();
data2.add(111);
data2.add(222);
data2.add(333);
data2.add(444);
data2.add(555);
data2.add(444);
data2.add(555);
seriesList.add(new Series("周环比(100%)", "line",data2));
EchartData echartData = new EchartData(legendList, categoryList, seriesList);
return echartData;
}
}
(效果图)