echarts不出图

想要做echarts 130 关系依赖图来着,数据处理已经写好了,就是不出图

遇到的现象和发生背景,请写出第一个错误信息

一开始echarts.min.js找不到,更改地址后可以找到,但是在浏览器中变成

img

代码部分
<script type="text/javascript" src="js/jquery-1.10.2.min.js">script>
<script src="js/echarts.min.js">script>
<script type="text/javascript">
    $(function (){
        $.get("${pageContext.request.contextPath}/getnode.do",function (nodes){
            $.get("${pageContext.request.contextPath}/getlink.do",function (links){
                var myChart = echarts.init(document.getElementById('main'),null);
                var option = {
                    categories: [{name: "玄幻小说"}, {name: "科幻小说"}, {name: "都市小说"}, {name: "修真小说"}],
                    series:[{
                        type: "graph",
                        layout: 'force',//circular , force
                        symbolSize:60,
                        //可拖拽
                        draggable:true,
                        categories: [{name: "玄幻小说"}, {name: "科幻小说"}, {name: "都市小说"}, {name: "修真小说"}],
                        data:nodes,
                        links:links,
                        roam:true,
                        label: {
                        },
                        force: {
                            repulsion: 700 ,
                            edgeLength: 50
                        },
                        lineStyle: {
                            color: 'rgba(16,89,120,0.55)'
                        }
                    }]
                };
                myChart.setOption(option);
            },"json")
        },"json")

    })
script>

运行结果及详细报错内容

Uncaught ReferenceError: require is not defined at echarts.min.js:15
at echarts.min.js:15:16201
atecharts.min.js:1:140
atecharts.min.js:1:156
Uncaught TypeError: echarts.init is not a function at show.jsp:25
at Object.success (show.jsp:25:39)
at c (jquery-1.10.2.min.js:4:26036)
at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4:26840)
at k (jquery-1.10.2.min.js:6:14258)
at XMLHttpRequest.r (jquery-1.10.2.min.js:6:18646)

问题1require is not defined 【15行代码】
未定义require

尝试思路:
通过工具browserify或者是webpack把js文件编译一下,转成浏览器端可识别的。
//安装browserify ,我这里是全局安装
npm install -g browserify
// 编译
browserify ./source/module.js -o ./dist/dist.js
即可在dist目录下看到打包后的dist.js文件。 
browserify 后面的第一个参数表示要打包的前端程序的入口,-o或者>表示打包后的输出文件。browserify会根据入口文件中的require或者import(ES6,需要安装babel)自动完成依赖分析,并将依赖文件打包为一个单文件。
问题2:
echarts.init is not a function25行代码】
echarts.init不是函数

尝试思路:
到package.json中查看,如果ehcarts版本在5.0之上的
使用 import * as echarts from 'echarts'导入
或者用npm uninstall echarts先卸载echarts,安装旧版本
npm i echarts@4 --save

根据提供的代码,错误信息显示在了第 25 行,即 var myChart = echarts.init(document.getElementById('main'),null);,错误类型为 TypeError,错误信息为 echarts.init is not a function。

这个错误的意思是在执行 echarts.init 时发生了类型错误,原因是 echarts.init 不是一个函数。

为了解决这个问题,可以试试以下几种方法:

1、检查是否正确引用了 echarts 的 JavaScript 文件,尤其是在 HTML 中是否使用了正确的 script 标签,以及是否正确指定了 echarts 的路径。

2、检查是否在页面加载完成之后再执行了 echarts 的初始化代码。在 jQuery 的 $(function () { ... }) 或者 window.onload = function () { ... } 中执行 echarts 的初始化代码是比较保险的方法。

3、检查是否存在其他 JavaScript 代码中的错误,导致了 echarts 无法正常工作。可以试试使用浏览器的开发者工具查看控制台的错误信息,以及检查自己的代码是否符合语法规范。

4、如果还是无法解决问题,可以试试在 echarts 官网查看帮助文档
仅供参考,望采纳,谢谢。

报错信息中的:show.jsp:25--------在第5行

请采纳!!!!!

const echarts = require('echarts');
require('echarts-gl');
const KnowledgeOPs = echarts.init(document.getElementById('containerKG'));
这样写就不会报错了

确保你的本地路径有echarts的js文件才可以