ECharts快速入门教程

待我称王封你为后i 2023-10-12 09:23 39阅读 0赞

> Apache ECharts（incubating）是一款由百度开源的基于JavaScript的开源可视化图表库。它提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、雷达图、热力图等，并支持动态数据、数据区间选择、数据缩放等交互功能。同时，Apache ECharts还提供了多种主题、动画效果、导出图片等功能，方便用户在不同场景下定制自己的图表。Apache ECharts支持多种数据源，包括JSON、CSV、XML等，同时也提供了API接口、事件监听等高级功能，方便用户进行二次开发和定制。Apache ECharts已经被广泛应用于数据可视化、BI报表、大屏展示等领域，成为了一款强大的数据可视化工具。

## ![0e31ff7845934da6836b16f7c9d46c13.png][] ##

**目录**

一、官网地址

二、入门案例

三、效果预览

四、异步数据的加载与动态更新

--------------------

## 一、官网地址 ##

> 官网地址：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]
> 
> 在线文档：[快速上手 - Handbook - Apache ECharts][- Handbook - Apache ECharts]

## 二、入门案例 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ECharts快速入门教程</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    </head>
    
    <body>
        <div id="main" style="width: 100%;height:400px;margin-top: 10%;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    data: [
                        'Direct',
                        'Marketing',
                        'Search Engine',
                        'Email',
                        'Union Ads',
                        'Video Ads',
                        'Baidu',
                        'Google',
                        'Bing',
                        'Others'
                    ]
                },
                series: [{
                        name: 'Access From',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                            position: 'inner',
                            fontSize: 14
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                                value: 1548,
                                name: 'Search Engine'
                            },
                            {
                                value: 775,
                                name: 'Direct'
                            },
                            {
                                value: 679,
                                name: 'Marketing',
                                selected: true
                            }
                        ]
                    },
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                            length: 30
                        },
                        label: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#F6F8FC',
                            borderColor: '#8C8D8E',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                        data: [{
                                value: 1048,
                                name: 'Baidu'
                            },
                            {
                                value: 335,
                                name: 'Direct'
                            },
                            {
                                value: 310,
                                name: 'Email'
                            },
                            {
                                value: 251,
                                name: 'Google'
                            },
                            {
                                value: 234,
                                name: 'Union Ads'
                            },
                            {
                                value: 147,
                                name: 'Bing'
                            },
                            {
                                value: 135,
                                name: 'Video Ads'
                            },
                            {
                                value: 102,
                                name: 'Others'
                            }
                        ]
                    }
                ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    
    </html>

## 三、效果预览 ##

![cb47e40b29944848aa3b8cb7d2da3f43.png][]

## 四、异步数据的加载与动态更新 ##

> 示例中的数据是在初始化后`setOption`中直接填入的，但是很多时候可能数据需要异步加载后再填入。`ECharts` 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。

例子：

或者：

[0e31ff7845934da6836b16f7c9d46c13.png]: https://img-blog.csdnimg.cn/0e31ff7845934da6836b16f7c9d46c13.png
[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[- Handbook - Apache ECharts]: https://echarts.apache.org/handbook/zh/get-started
[cb47e40b29944848aa3b8cb7d2da3f43.png]: https://img-blog.csdnimg.cn/cb47e40b29944848aa3b8cb7d2da3f43.png