html 玫瑰图 ,拿来直接用,无需下载js包【以把js包改为远程访问】

简介: html 玫瑰图 ,拿来直接用,无需下载js包【以把js包改为远程访问】

每次使用图的时候都要把需要的js包下载下来,导致文件很多,而且有时候很难找。把这些图给大家分享的目的是因为我在需要使用的时候网上的图要不就是需要下载,要不就是不全,最好的也是需要自己下载js包,但是对于学习后端的我们来说上手十分不容易。尤其是课程项目紧张,难道我们还需要去学习前端js,显然这是不现实的,所以我把这些图分享给的大家。全是html文档,复制粘贴就能用【js包写的是动态地址,不用自己下载========》》拿来就用


ok,下面进入正题,这张图在日常的工作学习中都是需要的,可以收藏保存起来微信图片_20220927131724.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="garps" style="width: 400px;height: 500px">
    <script>
        var chart_b859ef36a1b245b2b1eb24efe9b62146 = echarts.init(
            document.getElementById('garps'), 'white', {renderer: 'canvas'});
        var option = {
    backgroundColor: "#0f375f",
    legend: {
        orient: 'horizontal',
        bottom:5,
        data: ['rose1', 'rose2', 'rose3', 'rose4'],    //有数据
        textStyle: {
            color: "#fff",
            fontSize: 16
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [{
        name: '半径模式',
        type: 'pie',
        radius: ['30%', '80%'],
        center: ['40%', '50%'],
        roseType: 'radius',
        data: [{
                value: 1,
                name: 'rose1',
                itemStyle: {
                    color: "#0733F1",
                    borderColor: "#0733F1",
                    show:false
                }
            },
            {
                value: 2,
                name: '1',
                itemStyle: {
                    color: "#00B0E3",
                    borderColor: "#00B0E3"
                }
            },
            {
                value: 3,
                name: 'rose3',
                itemStyle: {
                    color: "#3D61FF",
                    borderColor: "#3D61FF"
                }
            },
            {
                value: 4,
                name: 'rose4',
                itemStyle: {
                    color: "#22E5F1",
                    borderColor: "#22E5F1"
                }
            },
        ],
        label: {
                show: false,
                normal: {
                      formatter: '{d}%',
                    show: true,
                    position: ''
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
    }]
};
    chart_b859ef36a1b245b2b1eb24efe9b62146.setOption(option);
    </script>
</div>
</body>
</html>

引用于菜鸟教程,侵权请联系删除

什么是HTML


HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比"文本"更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。


HTML是什么样的


简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。

下面是一个最简单的HTML文档:

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="http://www.runoob.com/">菜鸟教程</a>!
   </body>
</html> 
**所有的HTML文档都应该有一个<html>标签,<html>标签可以包含两个部分:<head>和<body>。
<head>标签用于包含整个文档的一般信息,比如文档的标题(<title>标签用于包含标题),对整个文档的描述,文档的关键字等等。文档的具体内容就要放在<body>标签里了。
<a>标签用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击<a>标签括起来的内容时,通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<a href="http:///www.runoob.com/">中,href属性的值就是http://www.runoob.com/。**

TML文档可以包含的内容


**通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等。

文本

HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。

链接

链接用来指出内容与另一个页面或当前页面某个地方有关。

图片

图片用于使页面更加美观,或提供更多的信息。

列表

列表用于说明一系列条目是彼此相关的。

表格

表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。

表单

表单通常由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。

框架

框架使页面里能包含其它的页面。


HTML文档格式详细说明


前面介绍了HTML文档的基本格式,下面再做一个详细说明。

HTML文档可以用任何文本编辑器(比如记事本,UltraEdit等)创建,编辑,因为它的内容在本质也只是一些文本。

在HTML文本中,用尖括号括起来的部分称为标签。如果想在正文里使用尖括号(或者大与号小与号,总之是同一个东西),必须使用字符转义,也就是说转换字符的原有意义。<应该使用<代替,>则使用>,至于&符号本身,则应该使用&替代(不得不说的是有很多HTML文档没有遵循这个规则,常用的浏览器也都能够分析出&到底是一个转义的开始,还是一个符号,但是这样做是不推荐的)。

标签本质上是对它所包含的内容的说明,可能会有属性,来给出更多的信息。比如(图片)标签有src属性(用于指明图片的地址),width和height属性(用于说明图片的宽度和高度)。HTML里能使用哪些标签,这些标签分别可以拥有哪些属性,这些都是有规定的,知道了这里说的基本知识之后,学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。

标签通常有开始部分和结束部分(也被称为开始标签和结束标签),它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定,属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候,有些标签并不包含其它内容(只包括自己的属性,甚至连属性都没有),这种情况下,可以写成类似这样:。注意最后的一个空格和一个反斜杠,它说明这个标签已经结束,不需要单独的结束标签了。

某些标签包含的内容中还可以有新的标签,新的标签名甚至可能还可以与包含它的标签的名称相同(哪些标签可以包含标签,可以包含哪些标签也是有规定的)。比如:**

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>


目录
相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
Puppeteer自动化:使用JavaScript定制PDF下载
在现代Web开发中,自动化工具如Puppeteer可显著提升效率并减少重复工作。Puppeteer是一款强大的Node.js库,能够控制无头Chrome或Chromium浏览器,适用于网页快照生成、数据抓取及自动化测试等任务。本文通过示例展示了如何使用Puppeteer自动化生成定制化的PDF文件,并介绍了如何通过配置代理IP、设置user-agent和cookie等技术增强自动化过程的灵活性与稳定性。具体步骤包括安装Puppeteer、配置代理IP、设置user-agent和cookie等,最终生成符合需求的PDF文件。此技术可应用于报表生成、发票打印等多种场景。
Puppeteer自动化:使用JavaScript定制PDF下载
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
8天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
3天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
9 3
|
6天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
15 4
|
5天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
20 0
html5+three.js公路开车小游戏源码
|
14天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
64 6
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
82 1
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
19 5
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
27 4
下一篇
无影云桌面