头痛了很久的Echarts绘图不显示问题终于解决了

代码的女朋友

已于 2022-04-17 11:43:24 修改

阅读量3.1w

点赞数 16

文章标签： echarts python

于 2022-04-17 11:42:26 首次发布

本文链接：https://blog.csdn.net/thzhaopan/article/details/124226989

版权

最近我在做一个小项目，需要绘制一个折线图。说干就干，我在echarts官网上找到折线图绘制的代码，放到了自己建的html文件中，环境以及需要的js文件也都准备好了，正当我满怀期待的希望看到折线图时，界面上竟然只显示了一个有底色的div框，于是刚接触前端可视化的我陷入了沉思，并开始尝试各种能想到的办法......还好最后问题解决啦！现将代码和效果图贴上。

一开始的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>

</head>
<body>
    <div class="t_container">

        <div id="chart_11" class="echart" style="width: 600px; height: 400px; position: absolute; top: 100px; left: 550px; background-color: #60A2D7"></div>
    
    </div>

     <script>
    $(function () {
    echart_11();

    function echart_11() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_11'));
        var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
        option = {
            xAxis:{
                type:'category',
                data:xDataArr
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    type:'line',
                    data:yDataArr
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

</script>

</body>

</html>

效果图：

经过一番折腾，尝试了各种方法之后，这个问题终于得以解决

正确的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>
     <script>

    function echart_11() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_11'));
        var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
        option = {
            xAxis:{
                type:'category',
                data:xDataArr
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    type:'line',
                    data:yDataArr
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

</script>
</head>
<body>
    <div class="t_container">

        <div id="chart_11" class="echart" style="width: 600px; height: 400px; position: absolute; top: 100px; left: 550px; background-color: #60A2D7"></div>
        <script>
            echart_11();
        </script>
    </div>



</body>

</html>

我想要的显示效果：