ajax异步加载获取数据与Echarts渲染图表的两种解决方案

简介: ajax异步加载获取数据与Echarts渲染图表的两种解决方案

ajax获取API接口数据,然后在Echarts中进行数据传递渲染,是最常见的方式,也是实现客户端轮询图表刷新的必用方式。在开发过程中,不同的需求对ajax的使用也有不同的方式。

引入外部JS包

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!--Echarts核心库-->
    <script type="text/javascript" charset="utf-8" src="js/echarts.min.js"></script>


HTML代码

<div class="container">
    <div class="weather-side">
        <div class="weather-gradient" id="main"></div>
    </div>
</div>


正常Echarts图表

    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });


通过ajax获取数据实现图表的渲染

数据文件data.json

{
  "err": "0",
  "res": "OK",
  "data": [
    {
      "name": "Mon",
      "data": "120"
    },
    {
      "name": "Tue",
      "data": "200"
    },
    {
      "name": "Wed",
      "data": "150"
    },
    {
      "name": "Thu",
      "data": "80"
    },
    {
      "name": "Fri",
      "data": "80"
    },
    {
      "name": "Sat",
      "data": "110"
    },
    {
      "name": "Sun",
      "data": "130"
    }
  ]
}


1.封装函数,ajax内部调用;

应用场景

  1. 适合相同图表的不同场合或多次调用,封装成公共函数,减少代码冗余;
  2. 传递参数,按照不同的使用需求设置多个。比如:必须的data和X轴名称外,可以设置容器的id、柱图的颜色等等;


实践代码

    //获取JSON数据;
    $.getJSON("data/data.json", function (res) {
        var dataList = [], dataName = [];
        for (var i = 0; i < res.data.length; i++) {
            dataName.push(res.data[i].name);
            dataList.push({value: res.data[i].data}
            );
        }
        //console.log(dataName);
        //渲染图表;
        getLine(dataName, dataList)
    })
    function getLine(dataName, dataList) {
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            xAxis: {
                type: 'category',
                data: dataName
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                data: dataList,
                type: 'bar',
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

2.Echarts内部调用ajax;

实践代码

 var myChart = echarts.init(document.getElementById("main"));
    var option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };
    myChart.setOption(option);
    //获取JSON数据;
    $.getJSON("data/data.json", function (res) {
        var dataList = [], dataName = [];
        for (var i = 0; i < res.data.length; i++) {
            dataName.push(res.data[i].name);
            dataList.push({value: res.data[i].data}
            );
        }
        //传递数据;
        myChart.setOption({
            xAxis: {
                data: dataName
            },
            series: [{
                data: dataList
            }]
        });
    })
    window.addEventListener("resize", function () {
        myChart.resize();
    });


其他说明

ajax异步加载返回值作用域的问题

    //获取JSON数据;
    var dataList = [], dataName = [];
    $.getJSON("data/data.json", function (res) {
        for (var i = 0; i < res.data.length; i++) {
            dataName.push(res.data[i].name);
            dataList.push({value: res.data[i].data}
            );
        }
        console.log(dataName);//正常显示;
    })
    console.log(dataName);//显示为空,不能将ajax的数值传递至作用域外。


不推荐的同步加载方式

《ajax获取success返回值的解决方案》,https://blog.csdn.net/weixin_41290949/article/details/104281027

Done!

相关文章
|
4月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
466 1
|
9月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
196 2
|
9月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
278 0
|
9月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
231 0
|
5月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
246 23
echarts地图数据信息流向图效果
|
4月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
458 2
|
4月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
1005 0
|
6月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
6月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
8月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
182 3
ECharts综合案例一:近七天跑步数据