javascript - $.each循环json配合echart生成图表，怎么循坏生成echart的series设置？

问题描述

问 题

题目可能没有说的很清楚，请看下面详细说明。

需求

通过 $.each() 循环数据得到如图表格，然后需要按照数据生成 echart 图表。

series : [
    {
        name: '地市名称',
        type:'bar',
        stack: '地区',
        data:[120, 132, 101, 134, 90, 230, 210, 400, 500, 200]
    }
]

name 为地市名称，data 为 [ 第二列 ~ 第十一列 ] 的数据。

提问

在这种数据很多的情况下，如何通过循坏的方式生成图表？

表格循坏代码

    $.each(resp, function(i,item) {
       html += '<tr>';
       html += '<td>'+ item.cityName +'</td>';
       html += '<td class="mobileOpenNum">'+ item.mobileOpenNum +'</td>';
       html += '<td class="mobileBroadbandNum">'+ item.mobileBroadbandNum +'</td>';
       html += '<td class="mobileMailNum">'+ item.mobileMailNum +'</td>';
       html += '<td class="mmsNum">'+ item.mmsNum +'</td>';
       html += '<td class="crbtNum">'+ item.crbtNum +'</td>';
       html += '<td class="schoolNewsNum">'+ item.schoolNewsNum +'</td>';
       html += '<td class="flow50Num">'+ item.flow50Num +'</td>';
       html += '<td class="package188Num">'+ item.package188Num +'</td>';
       html += '<td class="mobileNewsNum">'+ item.mobileNewsNum +'</td>';
       html += '<td class="otherNum">'+ item.otherNum +'</td>';
       html += '</tr>';
       
       $busiTypeTbody.html(html);
    });

图表怎样用类似方式生成设置？

series : [
    {
        name: item.cityName,
        type:'bar',
        stack: '地区',
        data:[item.mobileOpenNum, item.xxx, item.xxx, item.xxx, item.xxx, item.xxx]
    }
]

我刚尝试了一下如下方法:

var opionSeries = [];
$.each(resp, function(i,item) {
    var opionData = '';
    opionData += '['
    opionData += ''+ item.mobileOpenNum +','
    opionData += ''+ item.mobileBroadbandNum +','
    opionData += ''+ item.mobileMailNum +','
    opionData += ''+ item.mmsNum +','
    opionData += ''+ item.crbtNum +','
    opionData += ''+ item.schoolNewsNum +','
    opionData += ''+ item.flow50Num +','
    opionData += ''+ item.package188Num +','
    opionData += ''+ item.mobileNewsNum +','
    opionData += ''+ item.otherNum +''
    opionData += ']'

    opionSeries.push({name: item.cityName, type: "bar", stack: "地区", data: opionData});
});

出了点问题，数据乱了。

解决方案

var opionSeries = [];
$.each(resp, function(i,item) {
    var opionData = new Array(
           item.mobileOpenNum,
           item.mobileBroadbandNum,
           item.mobileMailNum,
           item.mmsNum,
           item.crbtNum,
           item.schoolNewsNum,
           item.flow50Num,
           item.package188Num,
           item.mobileNewsNum,
           item.otherNum
    );
    
    opionSeries.push({name: item.cityName,barWidth: "50px", type: "bar", stack: "地区", });

已解决，是我拼接数组弄错了

这篇关于javascript - $.each循环json配合echart生成图表，怎么循坏生成echart的series设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！