近期要做毕设，题目是基于微博平台的实时处理，因为题目太大，一时也想不到好的方案，因此就想添加几个Echarts图来表现实时性。
折柱混合
以下是建表语句和模拟数据，用于异步加载。
用户名称用户关注数用户粉丝数用户发表微博数日期Gedeon2333223232017-03-01create table day_num_wave( id int auto_increment primary key notnull, name varchar(255), focus varchar(255), fans varchar(255), friends varchar(255), date varchar(255) )ENGINE= myisam DEFAULT CHARSET = utf8;
insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','23','34','45','2017-02-01'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','24','38','46','2017-02-02'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','25','39','46','2017-02-03'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','26','36','46','2017-02-04'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','28','36','47','2017-02-05'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','30','34','47','2017-02-06'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','32','36','48','2017-02-07'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','33','40','48','2017-02-08'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','32','41','48','2017-02-09'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','34','41','49','2017-02-10'); insert into day_num_wave (name,focus,fans,friends,date) values('Gedeon','34','42','49','2017-02-11');在echarts中，官网给的例子为封装好的js代码，因此在使用中只需要在html中定义一个DOM，然后在js中使用官网给的代码
* index1 中json格式的数据*
{"re7":[{"id":1,"name":"Gedeon","focus":"23","fans":"34","reportnum":"45","date":"2017-02-01","num":"45"}]}以下为html页面内容
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <script src="js/echarts.js"></script> <script src="js/jquery.min.js"></script> <!--<script src="js/echarLine.js"></script>--> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <title>关注人数变化</title> <style> .box1{ width: 90%; height: 800px; float:left; } </style> </head> <body> <div id="main" class="box1"> 显示框 // 定义显示图的大小 </div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ tooltip: { trigger: 'axis' }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['粉丝','关注','好友'] /标题栏 要与下面的data[]对应 }, xAxis: [ { type: 'category', data: [] } ], yAxis: [ { type: 'value', name: '粉丝/关注', min: 0, max: 100, interval: 5, axisLabel: { formatter: '{value} 位' } }, { type: 'value', name: '好友', min: 0, max: 100, interval: 5, axisLabel: { formatter: '{value} 条' } } ], series: [ { name:'粉丝', type:'bar', data:[] }, { name:'关注', type:'bar', data:[] }, { name:'好友', type:'line', yAxisIndex: 1, data:[] } ] }); /** * 以下三行代码是我在项目中用来获取GET参数的 跟单个但是数据没关系。 */ var str=location.href; //取得整个地址栏 var num=str.indexOf("=") var name=str.substr(num+1); //取得所有参数 alert(name); // 以下使用jquery 请求数据，在后端使用程序往 index1 上传入json格式的数据。 $.get('http://localhost:8000/index1',{name:name}).done(function (data) { console.log(data.re7[1].fans); //测试数据 在网页上 F12查看数据格式 // 填入数据 var x=new Array(); for(var i in data.re7) //data为json对象，re7为json格式的值 { x.push(data.re7[i].date) // 为集合赋值。 } var y=new Array(); for(var i in data.re7) { y.push(data.re7[i].fans) } var z=new Array(); for(var i in data.re7) { z.push(data.re7[i].focus) } var w=new Array(); for(var i in data.re7) { w.push(data.re7[i].reportnum) } myChart.setOption({ xAxis: { data:x }, series: [{ // 根据名字对应到相应的系列 name: '粉丝', data:y },{ // 根据名字对应到相应的系列 name: '关注', data:z },{ // 根据名字对应到相应的系列 name: '好友', data:w }] }); }); </script> </body> </html>在后端中，我使用mybatis来加载mysql数据库中的数据，然后将数据封装到一个对象中。并定义接口和实现类。 最后将获取到的数据存储到集合中，传入页面
包装对象类
package org.tute.info; import javax.persistence.*; /** * Created by MX-092 on 2017/3/1. */ @Entity @Table(name="day_num_wave") public class DayWave { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; private String name; private String focus; private String fans; // 与mysql中的字段对应 private String friends; // get set 方法已省略 }定义返回数据对象
// 用来封装查询到的数据 public class ResposeData { private List<DayWave> re7; public ResposeData(List<DayWave> re7) { this.re7 = re7; } public List<DayWave> getRe7() { return re7; } public void setRe7(List<DayWave> re7) { this.re7 = re7; } }ResposeDataService
public interface ResposeDataService { List<DayWave> findByname(String name);}
ResposeDataServiceImpl
@Service public class ResposeDataServiceImpl implements ResposeDataService { @Autowired ResposeDataMapper resposeDataMapper; @Override public List<DayWave> findByname(String name) { return resposeDataMapper.findByName(name); } }ResposeDataMapper // 使用mybatis 查询数据 并定义返回结果形式。
@Mapper public interface ResposeDataMapper { @Select("SELECT * FROM day_num_wave WHERE name = #{name}") List<DayWave> findByName(@Param("name") String name); }返回数据
@RestController public class EchartsHtml { @Autowired ResposeDataService resposeDataService; @RequestMapping(value = "/index1",method = RequestMethod.GET) public ResposeData index1(@RequestParam(value="name", required = true)String name, Model model) { List<DayWave> daywaves = resposeDataService.findByname(name); System.out.println("=============name============="); List<DayWave> rt7 = new LinkedList<>(); for(DayWave d : daywaves){ rt7.add(d); } System.out.println(rt7); return new ResposeData(rt7); } }Application
@SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } }请求
@Controller public class LoginHtml { @RequestMapping(value="/index",method = RequestMethod.GET) public String index(Model model) return "index"; } }运行spring Application类。然后输入页面链接。http://localhost:8080/index 即可 下面为显示结果
