Apache ECharts简介和相关操作

文章目录

  • 一、Apache ECharts介绍
  • 二、快速入门
    • 1.下载echarts.js文件
    • 2.新建index.html文件
    • 3.准备一个DOM容器用于显示图表
    • 4.完整代码展示
    • 5.相关配置
  • 三、演示效果
  • 四、总结


一、Apache ECharts介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
官网地址:https://echarts.apache.org/zh/index.html
在这里插入图片描述
常见效果展示:
1.柱形图:
在这里插入图片描述
2.饼形图:
在这里插入图片描述
3.折线图
在这里插入图片描述
不管是那种图形,其本质就是数据

二、快速入门

Apache Echarts官方提供的快速入门:https://echarts.apache.org/handbook/zh/get-started/

1.下载echarts.js文件

echarts.js文件下载链接:https://www.jsdelivr.com/package/npm/echarts
在这里插入图片描述

2.新建index.html文件

代码如下(示例):

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head>
</html>

在这里插入图片描述

3.准备一个DOM容器用于显示图表

<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

在这里插入图片描述

4.完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

5.相关配置

  • xAxis
    直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
    呈现
  • yAxis
    直角坐标系 中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
    series 下找数据进行图表的绘制
  • series
    系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

三、演示效果

在这里插入图片描述


四、总结

使用Echarts,重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据,然后响应给前端来展示图表。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于开启弹性盒子之后当只有文本内容的和单独存在时内容无法撑起宽度从而对齐的解决方案

突然想起来这种情况&#xff0c;这种情况就是开启弹性盒子后如果一个盒子里只有纯文本内容&#xff0c;你的盒子是撑不起来的&#xff0c;这时给宽度也会无效&#xff08;除非取消弹性盒子&#xff09; 给你的子盒子宽度加max-content属性&#xff1a; 意思是盒子宽度由内容撑…

Android java Handler sendMessage使用Parcelable传递实例化对象,我这里传递Bitmap 图片数据

一、Bundle给我们提供了一个putParcelable(key,value)的方法。专门用于传递实例化对象。 二、我这里传递Bitmap 图片数据&#xff0c;实际使用可以成功传统图像数据。 发送&#xff1a;Bundle bundle new Bundle();bundle.putParcelable("bitmap",bitmap);msg.setD…

Python库Requests的爬虫程序爬取视频通用模版

目录 一、引言 二、Requests库介绍 三、通用视频爬虫模板设计 1、确定目标网站和视频页面结构 2、发送HTTP请求获取页面内容 3、解析HTML内容提取视频链接 4、下载视频文件 四、模板应用与实践 五、注意事项 总结与展望 一、引言 随着互联网的发展&#xff0c;视频内…

系列四、全局配置文件mybatis-config.xml

一、全局配置文件中的属性 mybatis全局配置中的文件非常多&#xff0c;主要有如下几个&#xff1a; properties&#xff08;属性&#xff09;settings&#xff08;全局配置参数&#xff09;typeAliases&#xff08;类型别名&#xff09;typeHandlers&#xff08;类型处理器&am…

APP自动化-uiautomator2--4、u2的另一类较为深入的方法

打开网址 import uiautomator2 as u2app = u2.connect("emulator-5554") app.open_url("https://gitee.com/qinganan_admin")其实际是运行了adb指令来打开了浏览器网址 shell方法 主要用于代码执行adb以及adb shell指令 启动APP import uiautomator2 …

全球高分辨率地表太阳辐射数据集包含36年(1983.7-2018.12)

简介&#xff1a; 全球高分辨率地表太阳辐射数据集包含36年&#xff08;1983.7-2018.12&#xff09;的全球地表太阳辐射数据&#xff0c;其分辨率为3小时&#xff0c;10公里&#xff0c;数据单位为W/㎡&#xff0c;瞬时值。该数据集可用于水文建模、地表建模和工程应用&#x…

车载电子电器架构 —— 基于AP定义车载HPC

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

kafka动态认证 自定义认证 安全认证-亲测成功

kafka动态认证 自定义认证 安全认证-亲测成功 背景 Kafka默认是没有安全机制的&#xff0c;一直在裸奔。用户认证功能&#xff0c;是一个成熟组件不可或缺的功能。在0.9版本以前kafka是没有用户认证模块的&#xff08;或者说只有SSL&#xff09;&#xff0c;好在kafka0.9版本…

OpenGL_Learn04

我这边并不是教程&#xff0c;只是学习记录&#xff0c;方便后面回顾&#xff0c;代码均是100%可以运行成功的。 1. 渐变三角形 #include <glad/glad.h> #include <GLFW/glfw3.h>#include <iostream> #include <cmath>void framebuffer_size_callba…

