echarts异步加载

青旅半醒 2022-05-26 01:43 223阅读 0赞

法1：加载完数据后，设置图表样式。
    var myChart = echarts.init(document.getElementById('main'));
    
    $.get('data.json').done(function (data) {
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    });
    
    法二：先设置其他样式，后再获取数据后填入
    
    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
            }]
        });
    });

发表评论取消回复

表情：

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

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

相关阅读

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

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

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

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

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

相关 ECharts异步加载数据

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

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

相关 treegrid 异步加载

<%@ Page Language="C" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits=

Love The Way You Lie/ 2022年08月27日 15:47/ 0 赞/ 221 阅读

相关异步加载和延迟加载

1.异步加载的方案：动态插入script标签 2.通过ajax去获取js代码，然后通过eval执行 3.script标签上添加defer或者async

淩亂°似流年/ 2022年07月15日 09:40/ 0 赞/ 458 阅读

相关同步加载与异步加载

这几天一直在忙项目上线的问题，碰到了好多问题,比如异步加载、事件冒泡、浏览器缓存。这篇文章主要是文件的同步加载和异步加载。先说下我碰到的问题：项目要接入到支付宝城市服务中，

系统管理员/ 2022年07月14日 12:14/ 0 赞/ 306 阅读

相关 JS异步加载

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载，用到再加载，

Myth丶恋晨/ 2022年06月17日 07:49/ 0 赞/ 410 阅读

相关 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 阅读

相关 Java Echarts 实用小例子(Ajax异步加载)

实际echarts中，数据都是从数据库中动态获取过来。所以这里来简单演示一下echarts怎么通过ajax异步获取数据库中的数据在页面上进行动态展示。下面只是功能代码展示，具体

蔚落/ 2022年01月27日 09:45/ 0 赞/ 434 阅读