echarts动态加载数据
今天处理了之前遇到的一个难题,就是echarts从c标签里获取值,并显示,我是根据jquery的$().each(function())循环方法,把c标签的值循环出来,并用push()数组方法进行存值,
一下是示例代码:
//table c标签 <table class="table tb-type2" id="contentTable" style="display:none"> <caption>${fn:substring(el.startTime, 0, 7) } 至 ${fn:substring(el.lastTime, 0, 7) } 税种走势</caption> <thead> <tr class="timetr"> <th></th> <c:forEach items="${yearMonthLists}" var="el"> <th class="time">${el }</th> </c:forEach> </tr> </thead> <tbody> <c:forEach items="${twelveList}" var="el"> <tr> <th class="name">${el.key }</th> <c:forEach items="${el.value}" var="e"> <td class="amout">${e.amount}</td> </c:forEach> </tr> </c:forEach> </tbody> </table> //jquery,echarts <script type="text/javascript"> debugger; //时间集合 var arrtime=[ ]; //金额集合 var arramount=[ ]; //名称集合 var arrname=[ ]; //时间 var time; //金额 var amount; //名称 var name; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //时间 $(".time").each(function(i){ time=$(this).context.innerText; arrtime.push(time); }); //名称 $(".name").each(function(){ name=$(this).context.innerText; arrname.push(name); // alert($(this).context.innerText); }); //金额 $(".amout").each(function(){ console.info("获取行时间对象"+$(this)); console.info("获取行时间值:"+$(this).context.innerText); amount=$(this).context.innerText; arramount.push(amount); //alert($(this).context.innerText); }); // 指定图表的配置项和数据 var option = { title: { text: '柱状图' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:arrname }, xAxis: { data:arrtime }, yAxis: {}, series: [{ name: arrname, type: 'bar', data: arramount }, { name: arrname, type: 'bar', data: arramount } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>