***ECharts图表入门和最佳实践

2022-10-05 08:40:00

ECharts数据图表系统？ 5分钟上手！

【ECharts简介】

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

好了，咱们重点不是介绍哈，后面我会详细讲解这个报表系统的使用，这里就不做过多的描述了，下面开始进入正题：“5分钟上手写ECharts的第一个图表”。

【方法一：模块化单文件引入(推荐)】

1. 新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

</body>

2. 新建<script>标签引入模块化单文件echarts.js：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

</body>

3. 新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</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'

            }

        });

    </script>

</body>

4. <script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</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>

5. 浏览器中打开ecarts.html，就可以看到以下效果：

【方法二：标签式单文件引入】

1. 新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

</body>

2. 新建<script>标签引入echart-all.js。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

</body>

3. 新建<script>，使用全局变量echarts初始化图表并驱动图表的生成。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts图表

        var myChart = echarts.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>

4. 浏览器中打开echarts.html，可以看到如下效果：

via: http://www.cnblogs.com/LonelyShadow/p/4175071.html

ECharts简介

http://www.phperz.com/article/14/1017/29557.html

Echarts 首页：http://echarts.baidu.com/index.html

特性：http://echarts.baidu.com/doc/feature.html

ECharts 底层依赖于 Html5 的轻量级的Canvas类库ZRender ，这也是它的效果这么绚丽的原因。它与 js charts类似，不依赖其他 js 类库，相比之下 Highcharts还要依赖JQuery等类库。不过，ECharts也不是什么缺点都没有的，在线演示平台、文档，

初学者可能会被ECharts那个带你入门的那2个示例弄晕，这里来一个个解释：

1、AMD规范的加载器——esl.js，这是什么？

简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器“假死”。

2、我们先来看一下echart的大概的包：　

echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

看得出，这种分类非常有意义。

3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。

关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？

答：AMD规范的加载器——esl.js的公共方法。（如有错误，请指正。）

4、require.config的作用是什么？

答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。

5、解释一下require方法？

答：require方法有2个参数。

第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！

第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。

OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种——标签式单文件引入和模块化单文件引入）

因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。

6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：

（1）、标签式单文件引入.html

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="js/echarts.js"></script>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts图表

        var myChart = echarts.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>

（2）、模块化包引入.html，这个就需要用到2个src文件。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!--从当前页面，引入模块加载器esl.js-->

    <script src="js/esl.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <script type="text/javascript">

        // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径

        require.config({

            packages: [

                {

                    name: 'echarts',

                    location: 'js/src',

                    main: 'echarts'

                },

                {

                    name: 'zrender',

                    location: 'js/zrender/src',

                    main: 'zrender'

                }

            ]

        });

        // 使用

        require(

            [

            ],

            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>

（3）、模块化单文件引入.html

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!--从当前页面，引入模块加载器esl.js-->

    <script src="js/esl.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <script type="text/javascript">

        // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径

        require.config({

            paths:{

                'echarts' : './js/echarts',

                'echarts/chart/bar' : './js/echarts'

            }

        });

        // 使用

        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>

2、如果上面的还有不明白的，参考一下我的本地目录：

aaarticlea/png;base64,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" alt="" />

js中有如下的文件：

aaarticlea/png;base64,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" alt="" />

其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹。

码农公寓

ECharts数据图表系统？ 5分钟上手！

【ECharts简介】

【方法一：模块化单文件引入(推荐)】

【方法二：标签式单文件引入】

ECharts简介

1、AMD规范的加载器——esl.js，这是什么？

2、我们先来看一下echart的大概的包：

3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。

4、require.config的作用是什么？

5、解释一下require方法？

6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：

相关文章

2、我们先来看一下echart的大概的包：　