程序员经验分享-hwhale

前端 | 数据可视化之ECharts

2023-05-16

文章目录

  • 一、数据可视化
    • 1.1 什么是数据可视化
    • 1.2 数据可视化的使用场景
    • 1.3 常见可视化库
    • 1.4 小结
  • 二、ECharts简介
    • 2.1 什么是ECharts
  • 三、ECharts的快速入门
    • 3.1 ECharts使用五部曲
    • 3.2 选择不同类型图表
    • 3.3 相关配置讲解
    • 3.4 小结

一、数据可视化

1.1 什么是数据可视化

  • 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
  • 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理
    在这里插入图片描述

1.2 数据可视化的使用场景

在这里插入图片描述

1.3 常见可视化库

在这里插入图片描述

1.4 小结

在这里插入图片描述

二、ECharts简介

2.1 什么是ECharts

ECharts是一个使用 JavaScripηt实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（E8/9/10/11， Chrome, Firefox, Safari等），底层依赖矢量图形库REnder，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
优点：

  • 丰富的可视化类型
  • 多种数据格式支持
  • 流数据的支持
  • 移动端优化
  • 跨平台使用
  • 绚丽的特效
  • 详细的文档说明

大白话：

  • 是一个JS插件
  • 性能好可流畅运行PC与移动设备
  • 兼容主流浏览器
  • 提供很多常用图表，且可定制。
    • 折线图、柱状图、散点图、饼图、K线图

ECharts能满足绝大多数可视化图表实现，使用方便，功能强大，是实现数据可视化的最优选择之一。

官网地址：https://echarts.apache.org/zh/index.html

三、ECharts的快速入门

3.1 ECharts使用五部曲

ECharts使用五步曲:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts体验</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <!-- 1. 下载引入EChart.js 文件 -->
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备一个盒子用来装生成的图表 注意： 这个盒子必须具备大小 -->
    <div class="box"></div>
    <script>
        //    3.初始化echarts 实例对象    
        var myChart = echarts.init(document.querySelector('.box'));
        //  4.  指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 5. 将配置项和数据(option) 设置给 实例对象(myChart)
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

3.2 选择不同类型图表

在这里插入图片描述

选择Echarts图表
在这里插入图片描述

3.3 相关配置讲解

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.4 小结

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

echarts

数据可视化之

前端 | 数据可视化之ECharts 的相关文章

  • 浮点数怎么用二进制表示

    浮点数怎么用二进制表示 对于浮点数在计算机中是怎么用二进制表示的 xff0c 这个知识点让我学了很久 xff0c 很多资料讲的特别抽象难懂 xff0c 所以今天我想用自己的方式讲一讲 学过 计算机组成原理 或者类似 计算机系统 这些课程的小

  • Git合并出问题了怎么办

    首先 xff0c 我们不要在master中去进行修改提交 xff0c 一般这个时候我们新建一个分支 xff0c 将合并后的代码复制到新的分支中去 xff0c 然后我们对分支去进行一个修改 xff0c 当修改完成之后 xff0c 再合并到ma

