echarts动态加载数据

最新推荐文章于 2024-02-02 16:39:00 发布

转载最新推荐文章于 2024-02-02 16:39:00 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ztyc/p/10187701.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用ECharts和jQuery实现数据可视化的解决方案。通过解析c标签内的数据，利用jQuery的循环方法和数组push操作，实现了从表格中获取时间、名称和金额等数据，最终在ECharts中展示为柱状图。该方法适用于需要动态生成图表的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天处理了之前遇到的一个难题，就是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>