Icareabout 2021-06-30 13:07 采纳率: 95.8%
浏览 550
已采纳

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

  • 写回答

8条回答 默认 最新

  • 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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题？

悬赏问题

  • ¥15 如何构建全国统一的物流管理平台?
  • ¥100 ijkplayer使用AndroidStudio/CMake编译，如何支持 rtsp 直播流?
  • ¥20 和学习数据的传参方式，选择正确的传参方式有关
  • ¥15 这是网络安全里面的poem code
  • ¥15 用js遍历数据并对非空元素添加css样式
  • ¥15 使用autodl云训练，希望有直接运行的代码(关键词-数据集)
  • ¥50 python写segy数据出错
  • ¥20 关于线性结构的问题：希望能从头到尾完整地帮我改一下，困扰我很久了
  • ¥30 3D多模态医疗数据集-视觉问答
  • ¥20 设计一个二极管稳压值检测电路