Echarts.js create dynamic data have issue

1

inside the js code i use html table to push the data

var dps = [];

$("table.table_1 tr").each(function(){
    key = $("td:nth-child(2)", $(this)).text();
    value = $("td:nth-child(1)", $(this)).text();
    if (value == '') {
        value = 0;  
    }
    dps.push(['\{ value: ' + Number(value) + ', name: \'' + key + '\' \}']);
});

var echartPie = echarts.init(document.getElementById('echart_pie'), theme);

//var datalabel = $("#cartdatalabel").text();
//var datachart = $("#cartdata").text();

echartPie.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },
    legend: {
        x: 'center',
        y: 'bottom',
        //data: ['Email']
        //data: dps.key
    },
    calculable: true,
    series: [{
        name: 'Source',
        type: 'pie',
        radius: '25%',
        center: ['48%', '38%'],
        // data: [{value: 335,name: 'Email'}]          
        data:dps
    }]
});

But I get the result is different, below is the image result. can help I not sure where is my code problem

jssdcsdcsdv

2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

4

I want the reult like below image
scacascasc

i use table to get the value push to js, because the data is dynamic

6

under the chart is the table value i push to js

wewefwefsdvdsv

8

HTML table

  <table class="table table-striped tbrecent table_1">
  <div id="detailschart" runat="server" ></div>
  </table>

behind code c#

var totalcount = 0;
 totalcount = dtUser.Rows.Count;
 var listtable = "";
 for (var i = 0; i < totalcount; i++)
 {
            listtable = listtable + "<tr><td>" + mag.nullDB2String(dtUser.Rows[i], "TOTAL_SOURCE") + "</td><td>"
                                    + mag.nullDB2String(dtUser.Rows[i], "SOURCE_DESC") + "</td></tr>";
 }
 detailschart.InnerHtml = listtable;
10

after run the code

<table class="table table-striped tbrecent table_1">
<tr>
<td>2</td>
<td>Email</td>
<tr>
<td>1</td>
<td>Roadshow</td>
<//tr>
</table>

vdvsdvsdvv
vdvsdvsdvv1366×728 51.7 KB

because the project is in localhost does not has url

12

Is work Thank you so much

14

Thank you for your suggestion. I will try