tp6使用Spreadsheet报错:Class ‘PhpOffice\PhpSpreadsheet\Spreadsheet‘ not found

问题提示如下&#xff1a; 可能vendor下的 phpoffice是从别的项目拷贝过来的&#xff0c;所以咋都不行 解决办法是删掉vendor下的phpoffice&#xff0c;用composer重新下载 具体操作&#xff1a;1、在项目根目录下cmd执行下面这条命令 composer require phpoffice/phpspread…

《Webpack 5 基础配置》- 禁止在出现编译错误或警告时,覆盖浏览器全屏显示

Webpack5 overlay 配置地址默认编译错误或警告为 true&#xff0c;即浏览器全屏显示&#xff1b;overlay 属性可以是 boolean 型&#xff0c;也可是 object 类型&#xff1b;还有其它设置说明&#xff0c;详见上述官网地址&#xff1b; module.exports {devServer: {client: {…

XR Interaction ToolKit

一、简介 XR Interaction Toolkit是unity官方的XR交互工具包。 官方XRI示例地址&#xff1a;https://github.com/Unity-Technologies/XR-Interaction-Toolkit-Examples 2023.3.14官方博客&#xff0c;XRIT v2.3 https://blog.unity.com/engine-platform/whats-new-in-xr-int…

企业内部外网向内网传输文件如何实现高效安全?

随着信息技术的发展&#xff0c;企业内部外网隔离已成为一种常见的网络安全措施&#xff0c;旨在防止外部攻击者入侵内部网络&#xff0c;保护企业的核心数据和业务系统。然而&#xff0c;企业内外网隔离也带来了一些问题&#xff0c;其中之一就是如何实现内外网之间的文件传输…

C++二分查找算法的应用:俄罗斯套娃信封问题

本文涉及的基础知识点 二分查找 题目 给你一个二维整数数组 envelopes &#xff0c;其中 envelopes[i] [wi, hi] &#xff0c;表示第 i 个信封的宽度和高度。 当另一个信封的宽度和高度都比这个信封大的时候&#xff0c;这个信封就可以放进另一个信封里&#xff0c;如同俄罗…

yolov5 调试

由于实验室服务器的环境不匹配&#xff0c;需要重新再在的包很多&#xff0c;我转成了云上服务器AutoDL。 通过github我下载了yolov5的5.0版本“yolov5-5.0”. 下载之后会有tutoral.py的教程文件。 通过Setup模块来配置相关环境&#xff1a; !git clone https://github.com…

2023年是5G-A标准制定关键年 华为实现5G-A重大突破

5G商用四年&#xff0c;2023年5G应用项目已经达到10万个&#xff0c;5G向千行百业渗透的同时&#xff0c;也在向5G-Advanced&#xff08;下简称5G-A&#xff09;演进。 10月20日&#xff0c;在工业和信息化部主办的2023年中国5G发展大会上&#xff0c;由IMT-2020&#xff08;5G…

【chatglm3】(2)使用docker运行chatglm3对外的http服务,使用python代码执行函数调用,查询北京天气

函数调用的演示视频&#xff1a; 使用docker运行最新chatglm3-6b&#xff0c;对外的http服务&#xff0c;使用python代码执行函数调用&#xff0c;查询北京天气代码演示和说明 使用docker运行最新chatglm3-6b&#xff0c;对外的http服务&#xff0c;使用python代码执行函数调用…

unraid 安装并设置 zerotier 内网穿透安装 unraid 局域网内其他设备

Read Original 最近看了以下两个文章&#xff0c;感谢发布的各种精彩文章&#xff0c;让我受益匪浅。OPENWRT 的固件在设置了&#xff0c;【自动允许客户端 NAT】后&#xff0c;可以直接访问局域网其他设备&#xff0c;而我 unraid 部署 zerotier 后&#xff0c;只能访问 unra…

Docker底层原理:Namespace的使用

文章目录 unshare命令设置命名空间&#xff1a;nsenter命令进入已有的命名空间 unshare命令设置命名空间&#xff1a; sudo unshare [options] [command]options可选参数 -m 或 --mount&#xff1a;创建新的Mount命名空间 -i 或 --ipc&#xff1a;创建新的IPC命名空间 -p 或 -…

R语言在生态环境领域中的实践技术应用

R语言作为新兴的统计软件&#xff0c;以开源、自由、免费等特点风靡全球。生态环境领域研究内容广泛&#xff0c;数据常多样而复杂。利用R语言进行多元统计分析&#xff0c;从复杂的现象中发现规律、探索机制正是R的优势。为此&#xff0c;以鱼类、昆虫、水文、地形等多样化的生…