JS 折线图

Wesley13
• 阅读 850

JS 折线图 

echarts 折线图。需要引入:echarts.min.js

<script src="${ctxStatic}/common/echarts.min.js" charset="utf-8"  type="text/javascript"></script>

JS调用后台方法,得到数据

Map<String, Object> map = new HashMap<String, Object>();

 

  for (Integer i = 0; i < 24; i++) {

    boolean isExit = false;

    String fixIndex = "";

    if (i < 10) {

      fixIndex = "0" + i;

    } else {

      fixIndex = i.toString();

    }

    for (Map<String, Object> spMap : list) {

      String hour = spMap.get("hour_remark").toString().substring(11);

      if (hour.equals(fixIndex)) {

        failcount.add(Integer.valueOf(spMap.get("fail_count").toString()));

        isExit = true;

        continue;

      }

    }

    if (!isExit) {

      failcount.add(0);

    }

  }

  Map<String, Object> failcountmap = new HashMap<String, Object>();

  failcountmap.put("name", "失败数量");

  failcountmap.put("data", failcount);

  allInfo.add(failcountmap);

  map.put("data", allInfo);

* failcountmap :    {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=失败数量}

* allInfo :    [{data=[0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=提交数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=下发数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=成功数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=未知数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=失败数量}]

map :   {data=[{data=[0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=提交数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=下发数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=成功数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=未知数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=失败数量}]}

-----------------------------------js-----------------------------------------

$(function() {

  $.get("${ctx}/domesticSms/sendStatisticsHour/list?createtime="+$("#createtime").val(),function(data) {

  var serie = [];

  var dataTitle = [];

  $.each(data.data, function(i, v) {

    var item = {

    name : v.name,

    type : 'line',

      smooth:true,    // 平滑的,可以使折线图平滑

         itemStyle: {normal: {areaStyle: { color: red ; }}},   // 可以设定折线图下阴影颜色。

    data : v.data

  }

  serie.push(item);

  dataTitle.push(v.name);

});

var myChart = echarts.init(document.getElementById('footerDiv_div'));

 

var option = {

    tooltip : {

      trigger : 'axis'

    },

    legend : {

      data : dataTitle,

      selected:{     // 设定折线图默认是否显示   name:boolean,

            '下发数量':true,

            '成功':false,

            '失败':false,

            '未知':false

      }

    },

    grid : {

      left : '3%',

      right : '4%',

      bottom : '3%',

      containLabel : true

    },

    toolbox : {

      feature : {

      saveAsImage : {}

    }

  },

  xAxis : {

    type : 'category',

    boundaryGap : false,

              splitLine: {show: false},   // X轴每个点对应一个纵线,是否展示。

    data : [ '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ]

  },

  yAxis : {

    type : 'value'

  },

  series : serie

 };

myChart.setOption(option);

})

 })

 

 JS 折线图

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法<script type"text/javascript" src"js/jquery.min.js"</script<script type"text/javascript" src"js/gallery.js"</script   二、Html结构<div id"wrapper"<div id"mai
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这