echarts require or echarts undefined 问题

最新推荐文章于 2024-07-04 19:00:00 发布

__BMGT()

最新推荐文章于 2024-07-04 19:00:00 发布

阅读量8.1k

点赞数 1

分类专栏： Error Solution JavaScript Configuration

本文链接：https://blog.csdn.net/xiuye2015/article/details/80344737

版权

Error Solution 同时被 3 个专栏收录

140 篇文章 0 订阅

订阅专栏

JavaScript

85 篇文章 0 订阅

订阅专栏

Configuration

69 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Bootstrap Studying</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="styles/bootstrap.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="styles/bootstrap-theme.css" />



</head>

<body>


    

    <script src="scripts/jquery-3.3.1.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/echarts.js"></script>

    <div id="main" style="height:400px;width:500px"></div>

    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'scripts'//注意实际路径,相当于echarts对应于scripts路径!
            }
        });

        // 使用
        require(
            [
                'echarts',//引入的仍然是echarts,这下应该看出来了吧,
                        //相当于scripts文件夹的别名啊!alias
                        //或者相当于scripts路径下echarts.js文件引入!
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                var mainDiv = document.getElementById('main');
                mainDiv.height="500px";
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(mainDiv);

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: ['销量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            "name": "销量",
                            "type": "bar",
                            "data": [5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
                console.log("executed?");
                // 为echarts对象加载数据 
                myChart.setOption(option);
            }
        );
        console.log("end");
    </script>

</body>

</html>

var myChart = echarts.init(document.getElementById('main'));
        var option = {
            ...
        }
        myChart.setOption(option);

一个有require,一个直接echarts,而且有undefined错误,搞得迷糊了,明白以下就好了,

1.只引入"echarts.js" ----- require 传入 function(ec){...},ec就是echarts!但是没有直接echarts的定义!

2.只引入"echarts-all.js" ----- echarts直接使用!但是没有require定义!

使用require时,配置路径必须的吧:require.config({paths:{echarts:"your echarts path,is a folder which not a file"}});

__BMGT()

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录