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

发布时间：2023-10-02 15:00

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

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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} 
{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/。**

HTML文档可以包含的内容

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

文本

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

链接

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

图片

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

列表

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

表格

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

表单

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

框架

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

HTML文档格式详细说明

前面介绍了HTML文档的基本格式，下面再做一个详细说明。
HTML文档可以用任何文本编辑器（比如记事本，UltraEdit等）创建，编辑，因为它的内容在本质也只是一些文本。
在HTML文本中，用尖括号括起来的部分称为标签。如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义，也就是说转换字符的原有意义。<应该使用<代替，>则使用>，至于&符号本身,则应该使用&替代（不得不说的是有很多HTML文档没有遵循这个规则，常用的浏览器也都能够分析出&到底是一个转义的开始，还是一个符号，但是这样做是不推荐的）。
标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如（图片）标签有src属性（用于指明图片的地址），width和height属性（用于说明图片的宽度和高度）。HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，这些都是有规定的，知道了这里说的基本知识之后，学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。
标签通常有开始部分和结束部分（也被称为开始标签和结束标签），它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候，有些标签并不包含其它内容（只包括自己的属性，甚至连属性都没有），这种情况下，可以写成类似这样：。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。
某些标签包含的内容中还可以有新的标签，新的标签名甚至可能还可以与包含它的标签的名称相同（哪些标签可以包含标签，可以包含哪些标签也是有规定的）。比如：**

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

在这种情况下，最后出现的标签应该最先结束。
HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用来代表空格。

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

相关推荐