Echarts从后台获取数据展示折线图（堆叠图）

最新推荐文章于 2024-07-31 14:40:54 发布

拼命菇凉

最新推荐文章于 2024-07-31 14:40:54 发布

阅读量1.3w

点赞数 6

分类专栏： js-jquery

本文链接：https://blog.csdn.net/qq_32961283/article/details/80165707

版权

js-jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Echarts从后台获取数据展示折线图（堆叠图）
这里主要展示的是折线图，主要是涉及到两种订单的比较这里写图片描述
首先我们要从数据库中获取所要展示的数据，这里我只进行controller的讲解

@RequestMapping("/ecOrderCount")
    public void ecOrderStatisticsCount(HttpServletResponse response,String time) throws ParseException{
            DateFormat format1 = new SimpleDateFormat("yyyy-MM-dd");
            EcOrderCount ecOrderCounts=ecOrderStatisticsService.getCountsByTime(format1.parse(time));
            //图例
            List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "全部订单","支付订单"}));
            //横坐标的值
            List<String> axis = new ArrayList<String>(
                    Arrays.asList(new String[] {"1:00","2:00","3:00","4:00","5:00","6:00","7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"}));
            //纵坐标的值（每个时间段对应的量）
            List<Series> series = new ArrayList<Series>();
            series.add(new Series("全部订单","line",new ArrayList<Integer>(Arrays.asList(ecOrderCounts.getOrdercount()))));
            series.add(new Series("支付订单","line",new ArrayList<Integer>(Arrays.asList(ecOrderCounts.getPaycount()))));
            Echarts echarts = new Echarts(legend, axis, series);
            response.setContentType("text/html;charset=utf-8");
            PrintWriter out;
            try{
                out = response.getWriter();
                String jsonstr = JSON.toJSONString(echarts);
                System.out.println("str:"+jsonstr);
                out.write(jsonstr);
                out.flush();
                out.close();
            }catch(IOException e) {
                e.printStackTrace();
            }
        }

接下来就是js以及html了
html：这里使用了easyui的框架，记得导入easyui需要的js和css

<script type="text/javascript"src="${request.contextPath}/static/echarts/echarts.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>


<body>
  <div id="orderMoney_layout" class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',border:false" class="query-bg" title="日订单数量趋势图" height="auto">
                        <form id="searchForm" name="searchForm" action="<%=contextPath%>/shop/list_Dxjson" method="post">
                                <table style="padding-left: 10px;" class="custom-search-put">
                                        <tr>
                                                <th><p>时间：</p></th>
                                                <th><input type="text" class="easyui-datebox" id="time" name="time" style="width:150px;" /></th>
                                                <th><a href="javascript:search();" class="easyui-linkbutton" data-options="iconCls:'icon-export',plain:true">查询</a></th>
                                        </tr>
                                </table>
                        </form>
                </div>
                <div id="center" data-options="region:'center'">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"style="width: 800px; height: 300px"></div>
                </div>
        </div>
        </body>

js：

function search() {
    var time = $("#time").datebox("getValue");
    if(time.length==0){
        commonUtil.topCenter('请选择时间');
        return;
    }
    $("#applyList").html("<tr><td>数据加载中...</td></tr>");
     // 基于准备好的dom，初始化echarts实例

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

var option = {  
        title: {
            text: '日订单数量趋势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend : {
          data : []
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis : [ {
          type : 'category',
          boundaryGap: false,
          data : []
      } ],
      yAxis : [ {
          type : 'value'
      } ],
      series : []
  };
    // 使用刚指定的配置项和数据显示图表。
     $.ajax({
          type : "POST",
          url :projectPath + '/ecOrderStatistics/ecOrderCount?time='+time,
          dataType : "json",
          success : function(result) {
              //将从后台接收的json字符串转换成json对象
              var jsonobj = eval(result);
              //给图标标题赋值
              option.legend.data = jsonobj.legend;
              //读取横坐标值
              option.xAxis[0].data = jsonobj.axis;
              var series_arr = jsonobj.series;
              //驱动图表生成的数据内容，数组中每一项代表一个系列的特殊选项及数据
              for(var i = 0; i < series_arr.length; i++) {
                  option.series[i] = result.series[i];
              }
              //过渡控制，隐藏loading（读取中）
              myChart.hideLoading();
               // 为echarts对象加载数据
              myChart.setOption(option);
          }
      });
    myChart.setOption(option);

}