ECharts 快速入门

文章目录

    • 1. 引入 ECharts
    • 2. 初始化 ECharts 实例
    • 3. 配置图表选项
    • 4. 使用配置项生成图表
    • 5. 最常用的几种图形
      • 5.1 柱状图（Bar Chart）
      • 5.2 折线图（Line Chart）
      • 5.3 饼图（Pie Chart）
      • 5.4 散点图（Scatter Chart）
    • 6. 更多配置项
      • 6.1 颜色主题
      • 6.2 数据缩放
      • 6.3 工具栏
    • 7. 参考文档

ECharts 是一个由百度开源的基于 JavaScript 的数据可视化图表库，它提供了丰富的图表类型、交互功能和主题样式，方便用户快速创建各种数据可视化图表，并在商业和开源项目中广泛应用。

本文内容根据 ECharts 官方文档 整理。

下面将介绍如何使用 ECharts 创建最常用的几种图表：柱状图、折线图、饼图和散点图。

1. 引入 ECharts

在使用 ECharts 之前，首先需要在 HTML 文件中引入 ECharts 的 JavaScript 文件。

可以选择通过 CDN 引入或者下载 ECharts 文件并在本地引入。

使用 CDN：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div> <!-- 定义一个用于显示图表的容器 -->
    <script>
        // 在这里编写您的 ECharts 代码
    </script>
</body>
</html>

2. 初始化 ECharts 实例

在 HTML 中创建一个容器，然后在 JavaScript 中初始化 ECharts 实例。

