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>

 

posted @ 2018-12-27 21:57  zty_2018  阅读(872)  评论(0编辑  收藏  举报