随机推荐

  • 解决win11不能开启5GHZ热点的问题

    对于电脑5GHZ波段不可用的问题解决方法如下 xff1a 手机打开5GHz先让电脑连接电脑开启5Ghz热点断开WiFi xff0c 这时就可以用电脑开的5Ghz的热点了

  • SpringBoot 各层之间的关系

    一 层级 SpringBoot 分为四层 xff1a controller层 service层 dao层 entity层 entity层 xff1a 和model层一样 xff0c 存放的是实体类 xff0c 属性值与数据库值保持一致 xf

  • IEEE 802.1至802.12各层的 功能及特点

    IEEE 802 1 通用网络概念及网桥等 IEEE 802 2 逻辑链路控制等 IEEE 802 3 CSMA CD访问方法及物理层规定 IEEE 802 4 ARCnet总线结构及访问方法 物理层规定 IEEE 802 5 Token

  • ubuntu 常用命令大全

    一 文件 文件夹管理 ls 列出当前目录文件 xff08 不包括隐含文件 xff09 ls a 列出当前目录文件 xff08 包括隐含文件 xff09 ls l 列出当前目录下文件的详细信息 cd 回当前目录的上一级目录 cd 回上一次所在

  • MyBatis mapper.xml中使用静态常量或者静态方法

    使用MyBatis技术 xff0c 书写mapper xml时 xff0c 如果在其中的ognl表达式或者sql中直接使用一些数字或者字符串的话 xff0c 会造成难以维护的问题 在Java编码中 xff0c 我们通常会把这些数字或者字符串

  • get请求和post请求的区别

    HTTP协议 什么是协议 xff1f 协议实际上是某些人 xff0c 或者某些组织提前制定好的一套规范 xff0c 大家都按照这个规范来 xff0c 这样可以做到沟通无障碍 协议就是一套规范 xff0c 就是一套标准 由其他人或其他组织来负

  • 常见网络协议

    网络协议为计算机网络中进行数据交换而建立的规则 标准或约定的集合 例如 xff0c 网络中一个微机用户和一个大型主机的操作员进行通信 xff0c 由于这两个数据终端所用字符集不同 xff0c 因此操作员所输入的命令彼此不认识 为了能进行通信

  • C++ 栈（stack）使用简述

    目录 1 有关函数的作用 2 测试用例 至于栈的结构与原理 xff08 先入后出 xff09 这里就不细说了 xff0c 这里主要记录下 C 43 43 的头文件 lt stack gt 有关栈的操作是如何使用的 1 有关函数的作用 sta

  • 解决一个镜像ID同时拥有多个tag的问题

    docker rmi span class token operator lt span REPOSITORY TAG span class token operator gt span

  • 蜂鸣器介绍

    蜂鸣器介绍 蜂鸣器是一种将电信号转换为声音信号的器件 xff0c 常用来产生设备的按键音 报警音等提示信号 蜂鸣器按驱动方式可分为有源蜂鸣器和无源蜂鸣器 有源蜂鸣器 xff1a 内部自带振荡源 xff0c 将正负极接上直流电压即可持续发声

  • DS1302时钟芯片(SPI协议)

    DS1302时钟芯片 DS1302是由美国DALLAS公司推出的具有涓细电流充电能力的低功耗实时时钟芯片 它可以对年 月 日 周 时 分 秒进行计时 xff0c 且具有闰年补偿等多种功能 可以把该芯片看成一个小型的单片机 xff0c 其内部

  • ESP8266与单片机通信共地问题

    ESP8266与单片机通信共地问题 1 共地 xff1a 在数字电路中 xff0c 要判断一个电平信号的高低 xff0c 就需要一个标准来判断 xff0c 这个判断标准就是0电平 也叫地 xff09 xff0c 要把所有IC芯片的地连在一起

  • RS-485接口协议详解

    RS 485详解 通信协议 通讯协议主要是实现两个设备之间的数据交换功能 xff0c 通讯协议分硬件层协议和软件层协议 硬件层协议决定数据如何传输问题 xff0c 比如要在设备1向设备2发送0x63 xff0c 0x63的二进制数为0110

  • 使用阿里云IoT Studio建立物模型可视化界面

    使用阿里云IoT Studio建立物模型可视化界面 上一篇文章介绍了如何使用ESP 01S上报数据到物模型 xff1a https blog csdn net weixin 46251230 article details 12899671

  • 51单片机 简易光电循迹小车

    前言 应学校暑期课程要求 xff0c 也作为和小组成员完成一次对51单片机的练手 xff0c 制作了简易的光电小车 xff0c 完成了循迹功能 xff0c 下面包括较为详细的小车搭建过程以及完整代码 硬件部分准备 电源 可充电的电池组是智能

  • 阶段学习的总结

    当程序中存在多个对象的时候 xff0c 如何确定这些对象的析构顺序 单个对象创建时构造函数的调用顺序 调用父类的构造过程 调用成员变量的构造函数 xff08 调用顺序与声明顺序相同 xff09 调用类自身的构造函数 多个对象析构时 析构顺序

  • stm32学习笔记-1 STM32简介

    1 STM32简介 文章目录 1 STM32简介1 1 套件简介1 2 STM32芯片内部的外设1 3 STM32芯片系统结构1 4 STM32芯片引脚定义1 5 STM32最小系统 注 xff1a 笔记主要参考B站 江科大自化协 教学视频

  • Jetson Xavier NX 配置opencv3.4.5

    主要参考Jetson Xavier NX安装opencv3 x以及踩过的坑 xff0c 纪录下自己的错误 下载opencv3 4 5 链接 xff1a https pan baidu com s 17mASm87RNbgfmM 31vlxb

  • C++ 队列（queue、priority_queue）使用简述

    目录 1 queue有关函数的作用 2 priority queue 有关函数作用 3 queue 测试用例 4 priority queue 测试用例 至于队列的结构与原理 xff08 FIFO xff0c 先入先出 xff09 这里就不

  • 前端 | 数据可视化之ECharts

    文章目录 一 数据可视化1 1 什么是数据可视化1 2 数据可视化的使用场景1 3 常见可视化库1 4 小结 二 ECharts简介2 1 什么是ECharts 三 ECharts的快速入门3 1 ECharts使用五部曲3 2 选择不同类

热门标签