Question

am试图将数据从数据库绑定到Echart，我的查询返回以下值：

交易迭代1

Init ----------------- 0.02

登录------------- 2.29

App --------------- 6.08

向上--------------- 4.88

选择----------- 3.46

日志---------------- 0.26

例如，如果我选择两次迭代，则“迭代”列会增加，我会得到3列，即 Transaction ---- Iteration1 ----- Iteration2

我的查询运行正常。

我的json格式：

data [{交易记录：init，迭代次数：0.02}，{ 交易：登录，迭代1：2.29}，{交易：应用，迭代1：6.08}，{事务：向上，迭代1：4.88}，{ 事务：选择，迭代1：3.46}，{事务：日志，迭代1：0.26}]

        var myChart = echarts.init(document.getElementById('main'));

        var params = {

        runIds: '1'

        };

        $.ajax({
        url: transactionUrl,
        type: 'POST',
        dataType: 'JSON',
        contentType: 'application/json;',
        data: JSON.stringify(params),
        beforeSend: function () {

        },
        success: function (d) {



        var seriesHeader = [];



        if (seriesHeader.length === 0) {
            seriesHeader.push('Transaction');
            for (var key in d[0]) {
                if (d[0].hasOwnProperty(key)) {
                    if (key !== 'Transaction') {

                        seriesHeader.push(key);
                    }
                }
            }
        }

        $.each(d, function (i, item) {

            var count = 0;


            while (count < seriesHeader.length) {

                count += 1;
            }

        });

        var option = {
            title: {
                //text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data: seriesHeader
            },
            xAxis: {
                data: ???
            },
            yAxis: {},
            series: [{
                name: seriesHeader[1],
                type: 'bar',
                data: ??
            }
            ]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);

        },
        error: function () {


        }
        });

有些困惑如何将数据传递到Echart。随时欢迎您的帮助。

Answer 1

假设有2个迭代，请检查此演示。
这是你想要的吗？

    let echartsObj = echarts.init(document.querySelector('#canvas'));
    
    let d = [{
        Transaction: 'init',
        iteration1: 0.02,
        iteration2: 2.02,
    }, {
        Transaction: 'Login',
        iteration1: 2.29,
        iteration2: 0.52,
    }, {
        Transaction: 'App',
        iteration1: 6.08,
        iteration2: 3.53,
    }, {
        Transaction: 'Up',
        iteration1: 4.88,
        iteration2: 5.32,
    }, {
        Transaction: 'select',
        iteration1: 3.46,
        iteration2: 2.11,
    }, {
        Transaction: 'Log',
        iteration1: 0.26,
        iteration2: 1.02,
    }]
    
    let seriesHeader = d.map(item => item.Transaction)

    let datas = [];
    Object.keys(d[0]).forEach(key => {
        if (key !== 'Transaction') {
            datas.push({
                name: key,
                type: 'bar',
                data: d.map(item => item[key])
            })
        }
    })
    
 
    
    option = {
        xAxis: {
            type: 'category',
            data: seriesHeader
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: datas.map(item => item.name)
        },
        series: datas
    };

    echartsObj.setOption(option)

<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="canvas" style="width: 100%; height: 200px">
        </div>
      </body>
    </html>

将Json数据绑定到Echart

1 个答案: