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

文章目录

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

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

---- Nick.Peng

一、异步加载数据 方法一

  • ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行;

  • 附1:jQuery API 中文文档

  • 附2: 前端公共 CDN 在线 JS 库

  • 本地 JSON 数据如下:

    {
        "type_list":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        "num_list":[5, 20, 36, 10, 10, 20]
    }
    
  • 代码 6 步实现及解析如下:

    
    <html>
    <head>
        <meta charset="utf-8">
        <title>异步加载数据title>
        
        <div id="main" style="width: 600px;height:400px;">div>
        
        <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js">script>
        
        <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 开发图表 两种方式实现异步数据加载_第1张图片

  • 注意: ECharts 中在更新数据的时候需要通过name属性对应到相应的系列,上面示例中如果name不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的name数据。

  • 代码 6 步实现及解析如下:

    
    <html>
    <head>
        <meta charset="utf-8">
        <title>异步加载数据title>
        
        <div id="main" style="width: 600px;height:400px;">div>
        
        <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js">script>
        
        <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>
    

你可能感兴趣的:(Echarts,Echarts异步加载数据,数据可视化)