Apache ECharts简介

二十九、Apache ECharts

29.1 介绍

Apache ECharts 是一款基于 JavaScript 的数据可视化图表库,提供直观、生动、可交互、可个性化定制的数据可视化图表。

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

常见效果展示:

1). 柱形图

2). 饼形图

3). 折线图

总结:不管是哪种形式的图形,最本质的东西实际上是数据,它其实是对数据的一种可视化展示。

29.2 入门案例

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

效果展示:

实现步骤

  1. 引入echarts.js文件(当天资料已提供)
  2. 为ECharts准备一个设置宽高的DOM
  3. 初始化echarts实例
  4. 指定图表的配置项和数据
  5. 使用指定的配置项和数据显示图表

代码开发:

<!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>

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

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

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

相关文章

TensorFlow实战教程(三十五)-VS Code配置Python编程和Keras环境及手写数字识别(基础篇)

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章利用Keras构建无监督学习Autoencoder模型并实现聚类分析。这篇文章将介绍基础知识,因为很多读者咨询我如何用VS Code配置Keras深度学习环境,并对比常用的深度学习框架,最后普及手写数字识…

NodeMCU ESP8266构建Web Server网页端控制设备

NodeMCU ESP8266构建Web Server网页端控制设备 前言 NodeMCU ESP8266 内部集成了TCP/IP协议栈&#xff0c;可以快速构建网络功能&#xff0c;搭建联网应用的硬件平台&#xff1b; ESP8266可以作为WiFi接入点&#xff08;Station&#xff09;&#xff0c;这样可以方便连接互联…

时间管理的高效提升措施

时间管理的高效提升措施&#xff1a; 制定计划&#xff1a;每天早上花几分钟规划当天的工作和任务&#xff0c;列出要完成的任务清单&#xff0c;并按照优先级排序。这有助于更好地掌握时间&#xff0c;避免被琐碎的事情所困扰&#xff0c;并保证时间的有效利用。 设定目标&a…

网站SSL证书过期了

当网站的SSL证书到期时&#xff0c;这可能会对网站的安全性和可信度产生负面影响。SSL证书是保证网站安全连接的重要组成部分&#xff0c;它通过加密传输数据&#xff0c;确保用户与网站之间的信息传输安全可靠。然而&#xff0c;一旦SSL证书过期&#xff0c;可能会引发一系列问…

VM——绘制亮度均匀性曲线

1、需求:检测汽车内饰氛围灯的亮度均匀性,并绘制均匀性曲线 2、结果: 3、方法: 主要分为3步 (1)提取氛围灯ROI,忽略背景 (2)对提取到的ROI图进行切片处理,计算出每个切片的亮度均值 (3)绘制均匀性曲线 3.1 提取氛围灯ROI step1: 转成黑白图 step2:通过blob和…

想要保护服务器的安全,使用哪个软件比较好?

随着互联网的发展普及&#xff0c;网络安全问题也越发凸显&#xff0c;相信不少使用服务器的用户&#xff0c;有遇到过或是听过服务器被入侵导致数据丢失或是被植入病毒木马程序被用来挖矿的情况。那么面对这类情况&#xff0c;我们该如何做好安全工作来保障我们服务器的使用安…

北斗成为全球民航通用卫星导航系统

北斗成为全球民航通用卫星导航系统 日前&#xff0c;包含北斗卫星导航系统&#xff08;以下简称“北斗系统”&#xff09;标准和建议措施的《国际民用航空公约》附件10最新修订版正式生效。这标志着北斗系统正式加入国际民航组织&#xff08;ICAO&#xff09;标准&#xff0c;成…

【Flink】系统架构

DataStream API 将你的应用构建为一个 job graph&#xff0c;并附加到 StreamExecutionEnvironment 。当调用 env.execute() 时此 graph 就被打包并发送到 JobManager 上&#xff0c;后者对作业并行处理并将其子任务分发给 Task Manager 来执行。每个作业的并行子任务将在 task…

2023.11.19使用flask制作一个文件夹生成器