<div id="main" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示图表的 div 容器 -->
<script>
    var chart = echarts.init(document.getElementById('main')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->
</script>

3. 配置图表选项

定义图表的配置和数据。

ECharts 的配置项非常丰富，以下是一个简单的示例：

var option = {
    title: {
        text: 'ECharts 示例图表'  <!-- 图表标题 -->
    },
    tooltip: {},  <!-- 提示框组件，显示数据详细信息 -->
    legend: {
        data: ['销量']  <!-- 图例数据，展示在图表上方的标签 -->
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  <!-- X 轴数据 -->
    },
    yAxis: {},  <!-- Y 轴配置 -->
    series: [{
        name: '销量',  <!-- 系列名称 -->
        type: 'bar',  <!-- 图表类型：柱状图 -->
        data: [5, 20, 36, 10, 10, 20]  <!-- 数据项 -->
    }]
};

4. 使用配置项生成图表

将配置项设置给 ECharts 实例以生成图表。

chart.setOption(option); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->

5. 最常用的几种图形

5.1 柱状图（Bar Chart）

柱状图是一种非常常用的图表类型，适用于比较不同类别的数据。

下面是一个完整的柱状图示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
    <div id="barChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示柱状图的 div 容器 -->
    <script>
        var barChart = echarts.init(document.getElementById('barChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->

        var barOption = {
            title: {
                text: '柱状图示例'  <!-- 图表标题 -->
            },
            tooltip: {},  <!-- 提示框组件，显示数据详细信息 -->
            legend: {
                data: ['销量']  <!-- 图例数据，展示在图表上方的标签 -->
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  <!-- X 轴数据 -->
            },
            yAxis: {},  <!-- Y 轴配置 -->
            series: [{
                name: '销量',  <!-- 系列名称 -->
                type: 'bar',  <!-- 图表类型：柱状图 -->
                data: [5, 20, 36, 10, 10, 20]  <!-- 数据项 -->
            }]
        };

        barChart.setOption(barOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
    </script>
</body>
</html>

5.2 折线图（Line Chart）

折线图用于显示数据的变化趋势，特别适合展示时间序列数据。

以下是一个折线图的完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>折线图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
    <div id="lineChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示折线图的 div 容器 -->
    <script>
        var lineChart = echarts.init(document.getElementById('lineChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->

        var lineOption = {
            title: {
                text: '折线图示例'  <!-- 图表标题 -->
            },
            tooltip: {},  <!-- 提示框组件，显示数据详细信息 -->
            legend: {
                data: ['温度']  <!-- 图例数据，展示在图表上方的标签 -->
            },
            xAxis: {
                type: 'category',  <!-- X 轴类型：类目轴 -->
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']  <!-- X 轴数据 -->
            },
            yAxis: {
                type: 'value'  <!-- Y 轴类型：数值轴 -->
            },
            series: [{
                name: '温度',  <!-- 系列名称 -->
                type: 'line',  <!-- 图表类型：折线图 -->
                data: [11, 11, 15, 13, 12, 13, 10]  <!-- 数据项 -->
            }]
        };

        lineChart.setOption(lineOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
    </script>
</body>
</html>

5.3 饼图（Pie Chart）

饼图用于显示各部分在总量中的占比情况。

以下是一个饼图的完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>饼图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
    <div id="pieChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示饼图的 div 容器 -->
    <script>
        var pieChart = echarts.init(document.getElementById('pieChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->

        var pieOption = {
            title: {
                text: '饼图示例',  <!-- 图表标题 -->
                left: 'center'  <!-- 标题位置：居中 -->
            },
            tooltip: {
                trigger: 'item'  <!-- 提示框触发类型：数据项触发 -->
            },
            legend: {
                orient: 'vertical',  <!-- 图例布局方式：垂直 -->
                left: 'left'  <!-- 图例位置：左侧 -->
            },
            series: [{
                name: '访问来源',  <!-- 系列名称 -->
                type: 'pie',  <!-- 图表类型：饼图 -->
                radius: '50%',  <!-- 饼图半径：50% -->
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ],  <!-- 数据项 -->
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,  <!-- 高亮样式：阴影模糊大小 -->
                        shadowOffsetX: 0,  <!-- 阴影水平方向偏移 -->
                        shadowColor: 'rgba(0, 0, 0, 0.5)'  <!-- 阴影颜色 -->
                    }
                }
            }]
        };

        pieChart.setOption(pieOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
    </script>
</body>
</html>

5.4 散点图（Scatter Chart）

散点图用于显示两个变量之间的关系。

以下是一个散点图的完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>散点图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->
</head>
<body>
    <div id="scatterChart" style="width: 600px;height:400px;"></div> <!-- 创建一个用于显示散点图的 div 容器 -->
    <script>
        var scatterChart = echarts.init(document.getElementById('scatterChart')); <!-- 初始化 ECharts 实例，并将其绑定到上述 div 容器 -->

        var scatterOption = {
            title: {
                text: '散点图示例'  <!-- 图表标题 -->
            },
            tooltip: {},  <!-- 提示框组件，显示数据详细信息 -->
            xAxis: {},  <!-- X 轴配置 -->
            yAxis: {},  <!-- Y 轴配置 -->
            series: [{
                symbolSize: 20,  <!-- 数据点大小 -->
                data: [
                    [10.0, 8.04],
                    [8.0, 6.95],
                    [13.0, 7.58],
                    [9.0, 8.81],
                    [11.0, 8.33],
                    [14.0, 9.96],
                    [6.0, 7.24],
                    [4.0, 4.26],
                    [12.0, 10.84],
                    [7.0, 4.82],
                    [5.0, 5.68]
                ],  <!-- 数据项 -->
                type: 'scatter'  <!-- 图表类型：散点图 -->
            }]
        };

        scatterChart.setOption(scatterOption); <!-- 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表 -->
    </script>
</body>
</html>

6. 更多配置项

ECharts 提供了丰富的配置项来定制图表。

以下是一些常见配置项的示例：

6.1 颜色主题

通过 color 属性可以自定义图表的颜色主题：

var option = {
    color: ['#3398DB'],  <!-- 自定义颜色主题 -->
    ...
};

6.2 数据缩放

通过 dataZoom 可以实现图表的数据缩放功能：

var option = {
    dataZoom: [{
        type: 'slider',  <!-- 缩放类型：滑动条 -->
        start: 10,  <!-- 缩放起始位置 -->
        end: 60  <!-- 缩放结束位置 -->
    }],
    ...
};

6.3 工具栏

通过 toolbox 可以添加工具栏，包括导出图片等功能：

var option = {
    toolbox: {
        feature: {
            saveAsImage: {}  <!-- 保存为图片的工具 -->
        }
    },
    ...
};

7. 参考文档

本文涵盖了 ECharts 的基本使用方法和常见图表类型的创建。

想要了解更多关于 ECharts 的详细配置和高级功能，请访问 ECharts 官方文档。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/761394.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

为什么安装了SSL证书还是不能HTTPS访问？

为什么安装了SSL证书还是不能HTTPS访问？

即便是正确安装了SSL证书&#xff0c;有时网站仍然无法通过HTTPS正常访问&#xff0c;这背后可能隐藏着多种原因。以下是一些常见的问题及解决方案&#xff0c;帮助您排查并解决这一困扰。 PC点此申请&#xff1a;SSL证书申请_https证书下载-极速签发 注册填写注册码230918&a…
阅读更多...
mysql-5.6.26-winx64免安装版本

mysql-5.6.26-winx64免安装版本

mysql为什么要使用免安装 MySQL 提供免安装版本主要有以下几个原因和优势&#xff1a; 便捷性&#xff1a;用户无需经历安装过程&#xff0c;直接解压即可使用。这对于需要快速部署环境或者在不支持安装权限的系统上使用MySQL非常有用。灵活性&#xff1a;免安装版允许用户将…
阅读更多...
基于SSM的挂号系统（简单）

基于SSM的挂号系统（简单）

设计技术&#xff1a; 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SSMJSP 工具&#xff1a;IDEA、Maven、Navicat 主要功能&#xff1a; 首页 登录 查看医生信息 挂号 挂号记录查看 个人信息查看 需要可加V分享源码 package com.hg.controller;impor…
阅读更多...
idk17配置

idk17配置

只需要把zip包解压&#xff0c;然后配置环境变量&#xff1a; bin目录路径粘到path里面就好了 然后打开cmd窗口分别输入 java javac java -version 验证
阅读更多...
IT专业入门，高考假期预习指南

IT专业入门，高考假期预习指南

文章目录 一、了解IT专业的基本概念二、选择适合的编程语言入门三、掌握基本的编程工具和环境四、学习基础的数据结构和算法五、实践项目和动手实验六、利用在线资源进行学习七、参加编程竞赛和社区活动总结 高考结束后&#xff0c;许多同学将迎来大学生活&#xff0c;而对于选…
阅读更多...
ARP 原理详解 二

ARP 原理详解 二

只要确定了 IP 地址后&#xff0c;就能够向这个 IP 地址所在的主机发送数据报&#xff0c;这是我们所熟知的事情。 但是再往深了想&#xff0c;IP 地址只是标识网络层的地址&#xff0c;那么在网络层下方数据链路层是不是也有一个地址能够告诉对方主机自己的地址呢&#xff1f…
阅读更多...
【Python画图-循环01】一文叫你搭建python画图最优环境配置

【Python画图-循环01】一文叫你搭建python画图最优环境配置

【Python画图-循环01】一文叫你搭建python画图最优环境配置 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容文档关注&#…
阅读更多...
突发！1本“On Hold”期刊惨遭除名！共12本期刊被剔除！Scopus目录更新！

突发！1本“On Hold”期刊惨遭除名！共12本期刊被剔除！Scopus目录更新！

【欧亚科睿学术】 近期&#xff0c;爱思唯尔更新了Scopus期刊目录&#xff0c;这是本年度的第五次更新。 图片来源&#xff1a;Elsevier 本次Scopus来源出版物列表(Scopus Sources)共有46097本期刊被收录。其中&#xff0c;有12本期刊不再被数据库收录(Discontinued titles)&a…
阅读更多...
复制 pdf 的表格到 markdown 版本的Typora 或者 word 中

复制 pdf 的表格到 markdown 版本的Typora 或者 word 中

在 pdf 中选中复制表格内容&#xff0c;直接粘贴到 typora 中失败&#xff0c;可以使用 txt文件和 excel 做过渡。 准备一个空的 txt 文件&#xff0c;将 pdf 中表格的数据复制粘贴到txt文件中&#xff0c;文本内容会以空格分开&#xff0c;如下图的形式&#xff1a; 打开 exc…
阅读更多...
[Shell编程学习路线]——shell脚本中case语句多分支选择详解

[Shell编程学习路线]——shell脚本中case语句多分支选择详解

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f6e0;️Shell编程专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年6月21日16点30分 &#x1f004;️文章质量&#xff1a;95分 ————前言———— 在Shell编程中&#xff0c;处理多种条件…
阅读更多...
简单爬虫案例——爬取快手视频

简单爬虫案例——爬取快手视频

网址&#xff1a;aHR0cHM6Ly93d3cua3VhaXNob3UuY29tL3NlYXJjaC92aWRlbz9zZWFyY2hLZXk9JUU2JThCJTg5JUU5JTlEJUEy 找到视频接口&#xff1a; 视频链接在photourl中 完整代码&#xff1a; import requestsimport re url https://www.kuaishou.com/graphql cookies {did: web_…
阅读更多...
SpringCloud-服务网关-Gateway

SpringCloud-服务网关-Gateway

1.服务网关在微服务中的应用 (1)对外提供服务的难题分析&#xff1a; 微服务架构下的应用系统体系很庞大&#xff0c;光是需要独立部署的基础组件就有注册中心、配置中心和服务总线、Turbine异常聚合和监控大盘、调用链追踪器和链路聚合&#xff0c;还有Kaka和MQ之类的中间件&…
阅读更多...
最短路模型——AcWing 188. 武士风度的牛

最短路模型——AcWing 188. 武士风度的牛

最短路模型 定义 最短路模型是图论中的一个经典问题&#xff0c;旨在寻找从图中一个顶点到另一个顶点的路径&#xff0c;使得这条路径上的边&#xff08;或边的权重&#xff09;之和最小。这一模型在许多实际问题中有着广泛的应用&#xff0c;比如网络路由、地图导航、物流配…
阅读更多...
AI绘画-Stable Diffusion 原理介绍及使用

AI绘画-Stable Diffusion 原理介绍及使用

引言 好像很多朋友对AI绘图有兴趣&#xff0c;AI绘画背后&#xff0c;依旧是大模型的训练。但绘图类AI对计算机显卡有较高要求。建议先了解基本原理及如何使用&#xff0c;在看看如何实现自己垂直行业的绘图AI逻辑。或者作为使用者&#xff0c;调用已有的server接口。 首先需…
阅读更多...
Advanced slides插件无法预览幻灯片

Advanced slides插件无法预览幻灯片

advanced-slides的官方地址&#xff1a; MSzturc/obsidian-advanced-slides: Create markdown-based reveal.js presentations in Obsidian (github.com) 官方教程和文档&#xff1a; Advanced Slides Documentation (mszturc.github.io) 中文版也有博客翻译了&#xff1a;Ob…
阅读更多...
[数据集][目标检测]桥梁检测数据集VOC+YOLO格式1116张1类别

[数据集][目标检测]桥梁检测数据集VOC+YOLO格式1116张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1116 标注数量(xml文件个数)&#xff1a;1116 标注数量(txt文件个数)&#xff1a;1116 标注…
阅读更多...
51单片机第21步_将TIM0用作两个8位定时器同时将TIM1用作波特率发生器

51单片机第21步_将TIM0用作两个8位定时器同时将TIM1用作波特率发生器

本章重点讲解将TIM0用作两个8位定时器&#xff0c;同时将TIM1用作波特率发生器。 当定时器T0在方式3时&#xff0c;T1不能产生中断&#xff0c;但可以正常工作在方式0、1、2下&#xff0c;大多数情况下&#xff0c;T1将用作串口的波特率发生器。 1、定时器0工作在模式3框图&a…
阅读更多...
【基础篇】第4章 Elasticsearch 查询与过滤

【基础篇】第4章 Elasticsearch 查询与过滤

在Elasticsearch的世界里&#xff0c;高效地从海量数据中检索出所需信息是其核心价值所在。本章将深入解析查询与过滤的机制&#xff0c;从基础查询到复合查询&#xff0c;再到全文搜索与分析器的定制&#xff0c;为你揭开数据检索的神秘面纱。 4.1 基本查询 4.1.1 Match查询…
阅读更多...
从手工作坊到智能工厂：APS与MES的升级之路

从手工作坊到智能工厂：APS与MES的升级之路

一、APS&#xff1a;制造业的中枢 APS&#xff08;AdvancedPlanningandScheduling&#xff09;&#xff0c;堪称制造业的数据接收和处理中枢&#xff0c;其借助前沿的算法与缜密的逻辑构建排程模型&#xff0c;全方位综合考量市场的多元需求、工厂的实际产能、物料的储备情况、…
阅读更多...
Sentinel 采用的是什么限流算法？

Sentinel 采用的是什么限流算法？

引言&#xff1a;Sentinel 是一款由阿里巴巴开源的流量控制组件&#xff0c;提供了多种流控规则和限流算法&#xff0c;能够有效保护服务不被过载&#xff0c;同时实现服务的稳定运行。本文将深入探讨 Sentinel 所采用的主要限流算法&#xff0c;包括固定窗口计数器、滑动窗口计…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站