ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库.echarts是中国的,也是世界的.最近有时间,自己花了点时间学习了以下,下面我将从入门demo,动态从数据库中获取数据展示,和java自动生成,在代码里完成数据的设置和表的生成.这三个阶段来做下浅谈.
我是通过这种方式来引入echarts的,后面需要引用别的时候也会有具体模块的.
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
我们需要在页面先定义一个div,暂且id=main.后面就是通过js将图标生成在这个div中.
</head> <body> <div id="main" style="wide :600px;height: 480px"></div> </body> </html>之后我们用js代码来初始化,填充图表数据
<title>echarts的柱状图的测试案例</title> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); //x轴的参数列表 var xAxisData =["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"];//后期这里是动态从数据库获取的json数据 var data =[5, 20, 50, 10, 24, 20,24,32]; //设置数据 var option = { title: { text: '树形图表:渐变色 阴影 点击缩放', subtext: "冬季服装日销售统计" }, tooltip: { //提示 show: true }, legend: { //设置图例 data:['销量'] }, //设置坐标轴 xAxis : [ { type : 'category', data :xAxisData //这里就是刚刚我们设置的x轴的数据 } ], yAxis : [ { type : 'value' } ], //设置数据 series : [ {//树形的 "name":"销量", "type":"bar", //type=bar就是树形图标 "data":data } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script>这样一个简单的demo就完成了.只是这里面的数据我们是固定写在页面上的.
接下来我们就要模拟在企业里面图标显示数据分析结果了.来演示一个查看班级人数.我也只是将上面demo中的数据动态添加而已,但是这却好过写死在前端页面.
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); //x轴的参数列表 var xAxisData =${xAxisData}; var data =${data}; //设置数据 var option = { title: { text: '树形图表:渐变色 阴影 点击缩放', subtext: "冬季服装日销售统计" }, tooltip: { //提示 show: true }, legend: { //设置图例 data:['人数'] }, //设置坐标轴 xAxis : [ { type : 'category', data :xAxisData } ], yAxis : [ { type : 'value' } ], //设置数据 series : [ {//树形的 "name":"班级人数", "type":"bar", "data":data } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </head>在后台controller里面我往model 里面添加modelAttribut("xAxisData",一个list集合里面是班级名称);注意这个list里面的String类型在传到前台来时候里面的String
要用""括起来.这是作为x轴的每列的名称
添加modelAtrribute("data",和只获取到的每个班级人数的list集合);这个作为数据填充给图表. )
这里的collection3是我们自己写的工具类,
/** * 获取到所有的班级数据,这里传到前台的只要班级名称和人数 */ @RequestMapping(value = {"list",""}) public String findAllPie(Model model){ List<TestPieClass> list = service.findList(new TestPieClass()); List<String> className = Collections3.extractToList(list, "className"); List<String> finalList = new ArrayList<>(); for (String name : className){ finalList.add("'".concat(name.concat(" '"))) ; } model.addAttribute("xAxisData",finalList ); model.addAttribute("data",Collections3.extractToList(list,"num")); return "mods/echarts/other/testClassBar"; }完成后页面展示的效果是这样的(标题和副标题我没改)
接下来我要开始讲讲第三种更简单的将页面和数据分开的做法,我们直接在java代码中返回option给页面,页面在js里面填充生成图表.
用了GitHub上1533abe的开源项目,曾经用过他的通用mapper也是超级爽,他还有好几个开源项目.
我对应的jsp我写了一个对应的js,做演示.实际上写这一个js文件可以在其他页面上用的,谁用谁来引入.
js里面动态生成
<%@ page contentType="text/html;charset=UTF-8" %> <script> // 基于准备好的dom,初始化echarts实例4 var myChart; function refreshCharts(){ jp.get("${ctx}/kindclothing/echarts/option", function (option) { // 指定图表的配置项和数据 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }) $('#testPieClassTable').bootstrapTable('refresh'); } $(document).ready(function() { //初始化echarts 获取到echarts对象 myChart = echarts.init(document.getElementById('main')); window.onresize = myChart.resize;
在jsp页面,我这个页面还有一个table,作为分页显示学生信息的.它与echarts无关哦
<%@include file="fzqtestPieClassList.js" %> </head> <body> <div class="wrapper wrapper-content"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">学生列表(测试数据)</h3> </div> <div class="panel-body"> <div id="main" style="width: 100%;height: 300px"></div><table id="testPieClassTable" data-tolbar="#toolbar"></table 接下来就是构造这个js函数里面的option了在这里先演示饼形图:pie
@RequestMapping("test")public String list(){ return "mods/echarts/other/fzqtestPieClassList"; }/** * 饼形图的输出 * @return */ /*@RequestMapping(value = "option") @ResponseBody public GsonOption getOption(){ GsonOption gsonOption = new GsonOption(); gsonOption.title().text("班级学生人数统计表").subtext("测试"); //option变态的地方在于这里需要设置多个option!! gsonOption.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage, new MagicType(Magic.pie, Magic.funnel) .option(new MagicType.Option().funnel( new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548)))); //构造数据给页面 List<TestPieClass> list = service.findList(new TestPieClass()); List<PieData> pieData = new ArrayList<>(); for (TestPieClass testPieClass :list) { pieData.add( new PieData(testPieClass.getClassName(),testPieClass.getNum()));//在这里就完成了对x轴和数据表(y轴的数据设置) } Pie pie = new Pie().name("班级人数统计表"); pie.setData(pieData); gsonOption.series(pie); return gsonOption; }*/
饼形图显示效果
之后我又换成额树形图:和饼形图java代码略有不同
/** * 树形图的输出 */ @RequestMapping(value = "option") @ResponseBody public GsonOption getOption(){ GsonOption option = new GsonOption(); option.title().text("班级学生信息分析图").subtext("测试"); option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage, new MagicType(Magic.line, Magic.funnel) .option(new MagicType.Option().funnel( //以上是设置 数据视图,还原,作为图片保存,转为线形图, 等等图标 new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548)))); //构造数据 List<TestPieClass> list = service.findList(new TestPieClass()); CategoryAxis categoryAxis = new CategoryAxis(); categoryAxis.setData(Collections3.extractToList(list,"className")); //这里是构造x轴数据,只要班级 List<Bar> barList = new ArrayList<>(); Bar bar = new Bar("班级人数信息"); //这次用bar对应的是树形图 bar.stack("人数"); bar.setData(Collections3.extractToList(list,"num")); //collection3这个工具类这样会获取到list集合中所有的班级 num的数据,组成一个list bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值")); bar.markLine().data(new PointData().type(MarkType.average).name("平均值")); option.setCalculable(true); option.xAxis(categoryAxis); option.yAxis(new ValueAxis()); Legend legend = new Legend(); legend .setShow(true); //这是设置图例 option.setLegend(legend); option.series(bar); return option; }跑起来访问test,会跳转到我们写的那个jsp页面,在这个jsp页面访问option,controller接收到这个请求返回一个gsonoPtion ,完成图表数据的填充
当然这其中还有很多设置项,和css的样式的设置的.大家可以自行添加.