ECHARTS页面空白，找不到原因

找不到问题出在哪里，
ECHARTS的页面代码：GETE有json数据传回，
[{"btcid":"1","cash":100},{"btcid":"2","cash"200},{"btcid":"3","cash":400}]@{
    ViewBag.Title = "eline";
}<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet" />
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <style>
        html,
        body {
            background-color: #efeff4;
        }        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
            padding-bottom: 51px;
        }
    </style>
</head><body>
    <div class="mui-content">
        <div class="title" id="main" style="width: 100%;height: 600px;">        </div>
    </div>    <script src="../js/util.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例        var myChart = null;        let data1 = [];              var option = {
            title: {    //图表标题
                text: 'E图表'
            },
            tooltip: {
                trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
                /*
                           dataZoom: [
                {
                    type: 'slider',    //支持鼠标滚轮缩放
                    start: 0,            //默认数据初始缩放范围为10%到90%
                    end: 100
                },
                {
                    type: 'inside',    //支持单独的滑动条缩放
                    start: 0,            //默认数据初始缩放范围为10%到90%
                    end: 100
                }
            ],
            legend: {    //图表上方的类别显示
                show: true,
                data: ['btcid', 'cash']
                    },
            color: [
                '#FF3333',    //温度曲线颜色
                '#53FF53',    //湿度曲线颜色            ],
            toolbox: {    //工具栏显示
                show: true,
                feature: {
                    saveAsImage: {}        //显示“另存为图片”工具
                }
            },
            xAxis: {    //X轴
                type: 'categoty',
                data: []    //先设置数据值为空，后面用Ajax获取动态数据填入
            },
            yAxis: [    //Y轴（这里我设置了两个Y轴，左右各一个）
                {
                    //第一个（左边）Y轴，yAxisIndex为0
                    type: 'value',
                    /* max: 120,
                    min: -40, */
                    axisLabel: {
                        formatter: '{value}'    //控制输出格式
                    }
                }
            ],
            series: [    //系列（内容）列表
                {
                    name: 'cash',
                    type: 'line',    //折线图表示（生成温度曲线）
                    symbol: 'emptyrect',    //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                    data: data1        //数据值通过Ajax动态获取
                },                  ]
        }; 
        function refreshData() {
            setInterval(() => {                $.getJSON({
                    url: "http://localhost/Home/GetE/"
                    success: (rep) => {
                        console.log(rep);
                        if (rep != null) {
                         
                            for (var i = 0; i < len; i++) {
                                let dataItem = rep[i];                                var obj1 = {                                    name: dataItem.btcid
                                    value: [
                                        dataItem.btcid
                                        dataItem.cash
                                    ]
                                };
                                data1.push(obj1);
                             
                               
                                if (data1.length > 50) {
                                    data1.shift();
                                }
                            }
                            myChart.setOption(option);                        }
                    }
                    , error: (e) => {
                        console.log(JSON.stringify(e));
                    }
                });
            }, 1000);
        }    </script>
</body></html>

