Echarts从后台获取数据展示折线图（堆叠图） |
您所在的位置：网站首页 › echarts动态数据折线图 › Echarts从后台获取数据展示折线图（堆叠图） |
Echarts从后台获取数据展示折线图（堆叠图）
|
Echarts从后台获取数据展示折线图（堆叠图） 这里主要展示的是折线图，主要是涉及到两种订单的比较 接下来就是js以及html了 html：这里使用了easyui的框架，记得导入easyui需要的js和css 时间： 查询js： function search() { var time = $("#time").datebox("getValue"); if(time.length==0){ commonUtil.topCenter('请选择时间'); return; } $("#applyList").html("数据加载中..."); // 基于准备好的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); } |
首先我们要从数据库中获取所要展示的数据，这里我只进行controller的讲解【本文地址】
今日新闻 |
推荐新闻 |