ECharts实例开发学习笔记一

最新推荐文章于 2024-08-23 09:26:10 发布

Qing_yun

最新推荐文章于 2024-08-23 09:26:10 发布

阅读量6.9k

点赞数

分类专栏： Echarts 文章标签： js图表库 ECharts

本文链接：https://blog.csdn.net/Qing_yun/article/details/48023903

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文基于ECharts官方入门demo，探讨如何进行动态数据加载。通过jQuery的getJSON方法，展示了从本地文件或API接口获取JSON数据并更新图表的流程，帮助JS初学者理解数据驱动的图表更新。

摘要由CSDN通过智能技术生成

由于这段时间比较忙，所以隔了这么久，才开始真正的ECharts实例学习，首先，官网参考手册里给出了一个入门的demo，即”5分钟上手写ECharts的第一个图表“，就从它开始吧，另外发现ECharts出了配置项查找工具，这查找API就简单方便多了，废话不多说了，直接上代码。

<span style="font-size:14px;"><!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body></span>

上面这个官方手册demo的原始代码，也就这个代码是完整的，而给的其它案例都只是给出了option模块，虽然很多时候直接套换即可，但是有些示例还是有些细微的差别，并不是直接套换就可以的，另外在其给出的示例数据也是直接写死，并没有给出动态的数据加载说明，这对于js的初学者来说可能还不知如何去加载大量的自有数据，下面就以上面的demo为基础介绍如何添加动态添加本地文件或其它接口数据。

在配置ECharts时，我采用的是其推荐的模块化单文件引入，这种引入方法简便，至于其它的几种可参考其官网手册说明。上面的demo引入直接采用CDN地址，即百度提供在线的加载，如果不想自己下载ECharts库，则可直接采用上面的CDN方法，本地引入ECharts库，如下所示：

CDN：

<span style="font-size:14px;"><!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });</span>

本地引入：

<span style="font-size:14px;"><!--    本地引入ECharts,'js/dist/'本地文件路径下 -->
    <script src="js/dist/echarts.js"></script>
    <script type="text/javascript">
//        路径配置,'./js/dist'本地文件路径
        require.config({
            paths: {
                echarts:'./js/dist'
            }
        });
</script></span>

下面给出一个动态加载本地数据文件的示例。

data.txt，数据为json格式，如下所示。

<span style="font-size:14px;">[{"NAME":"衬衫","VAL":"53"},{"NAME":"羊毛衫","VAL":"20"},{"NAME":"雪纺衫","VAL":"33"},{"NAME":"裤子","VAL":"43"},{"NAME":"高跟鞋","VAL":"28"},{"NAME":"袜子","VAL":"29"}]</span>

读入以上数据并在ECharts中显示

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Test</title>
    <style>
        body{background-color:#000000}
    </style>
</head>
<body>
<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts:'http://echarts.baidu.com/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));

                $.getJSON("data.txt", function(json) {
                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['销量']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : (function(){
                                    var data=[];
                                    for(var i=0;i<json.length;i++){
                                        data.push(json[i].NAME);
                                    }
                                    return data;
                                })()
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                "name":"销量",
                                "type":"bar",
                                "data": (function(){
                                    var data=[];
                                    for(var i=0;i<json.length;i++){
                                        data.push(json[i].VAL);
                                    }
                                    return data;
                                })()
                            }
                        ]
                    };

                    myChart.setOption(option);
                });
            }
    );
</script>



</body>
</html></span>

同官网示例相似，只是为了展示如何从其它地方动态加载数据显示，代码里用到了jQuery方法 $.getJSON("data.txt", function(json)，此是从其它地方获取json格式的数据，同样适用于其它API请求的json数据，只需换成相应的路径即可，如 $.getJSON("data.php", function(json)，则为请求php页面的json数据，更多详细介绍可参考jQuery文档或者Ajax请求方法介绍。