当前位置： 首页 > news >正文

前端框架-echarts

news 文章来源：https://blog.csdn.net/qq_44139121/article/details/138489287 2024/10/22 9:32:48

Echarts

项目中要使用到echarts框架，从零开始在csdn上记笔记。
这是一个基础的代码，小白入门看一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js" integrity="sha256-QvgynZibb2U53SsVu98NggJXYqwRL7tg3FeyfXvPOUY=" crossorigin="anonymous"></script>
</head>
<body><div id="main", style="width: 600px;height: 400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));//指定图标的配置与数据var option = {//标题配置项title: { text: 'ECharts 入门示例'},//提示框配置项tooltip: {},//图例配置项legend: {data:['销量']},//x坐标轴配置项xAxis: {data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},//y坐标轴配置项,y轴配置项为空，意味着Y轴的显示会根据数据自动调整yAxis: {},//数据系列配置项series: [{name: '销量', //名字// type: 'bar', //这是柱状图type: 'line', //这是折线图data: [5, 20, 36, 10, 10, 20] //数据}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>

折线图图示

在这里插入图片描述

柱状图图示
在这里插入图片描述

相关文章：

前端框架-echarts

Echarts 项目中要使用到echarts框架&#xff0c;从零开始在csdn上记笔记。 这是一个基础的代码&#xff0c;小白入门看一下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" co…...

编程日记 2024/5/7 10:21:34

【StarRocks系列】 Trino 方言支持

我们在之前的文章中&#xff0c;介绍了 Doris 官方提供的两种方言转换工具&#xff0c;分别是 sql convertor 和方言 plugin。StarRocks 目前同样也提供了类似的方言转换功能。本文我们就一起来看一下这个功能的实现与 Doris 相比有何不同。 一、Trino 方言验证 我们可以通过…...

编程日记 2024/5/7 10:18:46

