300字范文 > Echarts—折线图动态获取数据示例（java版本）

Echarts—折线图动态获取数据示例（java版本）

时间：2020-02-03 09:46:26

最终效果

饼状图：饼状图示例，使劲点我！！！

柱状图：柱状图实例，使劲点我！！！

步骤：准备一个dom——>获取dom节点——>初始化——>绘制图表——>渲染数据

html代码

<template><section class="chart-container"><el-row><el-badge class="item" @click.native.prevent="test"><el-button type="primary" round size="small">告警信息</el-button></el-badge></el-row><el-row><el-col :span="11"><div id="text" style="width:100%; height:200px; margin-top: 150px;"><span style="font-size:26px">今日告警：56条</span><br/><span style="font-size:26px">昨日告警：5条</span><br/><span style="font-size:26px">本周告警：266条</span><br/><span style="font-size:26px">本月告警：1240条</span><br/><span style="font-size:26px">告警数最多的系统:营销员邮件系统</span><br/><span style="font-size:26px">告警数最少的系统:统一身份管理系统</span><br/></div></el-col><el-col :span="12"><div id="chartColumn" style="width:100%; height:400px;"></div></el-col><el-col :span="11"><template><el-select v-model="filters.value" placeholder="校验规则" clearable @change="change" @clear="clear" loading-text="加载中..."><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></template><div id="chartLine" style="width:100%; height:400px;"></div></el-col><el-col :span="12"><div id="chartPie" style="width:100%; height:400px;"></div></el-col></el-row></section></template>

js代码

java代码

/*** 主页相关* @author DSY */@CrossOrigin(origins="*",maxAge=3600)//实现跨域访问，*可以替换成指定的路径@RestControllerpublic class HomeController {@Autowiredprivate DataSourceService dataSourceService;@Autowiredprivate CheckRuleService checkRuleService;//主页柱状图获取数据@RequestMapping(value = "/columndata", method = RequestMethod.GET)@ResponseBodypublic List columnData() {//用对象接收返回值，对象存在list里List<DataSource> list = dataSourceService.getDbType();List datalist = new ArrayList<>();//数据库类型和出现次数String dbtype= null;int count = 0;//遍历list拿到每个对象中需要的，dbtype和countfor(int i = 0 ; i < list.size() ; i++) {dbtype=list.get(i).getDbType();count = list.get(i).getCount();datalist.add(dbtype);datalist.add(count);}return datalist;}//主页饼状图获取数据/** 思路* 把饼状图需要的两组数据（系统名称和对应的规则数）放在list中，遍历list存入数组，数组存在map找中，最后转成json。这样很麻烦，后续可以改进一下* */@PostMapping(value = "/piedata") @ResponseBodypublic Object pieData(@RequestBody Map<String,String> para){List<CheckRule> list = new ArrayList<>();//JSONArray json = new JSONArray();//JSONArray json = JSONArray.fromObject(list);//数据库中拿到目标数据存在嵌套对象的list中list = checkRuleService.getPieData(para.get("user_id"));String[] name= new String[list.size()];String[] data= new String[list.size()];Map<String, Object> map = new HashMap<>();//遍历list将目标数据分别存在两个数组中，然后两个数组作为元素存在map中，以供后面转成echart饼状图要求的json格式数据for (int i = 0; i < list.size(); i++) {name[i] = list.get(i).getApp_name();data[i] = Integer.toString(list.get(i).getCount());map.put("name", name);map.put("data", data);}//map转成json对象返回给页面Object json = JSONArray.toJSON(map);//System.out.println("返回给饼状图的json:"+json);return json;}@PostMapping(value = "/linedata") @ResponseBody@Testpublic Object lineData(@RequestBody Map<String,String> para){List<CheckRule> list = new ArrayList<CheckRule>();System.out.println("User_id:"+para.get("user_id"));System.out.println("checkRule_code:"+para.get("checkRule_code"));if(para.get("checkRule_code")!=null){list = checkRuleService.getLineData(para.get("user_id"),para.get("checkRule_code"));System.out.println("11111111");}else{list = checkRuleService.getLineData(para.get("user_id"),null);System.out.println("222222222");}System.out.println("list的长度是："+list.size());int intervals = 7;Integer[] data = new Integer[intervals];Integer[][] arr = new Integer[list.size()][intervals];List<String> listtemp = new ArrayList<String>();ArrayList<String> pastDaysList = new ArrayList<>(); List<String> legend = new ArrayList<String>(); //分组类目List<String> category = new ArrayList<String>();//X轴-时间List<Series> series = new ArrayList<Series>();//Y轴-数据SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); //定义时间格式，不显示毫秒for (int i = 0; i <intervals; i++) { pastDaysList.add(PastDate.getPastDate(i)); //调用获取日期的方法，拿到过去七天的日期} Collections.reverse(pastDaysList); //反转数组，日期从小到大排列category = pastDaysList;//七天日期赋值给echarts参数,作为X轴时间for (int i = 0; i < list.size(); i++) {listtemp.add(df.format(list.get(i).getCreate_time()));//legend.add(list.get(i).getCheckRule_code());}//**********************************************for (int i = 0; i <list.size(); i++) {//如果X轴七天中的某一天包含在sql查询到的时间集合里，那么这一时间对应的告警条数添加到data数组中作为这一天的告警条数，反之当天告警条数为0for (int j = 0; j < pastDaysList.size(); j++) {//if (listtemp.contains(pastDaysList.get(j))) {if (listtemp.get(i).equals(pastDaysList.get(j))) {data[j]=list.get(i).getCount();}else{data[j]=0;}}System.arraycopy(data, 0, arr[i], 0, 7);}for(int a = 0; a<arr.length; a++){series.add(new Series(list.get(a).getCheckRule_code(), "line",arr[a]));}for (int i =0 ; i<legend.size()-1;i++){//去除重复的规则名for(int j =i+1; j<legend.size();j++){if(legend.get(i).equals(legend.get(j))){legend.remove(i);}}}Echarts echarts=new Echarts(legend, category, series);Object json = JSONArray.toJSON(echarts);System.out.println("返回给折线图的json:"+json);return json;}}

java的工具类

public class Echarts {public List<String> legend = new ArrayList<String>();//数据分组 public List<String> category = new ArrayList<String>();//横坐标 public List<Series> series = new ArrayList<Series>();//纵坐标 public Echarts(List<String> legendList, List<String> categoryList, List<Series> seriesList) { super(); this.legend = legendList; this.category = categoryList; this.series = seriesList; } }

/*** 主页相关* 供主页折线图渲染数据的参数* @author DSY */public class Series {public String name; public String type; public Integer[] data; public Series( String name, String type, Integer[] data) { super(); this.name = name; this.type = type; this.data = data; } }

SQL语句

<select id="getLineData" resultType="checkRule">SELECT result.alert_sum as count,checkrule.checkRule_code as checkRule_code,result.create_time as create_timeFROM tb_tasks task LEFT JOIN tb_checkresults result on task.task_id = result.task_idLEFT JOIN tb_checkrules checkrule on task.checkRule_code = checkrule.checkRule_codeLEFT JOIN system_app app on app.id= checkrule.app_idwhere <if test="_parameter!=null">user_id=#{user_id} and</if> <if test="checkRule_code!=null">checkrule.checkRule_code=#{checkRule_code} and</if><![CDATA[ DATE_SUB(CURDATE(),INTERVAL 7 DAY) <= date(result.create_time)]]>GROUP BY result.create_timeORDER BY result.create_time ASC</select>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。