html ajax折线图

js去官网下载:

https://echarts.baidu.com/download.html

引入js文件:

<script src="../../js/echarts.min.js"></script>

ajax方法以及div:

                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="line" style="width: 600px;height:400px;"></div>
                    <script type="text/javascript" >

                        var myline = echarts.init(document.getElementById('line'));
                        //净值
                        function JingZhi(){
                            var data = $("#JingZhiForm").serialize();
                            var netWorth = [];
                            var cumulativeNetWorth = [];
                            var date = [];
                            $.post("queryChanPinJingZhi",data,function(result){
                                console.log(result);
                                $(".jingzhijieguo").html("");
                                $.each(result,function(index,item){
                                    if(item != null || item != ""){
                                        /*给数组循环添加数据*/
                                        netWorth.push(item.netWorth);
                                        cumulativeNetWorth.push(item.cumulativeNetWorth);
                                        date.push(item.valuationDate);
                                        /*调用折线图方法*/
                                        myline.setOption(option);
                                        var time = timeFormat(item.operatingDate);
                                            $("#JingZhi").append("<tr class='jingzhijieguo'><td>"+item.setUpBatch+"</td>\n" +
                                                "                            <td>"+item.netWorth+"</td>\n" +
                                                "                            <td>"+item.cumulativeNetWorth+"</td>\n" +
                                                "                            <td>"+item.valuationDate+"</td>\n" +
                                                "                            <td>"+item.dateOfPublication+"</td>\n" +
                                                "                            <td>"+item.operatorID+"</td>\n" +
                                                "                            <td>"+time+"</td></tr>");
                                        }else{

                                        netWorth.push(0);
                                        cumulativeNetWorth.push(0);
                                        date.push(0);
                                    }

                                })
                            })

                            option = {
                                title: {/*标题*/
                                    text: '净值折线图:(横坐标:估值日期;纵坐标:净值,累计净值)'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                legend: {
                                    right:'right',
                                    data:['净值','累计净值']
                                },
                                xAxis: {
                                    type: 'category',
                                    data: date/*X轴*/
                                },
                                yAxis: {
                                    type: 'value'
                                },/*折线图需要几天线就写几个大括号*/
                                series: [{
                                    name:'净值',
                                    data: netWorth,/*数组*/
                                    type: 'line'
                                },{
                                    name:'累计净值',
                                    data: cumulativeNetWorth,/*数组*/
                                    type: 'line'
                                }

                                ]}


                        }
                    </script>