有人会 echarts 吗?

本贴最后更新于 2133 天前,其中的信息可能已经事过境迁

前几天看教程,从本地动态获取数值可以出图,但是如下我得代码读取不了本地文件,我不会 jquery,简单了解 js。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts学习</title> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="./echarts.min.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['test'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: 'test', type: 'bar', data: [] }] }); // 异步加载数据 $.get('data/data.json').done(function (data){ // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: 'test', data: data.data }] }); }); </script> </body> </html>

data 文件内容:

{ "categories":["你好","测试","不行"], "data":[56,78,34] }

这段代码读取 data 文件内容不能出图。
image.png

echarts 官网实例

  • ECharts
    20 引用 • 20 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10093 引用 • 45837 回帖 • 66 关注

相关帖子

被采纳的回答

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Lee981265

    获取数据的回调里面初始化 echarts

    1 回复
  • image.png
    这么写?但是……

  • a15572875965

    你的源码报错内容,没给类型
    image.png
    加上类型就好了
    image.png

    image.png

    1 回复
  • alanfans

    组装好数据,load 一下

  • 你的那个怎么写的?我加上类型和 Y 轴空坐标也不行,能贴一下代码吗?
    image.png

    1 回复
  • a15572875965
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts学习</title> <script src="js/jquery-1.7.1.js"></script> <script src="js/echarts.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); // 异步加载数据 $.get('data/data.json').done(function (data) { // 填入数据 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['test'] }, xAxis: { data: data.categories }, yAxis: {}, series: [{ name: 'test', type: 'bar', data: data.data }] }); }); </script> </body> </html>
    1 回复
  • 感谢……
    但是这两个文件我跟你的是不是不一样,jquery 文件和 echarts 文件能发我一份看看嘛?😭

    1 回复
  • HanZhaoYoung 1 赞同 via macOS

    这个东西跟 echarts jquery 版本没啥关系。。。 老哥们也别只给个答案呀,因为 js 是单线程,你获取数据是异步操作,所以 echarts 的 setOption 要放在回调里。
    你以后不用 echarts 的时候若不知道这个小原理还是会遇到同样的问题的

    1 回复
  • alanfans

    cv 大法

  • 感谢 这次是着急才问的 我会补一下这些知识 平常涉及到的这块不太多 😄

请输入回帖内容 ...
cuijianzhe
6 号黑客成员, 2000-03-03 23:22:13 加入 北京

推荐标签 标签

  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 246 回帖
  • gRpc
    11 引用 • 9 回帖 • 100 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 726 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 679 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    82 引用 • 412 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    172 引用 • 1538 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 104 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 56 关注
  • 996
    13 引用 • 200 回帖 • 1 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 8 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 443 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 112 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 1 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 661 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • Anytype
    3 引用 • 31 回帖 • 27 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    591 引用 • 3528 回帖