解决方案 »

  1.   

    在
    myChart.setOption(option);
    这里设断点
    看看里面的值是不是正确的
      

  2.   

    这个好像没办法调试，设置启动项目了，还是提示不能命中，我甚至加了script:
       $(function () {       
                refreshData();
            });请问要如何才能命中代码行调试啊？
      

  3.   

    这个好像没办法调试，设置启动项目了，还是提示不能命中，我甚至加了script:
       $(function () {       
                refreshData();
            });请问要如何才能命中代码行调试啊？你要在浏览器里设断点
    比如chrome
      

  4.   

    我做了断点，但是有错误eline:formatted:0:173 Uncaught TypeError: Cannot read property 'setOption' of null
    最新代码贴一下：
    @{
        ViewBag.Title = "eline";
    }
    <!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>首页</title>
        <script src="../js/mui.min.js"></script>
        <link href="../css/mui.min.css" rel="stylesheet" />
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script src="../js/echarts.min.js"></script>
        <script src="../js/vue.min.js"></script>
        <style>
            html,
            body {
                background-color: #efeff4;
            }        .title {
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
                padding-bottom: 51px;
            }
        </style>
    </head><body>
        <div class="mui-content">
            <div class="title" id="main" style="width: 100%;height: 600px;">        </div>
        </div>    <script src="../js/util.js"></script>    <script type="text/javascript"> 
            // 基于准备好的dom，初始化echarts实例
            var myChart = null;        let data1 = [];        var option = {
                title: {    //图表标题
                    text: 'E图表'
                },
                tooltip: {
                    trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中            },
                dataZoom: [
                    {
                        type: 'slider',    //支持鼠标滚轮缩放
                        start: 0,            //默认数据初始缩放范围为10%到90%
                        end: 100
                    },
                    {
                        type: 'inside',    //支持单独的滑动条缩放
                        start: 0,            //默认数据初始缩放范围为10%到90%
                        end: 100
                    }
                ],
                legend: {    //图表上方的类别显示
                    show: true,
                    data: ['btcid', 'cash']
                },
                color: [
                    '#FF3333',    //温度曲线颜色
                    '#53FF53',    //湿度曲线颜色            ],
                toolbox: {    //工具栏显示
                    show: true,
                    feature: {
                        saveAsImage: {}        //显示“另存为图片”工具
                    }
                },
                xAxis: {    //X轴
                    type: 'categoty',
                    data: []    //先设置数据值为空，后面用Ajax获取动态数据填入
                },
                yAxis: [    //Y轴（这里我设置了两个Y轴，左右各一个）
                    {
                        //第一个（左边）Y轴，yAxisIndex为0
                        type: 'value',
                        /* max: 120,
                        min: -40, */
                        axisLabel: {
                            formatter: '{value}'    //控制输出格式
                        }
                    }
                ],
                series: [    //系列（内容）列表
                    {
                        name: 'cash',
                        type: 'line',    //折线图表示（生成温度曲线）
                        symbol: 'emptyrect',    //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: data1        //数据值通过Ajax动态获取
                    },            ]
            };  $(function () {           
                    refreshData();
                });
        
            function refreshData() {
                setInterval(() => {                $.getJSON({
                        url: "http://localhost/Home/GetE",
                        success: (rep) => {
                            console.log(rep);
                            if (rep != null) {
     const len = rep.length;
                                for (var i = 0; i < len; i++) {
                                    let dataItem = rep[i];                                var obj1 =
                                    {                                    name: dataItem.btci,
                                        value: dataItem.cash
                                        
                                    };
                                    data1.push(obj1);
                                    if (data1.length > 50) {
                                        data1.shift();
                                    }
                                }                        }
                            myChart.setOption(option);
                        }
                        , error: (e) => {
                            console.log(JSON.stringify(e));
                        }
                    });
                }, 1000);
            }
        </script></body ></html >
    请指点一下
      

  5.   

    目前解决了以上问题，但是data1的数据一直在add,也就是说数据库只有3个数据，但是图表每次接着画数据。
    有没有办法让ECHART只画当前得到的数据，而不是无限接着画？
    比如说，数据库只有3个数组，我想让ECHART无论VUE怎么刷新，都只画3个点， 而不是无数个重复的 3个点。
    debug看了，data1下会不断添加数据库的3个数据，变成一堆数据  function refreshData() {
                setInterval(() => {                $.getJSON({
                        url: "http://localhost/Home/GetE",
                        success: (rep) => {
                            console.log(rep);
                            if (rep != null) {
     const len = rep.length;
                                for (var i = 0; i < len; i++) {
                                    let dataItem = rep[i];

    //Object.keys(data1).forEach(k => delete data1[k])
                                    var obj1 =
                                    {                                    name: dataItem.btcid,
                                        value: dataItem.cash
                                        
                                    };
                                    data1.push(obj1);
                                    if (data1.length > 50) {
                                        data1.shift();
                                    }
                                }                        }
                           myChart.setOption(option);                    }
                        , error: (e) => {
                            console.log(JSON.stringify(e));
                        }
                    });
                }, 10000);
            }
      

  6.   

    myChart.setOption(option, true);即可，这样不会合并之前的数据