ECharts 快速入门,我先冲了!

ECharts 快速入门,我先冲了!

介绍

ECharts(百度ECharts,全称Enterprise Charts)是一个由百度开发的开源的JavaScript图表库,用于在Web页面上创建丰富、交互性的数据可视化图表。ECharts支持多种常见的图表类型,包括折线图、柱状图、饼图、散点图、雷达图、地图等,以及复杂的组合图表。

如何使用

1. 获取安装ECharts

官网给出了四种安装方式

  1. 从 npm 获取

    如果你的开发环境使用了 npm 或者 yarn 等包管理工具,可以使用如下命令安装。

    npm install echarts
    
  2. 从 CDN 获取

    可以从以下免费 CDN 中获取和引用。

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"</script>
    
  3. 从 GitHub 获取

    我们可以直接到GitHub上下载对应源码。apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。然后在自己的项目中引入即可。

  4. 在线定制

    如果只想引入部分模块以减少包体积,可以使用 ECharts 在线定制功能。


根据自己的需求选择一种安装方式即可,这里我采用CDN引入的方式给大家展示

<!DOCTYPE html>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</body>
</html>

2. 准备一个具备大小的DOM容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
</body>
</html>

这里定义了一个类名为box,宽高为400px的盒子。

注意:一定要有宽高,不然我们的图表无法显示。

3. 初始化echarts实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
    <script>
        //初始化echarts实例对象
        var myEchart = echarts.init(document.querySelector('.box'));
    </script>
</body>
</html>

这里我们通过document.querySelector('.box')选中这个盒子,如何通过ECharts提供的 echarts.init 方法初始化一个 echarts 实例。

4. 指定配置项和数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
    <script>
        //初始化echarts实例对象
        var myEchart = echarts.init(document.querySelector('.box'));
        
        //指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
    </script>
</body>
</html>

这里的配置项和数据是从官网 copy 来的,先给大家看下效果,后面我们会针对常用的配置项进行介绍。

5. 将配置项传echarts实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 引入 ECharts 源码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <!-- 定义具备大小的DOM容器 -->
    <div class="box" style="width: 400px;height: 400px;"></div>
    <script>
        //初始化echarts实例对象
        var myEchart = echarts.init(document.querySelector('.box'));
        
        //指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        //将配置项传echarts实例对象
        myEchart.setOption(option);
    </script>
</body>
</html>

这里我们使用官方提供的 setOption 方法生成一个简单的柱状图

在前面option 对象定义了一个简单的柱状图的配置,接着我们通过调用 官方提供的setOption方法,将这个配置应用到已经初始化的图表实例 myEchart 中。

效果展示

走完上面的五部曲,那么可以恭喜你,你的第一个图表诞生了!

配置项

对于配置项的学习,我们可以在官方实例中找到一个自己喜欢的图表,然后通过修改配置项数据,右侧的图表也会随之变化,数形结合的方式更有助于学习!

ECharts 快速入门,我先冲了!

这里我们就拿这个折线图举例

  • title: 设置图表标题,包含主标题和副标题

ECharts 快速入门,我先冲了!

  • tooltip: 提示框组件

    • trigger触发类型可选:'axis''item'

    • 'axis'坐标轴触发:

    ECharts 快速入门,我先冲了!

    • 'item'数据项图形触发:

    ECharts 快速入门,我先冲了!

  • legend: 图例组件,通过点击图例控制哪些系列不显示

ECharts 快速入门,我先冲了!

  • grid: 直角坐标系内绘图网格

    • grid代表直角坐标系而不是整个DOM容器,leftrightbottom表示grid组件离容器左侧、右侧、底部的距离。

    • containLabel代表grid区域是否显示坐标轴的刻度值。如果值为true,那我们在计算grid距离左侧的距离时要把刻度值也要当做容器的一部分。

    ECharts 快速入门,我先冲了!

  • toolbox: 工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

ECharts 快速入门,我先冲了!

  • xAxis: 设置x轴的相关配置

    • type:坐标轴的类型,可选类型:'value'数值轴、'category'类目轴、'time'时间轴、'log' 对数轴。

    • boundaryGap:坐标轴两边是否留白。

    • data:所有类目名称列表。

ECharts 快速入门,我先冲了!

  • yAxis: 设置x轴的相关配置

ECharts 快速入门,我先冲了!

  • series: 系列图标配置,它决定了显示哪种类型的图表

    • series是一个数组,数组中有几个对象就有条数据,这里是折线图,五个对象就有五条线,如果是柱状图就有五个柱子。
    • name:系列名称,用于tooltip的显示,legend的图例筛选,在setOption更新数据和配置项时用于指定对应的系列。
    • type:图表的类型。
    • stack:数据堆叠,同个类目轴上系列配置相同的 stack 值可以堆叠放置。下图中我们发现第五条折线的数据跟data中不匹配,这是因为这五条数据配置了相同的 stack 值,导致数据堆叠,数值为前五项相加,这样可以避免折线图重叠的情况。

    ECharts 快速入门,我先冲了!

最后

看到这里,希望你已经对ECharts已经有了初步的认识,以上的介绍只是ECharts功能中的冰山一角。还是建议你阅读官方文档,探索更多的配置和功能,以便更好地适应不同的数据可视化场景。如果你有任何关于 ECharts 的问题,也可以随时提问。

已将学习代码上传至 github,欢迎大家学习指正!

技术小白记录学习过程,有错误或不解的地方还请评论区留言,如果这篇文章对你有所帮助请 “点赞 收藏+关注” ,感谢支持!!

原文链接:https://juejin.cn/post/7340486547274711078 作者:阳阳羊

(0)
上一篇 2024年2月29日 上午10:21
下一篇 2024年2月29日 上午10:32

相关推荐

发表评论

登录后才能评论