Icareabout
2021-06-30 13:07
采纳率: 100%
浏览 200

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代码,另外吧表格里面的排序按照时间倒排序

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • li.siyuan 2021-06-30 13:13
    已采纳

    完整代码

    <!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对象的参数,返回后台数据后就通过设置对象的属性设置。

    打赏 评论
  • weixin_45397358 2021-06-30 13:13

    ..

    打赏 评论
  • yycgis 2021-06-30 13:25

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

    打赏 评论
  • qq_45286427 2021-06-30 13:41

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

    打赏 评论
  • li.siyuan 2021-06-30 13:49

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

    打赏 评论

相关推荐 更多相似问题