ajax获取json数据后用echarts制作折线图

ajax获取json数据后用echarts制作折线图

需要引入jquery和echarts代码

这个是json数据： https://api.doctorxiong.club/v1/fund/detail?code=952035

这个是ajax代码：

var code = "952035";//基金代码
var token = "5KaB6ucywg";
$.ajax({  
        type: "GET",
        url:"https://api.doctorxiong.club/v1/fund/detail",  
        dataType : "json", 
        data: {"code":code},
        headers : {"token":token},
        success : function(data){
            $('#manager').append(data.data.manager);
            $('#type').append(data.data.type);
            $('#buyMin').append(data.data.buyMin);
            $('#name').append(data.data.name);
             //$('#stockLists').append(data.data.stockList);

             
            var jjjz = '';
            
            for (var i = 0; i < data.data.netWorthData.length - 1; i++) {
                
                jjjz += '<tr><td>' + data.data.netWorthData[i].join('</td><td>') +'</td></tr>';
                
            }
            
            
           $('#lslList').append(jjjz)
        },
        error: function(data){ 
            alert('数据访问异常');
            console.log('提示：数据访问异常'); 
            } ,
    });

这个是html表格代码: 目前表格里面显示的内容是按照时间正排序，麻烦帮忙改成倒排序

<div class="layui-container">
    <div class="layui-row">
        <div class="bgxs">
            <table class="layui-table" lay-size="lg">
                <thead class="bg">
                    <tr>
                    <th>日期</th>
                    <th>单位净值</th>
                    <th>净值涨幅</th>
                    <th>每份分红</th>
                    </tr>
                </thead>
                <tbody id="lslList">
                </tbody>
            </table>
        </div>
    </div>
</div>

这里显示折线图，麻烦帮忙写一下echarts代码


<div class="layui-container">
    <div class="layui-row">
        <div class="zhexiantu">
            这里显示折线图
        </div>
    </div>
</div

麻烦帮忙写一下echarts代码，另外吧表格里面的排序按照时间倒排序

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        这里显示折线图
        <div class="zhexiantu" style="width: 600px;height:400px;"></div>
    </div>
    <div class="layui-row">
        <div class="bgxs">
            <table class="layui-table" lay-size="lg">
                <thead class="bg">
                <tr>
                    <th>日期</th>
                    <th>单位净值</th>
                    <th>净值涨幅</th>
                    <th>每份分红</th>
                </tr>
                </thead>
                <tbody id="lslList"></tbody>
            </table>
        </div>
    </div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script src="echarts-5.1.2/echarts.min.js"></script>
<script>
    $(function () {
        var chartDom = $(".zhexiantu")[0];
        var myChart = echarts.init(chartDom);
        var option;
        var code = "952035";//基金代码
        var token = "5KaB6ucywg";
        $.ajax({
            type: "GET",
            url: "https://api.doctorxiong.club/v1/fund/detail",
            dataType: "json",
            data: { "code": code },
            headers: { "token": token },
            success: function (data) {
                $('#manager').append(data.data.manager);
                $('#type').append(data.data.type);
                $('#buyMin').append(data.data.buyMin);
                $('#name').append(data.data.name);
                //$('#stockLists').append(data.data.stockList);

                data = data.data.netWorthData;
                var newData = JSON.parse(JSON.stringify(data)).reverse()
                $('#lslList').append(newData.map(tr => "<tr>" + tr.map(td => `<td>${td}</td>`) + "</tr>"))
                option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            return '单位净值：' + params[0].data.NAV + '</br>'
                                + '净值涨幅：' + params[0].data.NAVGain + '</br>'
                                + '分红：' ;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(tr => tr[0])
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(tr => ({ 'value': tr[1], 'NAV': tr[1], 'NAVGain': tr[2] })),
                        type: 'line'
                    }]
                };
                myChart.setOption(option);
            },
            error: function (data) {
                alert('数据访问异常');
                console.log('提示：数据访问异常');
            },
        });
    })
</script>
</body>
</html>

img

你要设置好option对象的参数，返回后台数据后就通过设置对象的属性设置。

..

for (var i = data.data.netWorthData.length - 1; i >=0; i++）

把后台获取的数据，放到你的echart 里边不就可以了吗

满意请采纳一下,代码已发

问题解决了吗，我也做过类似的

img

问题解决了吗，我也做过类似的

img