echarts异步数据的加载与动态更新

比眉伴天荒 2023-09-29 16:16 25阅读 0赞

### 方法一 ###

var myChart = echarts.init(document.getElementById('main'));
    
    $.get('data.json').done(function(data) {
        
      // data 的结构:
      // {
        
      //     categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
      //     values: [5, 20, 36, 10, 10, 20]
      // }
      myChart.setOption({
        
        title: {
        
          text: '异步数据加载示例'
        },
        tooltip: {
        },
        legend: {
        },
        xAxis: {
        
          data: data.categories
        },
        yAxis: {
        },
        series: [
          {
        
            name: '销量',
            type: 'bar',
            data: data.values
          }
        ]
      });
    });

### 方法二 ###

**先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。**

var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        
      title: {
        
        text: '异步数据加载示例'
      },
      tooltip: {
        },
      legend: {
        
        data: ['销量']
      },
      xAxis: {
        
        data: []
      },
      yAxis: {
        },
      series: [
        {
        
          name: '销量',
          type: 'bar',
          data: []
        }
      ]
    });
    
    // 异步加载数据
    $.get('data.json').done(function(data) {
        
      // 填入数据
      myChart.setOption({
        
        xAxis: {
        
          data: data.categories
        },
        series: [
          {
        
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
          }
        ]
      });
    });

### \---->效果 ###

![在这里插入图片描述][e9155f4daad34ba3b609c60318d1ae93.png]

[e9155f4daad34ba3b609c60318d1ae93.png]: https://img-blog.csdnimg.cn/e9155f4daad34ba3b609c60318d1ae93.png

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts异步使用ajax 加载数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

痛定思痛。/ 2024年04月17日 06:26/ 0 赞/ 88 阅读

相关 echarts异步数据的加载与动态更新

方法一 var myChart = echarts.init(document.getElementById('main')); $.get('

比眉伴天荒/ 2023年09月29日 16:16/ 0 赞/ 26 阅读

相关 ECharts异步加载数据

前言现在做报表的工具和产品很多。之前用过美林数据的 ‘Tempo BI’，一款需要付费的产品，功能还是很强大的。最近，朋友需要做一个简单的报表Demo，想让我帮忙实现。

痛定思痛。/ 2023年06月16日 14:58/ 0 赞/ 130 阅读

相关 vue中引入Echarts异步加载数据更新图表

对于这个问题，刚开始觉得比较简单，但是无法渲染图表后来才发现，我用ajax异步加载数据，当图表渲染的时候，数据还没有拿到，这样没有数据，自然不能渲染图表。找到了一个

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 09:44/ 0 赞/ 326 阅读

相关 echarts异步加载

法1：加载完数据后，设置图表样式。 var myChart = echarts.init(document.getElementById('main'));

青旅半醒/ 2022年05月26日 01:43/ 0 赞/ 224 阅读

相关 django echarts饼图数据动态加载

后台关键代码： data = {} keys与values分别为该数据的键数组，值的数组。这里循环为字典添加对应键值 for k, v in z

朴灿烈づ我的快乐病毒、/ 2022年05月15日 22:49/ 0 赞/ 343 阅读

相关 echarts动态加载数据无法更新series 无法更新图表

最近遇到一个Echarts图表无法动态更新数据的问题最初我在option中设置series的值为一个数组，想着通过修改数组来动态更新图表，但是没变化，后来发觉

Dear 丶/ 2022年05月15日 10:22/ 0 赞/ 949 阅读

相关 Echarts 图表数据通过 Ajax 动态加载

一、介绍 Echarts 配合使用 Ajax 进行数据的动态加载，主要解决了加载一次页面只能加载一次图表的问题，其次在动态加载时衔接合理。二、HTML代码

╰+哭是因爲堅強的太久メ/ 2022年03月26日 06:55/ 0 赞/ 678 阅读

相关 Echarts通过Ajax实现动态数据加载

Echarts通过Ajax实现动态数据加载用jquery的ajax来异步加载echarts图表数据，下面已一个简单的饼状图为例： ------------------

忘是亡心i/ 2022年02月14日 08:35/ 0 赞/ 318 阅读

相关 jqgrid——treegrid动态异步加载数据

jqgrid的treegrid插件，有两种数据结构：第一种：可以实现动态加载数据 1. \{ 2. "total":11, 3. "page

悠悠/ 2021年06月24日 13:59/ 0 赞/ 549 阅读