【2024最新华为OD-C卷试题汇总】URL拼接 (100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 前…...

编程日记 2024/5/7 10:16:01

【ARM 嵌入式 C 字符串系列 23.7 -- C 实现函数 isdigit 和 isxdigit】

请阅读【嵌入式开发学习必备专栏 】 文章目录 isdigit 和 isxdigit C代码实现实现 isdigit实现 isxdigit使用示例 isdigit 和 isxdigit C代码实现 在C语言中&#xff0c;isdigit和isxdigit函数用于检查一个字符是否分别为十进制数字或十六进制数字。以下是这两个函数的简单实现…...

编程日记 2024/5/7 10:13:15

三分钟了解计算机网络核心概念-数据链路层和物理层

计算机网络数据链路层和物理层 节点&#xff1a;一般指链路层协议中的设备。 链路&#xff1a;一般把沿着通信路径连接相邻节点的通信信道称为链路。 MAC 协议&#xff1a;媒体访问控制协议&#xff0c;它规定了帧在链路上传输的规则。 奇偶校验位&#xff1a;一种差错检测方…...

编程日记 2024/5/7 10:08:24

数据结构===堆

文章目录 概要堆2条件大顶堆小顶堆 堆的实现插入元素删除堆顶元素 堆代码小结 概要 堆&#xff0c;有趣的数据结构。 那么&#xff0c;如何实现一个堆呢&#xff1f; 堆 堆&#xff0c;有哪些重点&#xff1a; 满足2条件大顶堆小顶堆 2条件 2条件&#xff1a; 堆是一个…...

编程日记 2024/5/7 10:03:53

AAA、RADIUS、TACACS、Diameter协议介绍

准备软考高级时碰到的一个概念&#xff0c;于是搜集网络资源整理得出此文。 概述 AAA是Authentication、Authorization、Accounting的缩写简称&#xff0c;即认证、授权、记帐。Cisco开发的一个提供网络安全的系统。AAA协议决定哪些用户能够访问服务&#xff0c;以及用户能够…...

编程日记 2024/5/7 9:57:49

Nacos高频面试题及参考答案(2万字长文)

目录 Nacos是什么？它的主要功能有哪些？ Nacos在微服务架构中扮演什么角色？...

编程日记 2024/5/7 9:56:40

CMakeLists.txt语法规则：条件判断中表达式说明四

一. 简介 前面学习了 CMakeLists.txt语法中的 部分常用命令&#xff0c;常量变量&#xff0c;双引号的使用。 前面几篇文章也简单了解了 CMakeLists.txt语法中的条件判断&#xff0c;文章如下&#xff1a; CMakeLists.txt语法规则&#xff1a;条件判断说明一-CSDN博客 CMa…...

编程日记 2024/5/7 9:55:27

Hive概述

Hive简介 Hive是一个基于Hadoop的开源数据仓库工具,用于存储和处理海量结构化数据. 它是Facebook在2008年8月开源的一个数据仓库框架,提供了类似于SQL语法的HQL(HiveSQL)语句作为数据访问接口. Hive可以做复查统计分析之类的工作; 利用hdfs的存储空间,进行结构化数据的存储; 利…...

编程日记 2024/5/7 9:54:15

buuctf-misc-33.[BJDCTF2020]藏藏藏1

33.[BJDCTF2020]藏藏藏1 题目&#xff1a;藏了很多层&#xff0c;一层一层的剥开 常规思路&#xff0c;先使用010打开一下看看 binwalk不行用foremost 发现是pk文件也就是压缩包&#xff0c;并且包含了docx文件 这不binwalk分离一下文件&#xff1f;虽然可以看出有隐藏文件&…...

编程日记 2024/5/7 9:53:05

golang 基础知识细节回顾

之前学习golang的速度过于快&#xff0c;部分内容有点囫囵吞枣的感觉&#xff0c;写gorm过程中有很多违反我常识的地方&#xff0c;我通过复习去修正了我之前认知错误和遗漏的地方。 itoa itoa自增的作用在编辑error code时候作用很大&#xff0c;之前编辑springboot的error c…...

编程日记 2024/5/7 9:50:42

递归陷阱七例

目录 栈溢出 无限递归 大常数参数 递归深度过大 重复计算 函数调用开销 递归与迭代的选择 总结 递归是一种强大的编程技术&#xff0c;它允许函数调用自身。递归在很多情况下可以简化代码&#xff0c;使问题更容易理解和解决。然而&#xff0c;递归也容易导致一些常见的…...

编程日记 2024/5/7 9:49:34

【3D基础】坐标转换——地理坐标投影到平面

汤国安版GIS原理第二章重点 1.常见投影方式 https://download.csdn.net/blog/column/9283203/83387473 Web Mercator投影&#xff08;Web Mercator Projection&#xff09;&#xff1a; 优点&#xff1a; 在 Web 地图中广泛使用&#xff0c;易于显示并与在线地图服务集成。在…...

编程日记 2024/5/7 9:48:24

颈椎锻炼方式

1. 颈部伸展运动&#xff1a;坐直&#xff0c;慢慢将头向前伸展&#xff0c;直到感到轻微的拉伸&#xff0c;保持数秒钟&#xff0c;然后缓慢放松。重复10次。 2. 颈部旋转运动&#xff1a;坐直&#xff0c;慢慢将头向一侧转动&#xff0c;直到感到轻微的拉伸&#xff0c;保持…...

编程日记 2024/5/7 9:44:57

测试环境搭建：JDK+Tomcat+Mysql+Redis

基础的测试环境搭建&#xff1a; LAMPLinux(CentOS、ubuntu、redhat)ApacheMysqlPHP LTMJLinux(CentOS、ubuntu、redhat)TomcatMysql(Oracle)RedisJava 真实的测试环境搭建&#xff1a;&#xff08;企业真实的运维&#xff09; 基于SpringBoot&#xff08;SpringCloud分布式微…...

编程日记 2024/5/7 9:43:49

(delphi11最新学习资料) Object Pascal 学习笔记---第11章第1节（混合引用中的错误）

11.1.3 混合引用中的错误 ​ 在使用对象时&#xff0c;你通常应该只使用对象变量或接口变量来访问它们。混合使用这两种方法会破坏对象 Pascal 所提供的引用计数机制&#xff0c;并可能导致极难跟踪的内存错误。在实践中&#xff0c;如果你决定使用接口&#xff0c;你可能应该…...

编程日记 2024/5/7 9:39:58

代码随想录算法训练营第三天 | 链表理论基础，203.移除链表元素，707.设计链表，206.反转链表

对于链表完全陌生&#xff0c;但是看题目又觉得和数组一样的 链表理论基础 Q&#xff1a;什么是链表&#xff1f; A&#xff1a;链表是由一系列结点组成的。每一个结点由两部分组成&#xff1a;数据和指针。 203.移除链表元素 题目&#xff1a; 给你一个链表的头节点 head 和…...

编程日记 2024/5/7 9:38:50

如何利用仪表构造InfiniBand流量在数据中心测试中的应用

一、什么是Infiniband&#xff1f; 在当今数据爆炸的时代&#xff0c;数据中心作为信息处理的中心枢纽&#xff0c;面临着前所未有的挑战。传统的通信方式已经难以满足日益增长的数据传输需求&#xff0c;而InfiniBand技术的出现&#xff0c;为数据中心带来了全新的通信解决方…...

编程日记 2024/5/7 9:37:40

Kubernetes 文档 / 概念 / Kubernetes 架构 / 节点

Kubernetes 文档 / 概念 / Kubernetes 架构 / 节点 此文档从 Kubernetes 官网摘录 中文地址 英文地址 节点上的组件包括 kubelet、 容器运行时以及 kube-proxy。 管理 向 API 服务器添加节点的方式主要有两种&#xff1a; 节点上的 kubelet 向控制面执行自注册&#xff1b…...

编程日记 2024/5/7 9:36:32

ICode国际青少年编程竞赛- Python-1级训练场-for循环练习

ICode国际青少年编程竞赛- Python-1级训练场-for循环练习 1、 for i in range(3):Dev.step(4)Dev.turnLeft()2、 for i in range(3):Dev.step(2)Dev.turnRight()Dev.step(2)Dev.turnLeft()3、 for i in range(3):Dev.step(2)Dev.turnRight()Dev.step(2)Dev.turnLeft()4、 for…...

编程日记 2024/5/7 9:35:20

Flutter分模块开发、模块可单独启动、包含Provider

前言 当前案例 Flutter SDK版本&#xff1a;3.13.2 目前Flutter都是在一个项目中&#xff0c;创建不同目录进行模块开发&#xff0c;我进行Android原生开发时&#xff0c;发现原生端&#xff0c;是可以将每个模块独立运行起来的&#xff0c;灵感来自这&#xff1b; 折腾了几…...

编程日记 2024/5/7 9:33:04

Element-UI快速入门：构建优雅的Vue.js应用界面

Element-UI是一套基于Vue.js的组件库&#xff0c;提供了丰富的UI组件和交互效果&#xff0c;帮助开发者快速构建出美观、功能丰富的Web应用界面。本文将介绍如何快速入门Element-UI&#xff0c;并搭建一个简单的示例界面。 步骤一&#xff1a;安装Element-UI 首先&#xff0c…...

编程日记 2024/5/7 9:29:33

Flutter 中的 @immutable：深入解析与最佳实践

在 Flutter 开发中&#xff0c;immutable 注释扮演着至关重要的角色&#xff0c;用于标记不可变类。不可变类顾名思义&#xff0c;其状态一旦创建便不可更改&#xff0c;这与可变类截然不同。后者允许在创建后对实例进行修改。 immutable 的利好 引入不可变类可以带来诸多优势…...

编程日记 2024/5/7 9:28:23

Pandas数据可视化 - Matplotlib、Seaborn、Pandas Plot、Plotly

可视化工具介绍 让我们一起探讨Matplotlib、Seaborn、Pandas Plot和Plotly这四个数据可视化库的优缺点以及各自的适用场景。这有助于你根据不同的需求选择合适的工具。 1. Matplotlib 优点: 功能强大&#xff1a;几乎可以用于绘制任何静态、动画和交互式图表。高度可定制&a…...

编程日记 2024/5/7 9:24:59

人工智能的发展将如何重塑网络安全

微信搜索关注公众号网络研究观&#xff0c;获取更多信息。 人们很容易认为人工智能 (AI) 真正出现是在 2019 年&#xff0c;当时 OpenAI 推出了 ChatGPT 的前身 GPT-2。 但现实却有些不同。人工智能的基础可以追溯到 1950 年&#xff0c;当时数学家艾伦图灵发表了题为“计算机…...

编程日记 2024/5/7 9:23:54

Prometheus+Grafana多方位监控

PrometheusGrafana多方位监控 契机 ⚙ 最近发现火山引擎有托管的Prometheus,可是当前是邀测阶段。并且发现火山云的ECS是自带开机自启的exporter的。刚好需要搭建一套服务器监控&#xff0c;所以研究了一套Prometheus监控&#xff0c;包含linux主机监控nginx监控es监控rabbitM…...

编程日记 2024/5/7 9:21:30

使用Docker安装Redis

大家好&#xff0c;今天给大家分享一下如何使用docker安装Redis&#xff0c;关于docker的安装和常用命令&#xff0c;大家可以参考下面两篇文章&#xff0c;本文中不做过多描述。 Docker在Windows与CentOS上的安装 Docker常用命令 关于Redis的介绍与常用操作可以参考&#x…...

编程日记 2024/5/7 9:19:19

React 之 Effect与事件（event）（八）

Effect&#xff08;useEffect Hook&#xff09; 在React中&#xff0c;Effect&#xff08;或者更具体地说&#xff0c;useEffect Hook&#xff09;是一个特殊的函数&#xff0c;它允许你在函数组件中执行副作用操作。这些副作用操作可能包括数据获取、手动更改DOM、订阅或取消订…...

编程日记 2024/5/7 9:18:18

网卡的了解

什么是网卡_csdn网卡是什么-CSDN博客 MAC地址&#xff1a;48位串行号&#xff08;独一无二&#xff09; 2^48281 474 976 710 656 10位&#xff1a;10亿 5位&#xff1a;1万 15位&#xff1a;10万亿 网卡就是网络适配器 设置--->网络和Internet--->高级网络设置--->硬…...

编程日记 2024/5/7 9:17:15

邯郸做网站多少钱/广东省最新新闻

一、MVVM原理在Vue2官方文档中没有找到Vue是MVVM的直接证据&#xff0c;但文档有提到&#xff1a;虽然没有完全遵循MVVM模型&#xff0c;但是 Vue 的设计也受到了它的启发&#xff0c;因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。为了感受MVVM模型的…...

编程日记 2024/10/22 7:46:26

wordpress 官网模板/整站快速排名优化

建议刷骨骼权重时先将paint operation绘画操作方式改成替代的方式Replace&#xff0c;然后将Value改为0&#xff0c;将每节骨骼都刷成黑色&#xff0c;也就是都不控制(以免权重控制其他地方一些没注意到的地方)。然后将操作方式paint operation改成add&#xff0c;将Value改为1…...

编程日记 2024/10/22 7:39:21

网站建设方案书 备案/搜索引擎推广的关键词

设计程序完成如下要求&#xff1a; 在中国象棋盘上&#xff0c;对任意位置上放置一个马&#xff0c;均能选择一个合适的路线&#xff0c;使得该棋子能够按照象棋的规则不重复的走过棋盘上的每一位置。 要求&#xff1a; &#xff08;1&#xff09;依次输出走过的各位置的坐…...

编程日记 2024/10/22 7:13:50

下载中心网站开发/域名查询 ip

1、描述JsonInclude(JsonInclude.Include.NON_NULL)标记是jackson包提供的json序列化方法&#xff0c;已经集成于Springboot2.0中&#xff0c;此方法的配置意在可以对实体json序列化的时候进行对应的数值处理。2、使用用注解的方式放在标记类或者属性JsonInclude(JsonInclude.I…...

编程日记 2024/10/22 5:51:24

东莞网站建站公司/怎么让关键词快速上首页

《复变函数》 判断题 1、若函数f(z)在z0解析&#xff0c;则f(z)在z0的某个邻域内可导。&#xff08; &#xff09; 2、如果z0是f(z)的本性奇点&#xff0c;则一定不存在。&#xff08; &#xff09; 3、若函数在D内连续&#xff0c;则u(x,y)与v(x,y)都在D内连续。( ) 4、cos z…...

编程日记 2024/10/22 4:00:02

网站的维护和推广/sem运营

我的电脑:在win7上安装的ubuntu12.04&#xff0c;ubuntu安装在最后一个盘符上了……背景介绍完毕 第1步&#xff0c;启动进入Windows7&#xff0c;修复MBR。 在win7下&#xff0c;点击进入&#xff1a; 开始(Start) -> 全部程序(All Programs) -> 附件(Accessories) 在…...

编程日记 2024/10/22 3:47:49