JYL779 2023-03-28 10:22 采纳率: 100%
浏览 4
已结题

echarts中怎么异步

各位铁铁们 我哪里有问题啊 数据一直到不了页面上
这个是json

img


这个是div

img


这个是js

img


这个是结果

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-03-28 13:15
    关注
    • 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：echarts地图引入json或者js
    • 除此之外, 这篇博客: 零基础echarts热力图学习笔记中的 json文件与js文件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    • 上文中我推荐的那位博主为了方便新手入门，使用的是js文件。但事实上我觉得json文件的使用更加广泛。这两种文件具体定义之类的我在这里不献丑解释了，各位有兴趣了解的话自行百度。我只说一下使用上的区别。
      本质上来讲，这两种文件最后呈现效果是一样的。但是你改写成txt文件打开就会发现，二者格式根本上有区别。下面是美国的js文件和json文件的对比：
      USA js文件：

      (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('world', {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama"},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],//以下经纬度信息省略

      USA json文件

      {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama"},"geometry":{"type":"Polygon","coordinates":
[[[-87.359296,35.00118],[-85.606675,34.984749],

      可看出，js文件格式比json复杂的多。对于不懂这门语言的人来说，自定义的js文件也更加困难。特别提醒各位，json文件的编号位数需要保持一致。
      下面介绍一下在echarts下使用的区别。

      js文件使用格式：

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>



    <script src="echarts.min.js"></script>
    <script src="world.js"></script>
               //由此可见载入js文件即可使用


</head>
<body>
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
});
</script>
</body>
</html> 
//接着导入官网的option示例，不再赘述

      *json文件使用格式：

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
<div id="map-wrap" style="width:250;height:250pt;font-size:9pt;"> 
</div>
</body>


<script src="jquery-3.3.1.min.js"></script>
<script src="echarts.min.js"></script>
//注意这两个声明的先后位置不能倒置，否则会报错


<script type="text/javascript">
var myChart = echarts.init(document.getElementById('map-wrap'));
$.get('finalall(3).json', function (geoJson) {
  echarts.registerMap('ohio', geoJson); // 注册地图
   myChart.setOption(option = {//下面加入官网的示例，不再赘述

      同时注意，json文件在使用时需和jquery脚本（网上很容易找到下载资源）一起。注意路径。附上一个自定义json区域的网站：http://geojson.io/#map=5/28.536/21.907
      采用官方实例：https://echarts.baidu.com/examples/editor.html?c=map-HK
      或者 https://echarts.baidu.com/examples/editor.html?c=map-usa

      随后我将整理一下收集到的中国、美国各省市/州县的json文件及使用实例，一并上传。
      感谢阅读，欢迎交流讨论！

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 4月5日
  • 已采纳回答 3月28日
  • 创建了问题 3月28日

悬赏问题

  • ¥15 C++ yoloV5改写遇到的问题
  • ¥20 win11修改中文用户名路径
  • ¥15 win2012磁盘空间不足,c盘正常，d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开，官网首页进不去，显示无法访问此页面，求解决方法
  • ¥15 关于smbclient 库的使用
  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？