2023.11.19使用flask制作一个文件夹生成器 实现功能&#xff1a; &#xff08;1&#xff09;在指定路径上建立文件夹 &#xff08;2&#xff09;返回文件夹的路径和建立成功与否的提示 main.py import os from flask import Flask, request, jsonify, render_templateapp F…

记录-2023/11/19

自定义权限类 如果你的权限逻辑只涉及到资源对象级别的操作&#xff0c;那么只定义has_object_permission方法就可以&#xff0c;如果同时涉及到资源集合的操作&#xff0c;可以同时定义has_permission方法

C# 代码合集

1. C#在托盘显示图标 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace notifyIconShow { public partial class noti…

文件权限、scp命令

chmod x chmod x 命令用于为文件添加执行权限。但是对于文件夹&#xff08;目录&#xff09;&#xff0c;你需要结合 chmod x 和 chmod r 来使其可执行和可读。 以下是为目录添加执行和读取权限的命令&#xff1a; chmod rx photo这为“photo”目录的所有者、组和其他用户添…

Docker运行Tomcat报错缓存空间不足

because there was insufficient free space available after evicting expired cache entries - consider increasing the maximum size of the cache 编辑 /opt/tomcat/conf/context.xml 添加 <Resources cachingAllowed"true" cacheMaxSize"100000"…

扒取网站文档-wget

wget命令 wget可以递归的方式下载整站&#xff0c;同时能把下载的页面中的链接转换为本地链接。 用法 wget -r -p -np -k http://xxx.com/xxx 参数&#xff1a; -r, --recursive 递归下载 -k, --convert-links将下载的HTML页面中的链接转换为相对链接即本地链接-p, --page-r…

【外汇天眼】交易之路:从无知到觉醒,揭秘成功交易员的五个成长阶段

世界顶尖交易员的成功背后隐藏的真正秘诀引人瞩目。许多人梦想着像电影中的主角一样&#xff0c;成为一名成功的金融交易员。尽管开设交易账户相对简单&#xff0c;但要达到稳定盈利的境界确实非常不容易。众所周知&#xff0c;在衍生品市场中&#xff0c;有80%甚至90%以上的交…

华为云数据库 RDS 下载全量备份文件 wget

地址下载 wget -O FILE_NAME --no-check-certificate "DOWNLOAD_URL"FILE_NAME&#xff1a;重命名&#xff0c;例如mysql1121.qpDOWNLOAD_URL: 地址下载 参考 华为云数据库 RDS 下载全量备份文件

企业AI虚拟ip形象定制的应用场景

随着AI人工智能和云计算等新技术的不断发展和应用&#xff0c;AI智能数字人已经演化成为了更加智慧的生命体&#xff0c;在服务企业和人类方面有了更高质量&#xff0c;特别是作为品牌形象代言人&#xff0c;通过高逼真模拟人类的外貌、声音和行为&#xff0c;在使得品牌在竞争…

城市交通领域的新趋势:地铁列车可视化

随着城市化进程的不断加速&#xff0c;地铁作为一种便捷、快速的城市交通方式&#xff0c;受到了越来越多人的青睐。地铁列车可视化&#xff0c;作为地铁运营管理中的一项重要工作&#xff0c;不仅可以提高列车运行效率和安全性&#xff0c;还可以为乘客提供更加舒适、便捷的乘…

C 结构体和函数

C 结构体和函数 在本教程中&#xff0c;您将学习将结构变量作为参数传递给函数。您将学习借助示例从函数返回struct的方法。 与内置类型的变量类似&#xff0c;您也可以将结构变量传递给函数。 将结构传递给函数 示例 #include <stdio.h> struct student {char name…

leetcode算法之分治-归并

目录 1.排序数组2.数组中的逆序对3.计算右侧小于当前元素的个数4.翻转对 1.排序数组 排序数组 //分治-归并 class Solution {int tmp[50010]; public:vector<int> sortArray(vector<int>& nums) {mergeSort(nums,0,nums.size()-1);return nums;}void mergeS…