Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法

前言

  最近需要做一个大屏展示，需要用原生 html5+css+js 来写，所以去学了一下 echarts 的使用。在使用的过程中难免碰到许多 BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。

一、Echarts 使用本地 JSON 文件加载不出图形的解决方法

  我们在使用 echarts 绘制图表的时候，不可能是将数据写死在代码中的，没有后台的情况下一般是将数据封装在 JSON 中，代码中读取 JSON 文件 来获取数据。

  我使用的是 jquery 的getJSON函数来读取本地 json 文件，示例代码如下：

script src="../js/jquery-3.6.4.min.js">/script>
script>
	$.getJSON('../json/test/test.json',function (data) {
	        console.log(data)
	    })
/script>

  数据是能正常获取到的：

  我们这时候把数据丢进 echarts 中，发现图表显示不出来，但是如果我们把数据写在一个 JS 变量中，图表就能正常显示了，此处不做演示了。

  原因就是 jquery 加载本地 json 文件时是异步加载的，我们需要把 echarts 的代码放在回调函数中，才能正常加载图表，代码如下：

var myChart = echarts.init(document.querySelector('.pie .chart'));

    
    $.getJSON('../json/ 阳朔县 / 阳朔县碳储量.json', function (data) {
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} 
{b} : {c} ({d}%)'
            },
            legend: {
                
                bottom: '0%',
                
                itemWidth: 10,
                itemHeight: 10,
                
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    color: ['#5EA6FE', '#45FBF7', '#48FF58', '#EAE809', '#FF7E3F', '#FF4746', '#E177F9', '#4E6BFF', '#ffffff'],
                    name: data.name,
                    type: 'pie',
                    
                    center: ["50%", "34%"],
                    
                    radius: ['35%', '50%'],
                    
                    label: {
                        color: '#fff',
                        fontSize: 12,
                    },
                    
                    
                    labelLine: {
                        show: true,
                    },
                    data: data.data
                }
            ]
        };
        myChart.setOption(option);
    });

    
    window.addEventListener("resize", function () {
        myChart.resize();
    });

  此时就能正常显示图表了

二、Jquery 访问本地 JSON 文件跨域的解决方法

2.1 用 webstorm

  我们可以去下载一个 webstorm，直接用该软件的快捷方式打开 html 文件，也不会报跨域问题：

2.2 其他

  比如用 vscode、hbuilder、修改浏览器配置等等，网上都能找得到对应的办法，这里不做详细说明。这类解决方法的缺点就是，开发人员能访问了，但是用户访问不了，总不能让用户去下载这几个开发软件吧？所以这类办法只能解决开发端的跨域问题，下面介绍几个通用解决方案。

2.3 用 script 标签解决

  这里首先给出第一种方法，可以直接去看这位大佬的文章：https://blog.csdn.net/AiHuanhuan110/article/details/89475333?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-89475333-blog-122899037.235^v35^pc_relevant_increate_t0_download_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3-89475333-blog-122899037.235^v35^pc_relevant_increate_t0_download_v2&utm_relevant_index=6

  这里提个醒，用这种方法的话，json 格式会报错，但是不会影响代码正常运行，用就完事了！！

  还有就是因为是用 script 标签的缘故，所以代码只能写在 html 中，想写在 js 文件中是不行的。

2.4 将 json 文件放在 tomcat 中

  首先到 tomcat 官网下载 tomcat 并解压：

  得到一个文件夹：

  我们新建一个站点，打开 webapps 目录，将 ROOT 复制一份，命名随意，我这里就起 test 吧，如图：

  将里面的文件除了 WEB-INF 之外，全部删除，只留下WEB-INF，如图：

  我们对文件夹中的 web.xml 进行配置，将下面的语句加到文件中：

filter>
  filter-name>CorsFilterfilter-name>
  filter-class>org.apache.catalina.filters.CorsFilterfilter-class>
  init-param>
    param-name>cors.allowed.originsparam-name>
    param-value>*param-value>
  init-param>
  init-param>
    param-name>cors.allowed.methodsparam-name>
    param-value>GET,POST,HEAD,OPTIONS,PUTparam-value>
  init-param>
  init-param>
    param-name>cors.allowed.headersparam-name>
    param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headersparam-value>
  init-param>
  init-param>
    param-name>cors.exposed.headersparam-name>
    param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentialsparam-value>
  init-param>
  init-param>
    param-name>cors.preflight.maxageparam-name>
    param-value>1000param-value>
  init-param>
filter>
filter-mapping>
  filter-name>CorsFilterfilter-name>
  url-pattern>/*url-pattern>
filter-mapping>

  如图，反正就是丢在 web-app 里面，格式我就不调了：

  跨域配置好之后，我们直接把 json 文件丢在新建的站点文件夹中，如图：

  双击 bin 中的 startup.bat 启动服务器，访问默认端口 8080 即可访问到服务器，后面加上站点文件夹名称即可访问到站点文件夹，根据自己的目录结构来访问具体的 json 文件，如果在本机上就是localhost:8080/test/json/xxx.json

（注意：电脑上需要有 java 环境并且配置了环境变量才能启动 tomcat，否则会闪退，具体操作自行百度）

  如果是在服务器上，就把 localhost 换成服务器的IP 地址，想修改端口的话，就在 conf 目录下的 server.xml 中修改，修改之后需要重新启动：

  把 jquery 中的 json 文件地址换成服务器中的地址即可解决跨域问题！！！

  不用 tomcat，用其他的服务器比如 nginx、apache 也行，看自己的需要自己选择！！