Echarts 开发图表两种方式实现异步数据加载

最新推荐文章于 2024-06-08 06:52:44 发布

Nick Peng

最新推荐文章于 2024-06-08 06:52:44 发布

阅读量3.9k

点赞数 5

分类专栏： Echarts 文章标签： Echarts异步加载数据数据可视化

本文链接：https://blog.csdn.net/PY0312/article/details/104489237

版权

Echarts 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

一、异步加载数据方法一
二、异步加载数据方法二 - 推荐

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

一、异步加载数据方法一

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行；
附1：jQuery API 中文文档
附2： 前端公共 CDN 在线 JS 库

本地 JSON 数据如下：

{
    "type_list":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    "num_list":[5, 20, 36, 10, 10, 20]
}

代码 6 步实现及解析如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载数据</title>
    <!-- 1. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 2. 引入jQuery.js文件，此处引用的cdn在线js库 -->
    <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js"></script>
    <!-- 3. 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function() {
            // 4. 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 5. 异步加载，方法一：
            $.get('data/data.json').done(function(data) {
                console.log(data)
                // 6. 指定配置项展示图表
                myChart.setOption({
                    title: {
                        text: 'ECharts异步加载数据示例' // 图表标题
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']       // 图例
                    },
                    xAxis: {
                        data: data.type_list     // x轴数据
                    },
                    yAxis: {},              // y轴默认自动
                    series: [{
                        // 柱状图
                        type: 'bar',
                        data: data.num_list,
                        // 显示标签数量
                        label: {
                            normal: {
                                show: true,
                                position: 'top'     // 显示位置
                            }
                        },
                        //配置样式
                        itemStyle: {
                            //通常情况下样式
                            normal:{
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = ['#8dc63f','#add8e6','#ffb6c1','#f37b1d','#A6A6D2','#F0E68C','#CA8EC2'];
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时，显示强调效果
                            emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                    }],
                });
            })
        })
    </script>
</body>
</html>

二、异步加载数据方法二 - 推荐

预先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据；
推荐使用此方法，用户体验感更好！
示例图：
注意： ECharts 中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。

代码 6 步实现及解析如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载数据</title>
    <!-- 1. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 2. 引入jQuery.js文件 -->
    <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js"></script>
    <!-- 3. 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function() {
            // 4. 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 异步加载，方法二：
            // 5. 指定配置项 和 空的坐标轴
            myChart.setOption({
                title: {
                    text: 'ECharts异步加载数据示例' // 图表标题
                },
                tooltip: {},
                legend: {
                    data:['销量']       // 图例
                },
                xAxis: {
                    data: []			// 空数据
                },
                yAxis: {},              // y轴默认自动
                series: [{
                    // 柱状图
                    type: 'bar',
                    data: [],			// 空数据
                    // 显示标签数量
                    label: {
                        normal: {
                            show: true,
                            position: 'top'     // 显示位置
                        }
                    },
                    // 配置样式
                    itemStyle: {
                        //通常情况下样式
                        normal:{
                            // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params){
                                var colorList = ['#8dc63f','#add8e6','#ffb6c1','#f37b1d','#A6A6D2','#F0E68C','#CA8EC2'];
                                return colorList[params.dataIndex];
                            }
                        },
                        // 鼠标悬停时，显示强调效果
                        emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }],
            });

            // 6. 异步加载数据
            $.get('data/data.json').done(function(data){
                // 填入数据到上面空模板
                myChart.setOption({
                    xAxis: {
                        data: data.type_list
                    },
                    series: [{
                        // 注意：！！！根据名字对应到相应的系列
                        name: '销量',
                        data: data.num_list
                    }]
                })
            })
        })
    </script>
</body>
</html>

Nick Peng

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
Echarts 开发图表两种方式实现异步数据加载

文章目录一、异步加载数据方法一二、异步加载数据方法二 - 推荐好文章记得收藏+点赞+关注额！！！---- Nick.Peng一、异步加载数据方法一ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行；代码 6 步实现及解析如下：<!DOCTYPE htm...
复制链接

扫一扫