html代码

已于 2024-01-19 08:51:49 修改
阅读量1.2k 收藏 22
点赞数 30
文章标签： html arcgis 前端
于 2024-01-12 16:12:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64180190/article/details/135550584
版权

1、Echart各种图表示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 箱线图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 用于呈现箱线图的容器 -->
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        // 初始化 ECharts 实例
        var chart = echarts.init(document.getElementById('chart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '箱线图示例'
            },
            tooltip: {},
            xAxis: {
                data: ['数据1', '数据2', '数据3', '数据4', '数据5']
            },
            yAxis: {},
            series: [{
                type: 'boxplot',
                data: [
                    [20, 30, 40, 50, 60], // 数据1的箱线图数据，包括最小值、下四分位数、中位数、上四分位数和最大值
                    [35, 40, 50, 55, 70], // 数据2的箱线图数据
                    [25, 35, 45, 50, 65], // 数据3的箱线图数据
                    [30, 35, 40, 50, 55], // 数据4的箱线图数据
                    [20, 30, 40, 45, 55]  // 数据5的箱线图数据
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        chart.setOption(option);
    </script>
</body>
</html>

效果图：

逻辑：

首先，在页面中创建一个div容器，用于显示箱线图。然后，通过引入ECharts的文件，我们可以使用ECharts库的功能。

接下来，通过echarts.init()方法将图表实例化并将其绑定到之前创建的div容器上。

然后，定义了一个配置项对象option，其中包含了图表的标题、提示框、x轴和y轴的配置，以及系列配置。这个示例使用的是箱线图（boxplot）类型的系列。在data属性中，定义了5组数据的箱线图数据，每组数据包括最小值、下四分位数、中位数、上四分位数和最大值。

最后，在调用chart.setOption(option)方法后，图表会根据所指定的配置项和数据来显示出来。

2、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Radar Chart Example</title>
    <style>
        /* 设置图表容器的大小 */
        #chartContainer {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="chartContainer"></div>
    <!-- 引入echarts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.0/dist/echarts-gl.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@1.0.1/dist/echarts-liquidfill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script>
        // 初始化echarts图表
        var myChart = echarts.init(document.getElementById('chartContainer'));

        // 配置雷达图的数据
        var option = {
            title: {
                text: '雷达图示例'
            },
            tooltip: {},
            legend: {
                data: ['预算分配', '实际开销']
            },
            radar: {
                // 雷达图的指示器
                indicator: [
                    { name: '销售', max: 6500 },
                    { name: '管理', max: 16000 },
                    { name: '信息技术', max: 30000 },
                    { name: '客服', max: 38000 },
                    { name: '研发', max: 52000 },
                    { name: '市场', max: 25000 }
                ]
            },
            series: [{
                name: '预算 vs 开销',
                type: 'radar',
                // 数据
                data: [
                    {
                        value: [4200, 3000, 20000, 35000, 50000, 19000],
                        name: '预算分配'
                    },
                    {
                        value: [5000, 14000, 28000, 31000, 42000, 21000],
                        name: '实际开销'
                    }
                ]
            }]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

效果图：

逻辑：

在JavaScript部分，我们通过echarts.init()方法初始化了一个图表实例，并通过document.getElementById()方法获取了图表容器元素。然后，我们定义了一个option对象，其中包括了雷达图的标题、提示框、图例和数据等配置。

最后，我们使用myChart.setOption()方法将配置项应用到图表实例上，从而显示雷达图。

3、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 折线图示例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为图表容器添加一个唯一的 id -->
    <div id="lineChart" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的容器初始化 echarts 实例
        var lineChart = echarts.init(document.getElementById('lineChart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '折线图示例'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['数据1', '数据2']
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '数据1',
                type: 'line',
                data: [120, 200, 150, 80, 70, 110, 130]
            }, {
                name: '数据2',
                type: 'line',
                data: [80, 160, 120, 50, 100, 90, 70]
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        lineChart.setOption(option);
    </script>
</body>
</html>

效果图：

4、

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>简历列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <script type="text/html" id="toolbarDemo">
        </script>
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-sm data-count-edit" lay-event="edit">查看简历</a>
        </script>
        </div>
    </div>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/commons.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            table.render({
                elem: '#currentTableId',
                url: http_txt + '/api/resume',
                method: 'post',
                toolbar: '#toolbarDemo',
                contentType: 'application/json',
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                defaultToolbar: [, {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    { type: "checkbox", width: 50 },
                    { field: 'id', width: 80, title: 'ID', sort: true },
                    { field: 'name', width: 250, title: '简历名称' },
                    { fixed: 'right', title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center" }
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });


            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data

                if (obj.event === 'edit') {
                    window.open(http_txt + data.url, '_blank');
                    return false;
                }
            })
        });
    </script>
</body>

</html>

效果图：

5、Echarts柱状图示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts柱状图示例</title>
    <!-- 引入Echarts的js文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
    <style>
        /* 设置图表容器的大小 */
        #chart {
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 创建一个容器来放置图表 -->
    <div id="chart"></div>

    <script>
        // 获取图表容器
        var chart = document.getElementById('chart');
        // 初始化图表
        var myChart = echarts.init(chart);

        // 配置图表的数据和样式
        var option = {
            // 指定图表的类型
            type: 'bar',
            // 指定图表的标题
            title: {
                text: '柱状图示例'
            },
            // 指定图表的x轴数据
            xAxis: {
                data: ['苹果', '香蕉', '橙子', '西瓜', '葡萄']
            },
            // 指定图表的y轴数据
            yAxis: {},
            // 指定图表的数据
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 3, 2, 4, 1]
            }]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

效果图：

6、Echarts漏斗图示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts漏斗图示例</title>
    <!-- 引入Echarts库 -->
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
    <!-- 绘制漏斗图的容器 -->
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        // 初始化Echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'Echarts漏斗图示例'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            calculable: true,
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    // 设置漏斗图的宽度和高度等属性
                    width: '80%',
                    height: '70%',
                    sort: 'descending',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    // 设置漏斗图的数据
                    data: [
                        {value: 60, name: '访问'},
                        {value: 40, name: '咨询'},
                        {value: 20, name: '订单'},
                        {value: 80, name: '点击'},
                        {value: 100, name: '展现'}
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

效果图：

Echartsk线图示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Echarts K线图</title>
  <!-- 引入 ECharts 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 用一个 div 容器来放置图表 -->
  <div id="chart" style="width: 800px;height: 400px;"></div>

  <script>
    // 初始化图表容器
    var chart = echarts.init(document.getElementById('chart'));

    // 模拟一些随机的K线数据
    var data = [
      [2320.26,2320.26,2287.3,2362.94],
      [2300,2291.3,2288.26,2308.38],
      [2295.35,2346.5,2295.35,2346.92],
      [2347.22,2358.98,2337.35,2363.8],
      [2360.75,2382.48,2347.89,2383.76],
      [2383.43,2385.42,2371.23,2391.82],
      [2377.41,2419.02,2369.57,2421.15],
      [2425.92,2428.15,2417.58,2440.38],
      [2411,2433.13,2403.3,2437.42],
      [2432.68,2334.48,2427.7,2441.73],
      [2430.69,2418.53,2394.22,2433.89],
      [2416.62,2432.4,2414.4,2443.03],
      [2441.91,2421.56,2415.43,2444.8],
      [2420.26,2382.91,2373.53,2427.07],
      [2383.49,2397.18,2370.61,2397.94],
      [2378.82,2325.95,2309.17,2378.82],
      [2322.94,2314.16,2308.76,2330.88],
      [2320.62,2325.82,2315.01,2338.78],
      [2313.74,2293.34,2289.89,2340.71],
      [2297.77,2313.22,2292.03,2324.63],
      [2322.32,2365.59,2308.92,2366.16],
      [2364.54,2359.51,2330.86,2369.65],
      [2332.08,2273.4,2259.25,2333.54],
      [2274.81,2326.31,2270.1,2328.14],
      [2333.61,2347.18,2321.6,2351.44],
      [2340.44,2324.29,2304.27,2352.02],
      [2326.42,2318.61,2314.59,2333.67],
      [2314.68,2310.59,2296.58,2320.96],
      [2309.16,2286.6,2264.83,2333.29],
      [2282.17,2263.97,2253.25,2286.33],
      [2255.77,2270.28,2253.31,2276.22],
      [2269.31,2278.4,2250,2312.08],
      [2267.29,2240.02,2239.21,2276.05],
      [2244.26,2257.43,2232.02,2261.31],
      [2257.74,2317.37,2257.42,2317.86],
      [2318.21,2324.24,2311.6,2330.81],
      [2321.4,2328.28,2314.97,2332],
      [2334.74,2326.72,2319.91,2344.89],
      [2318.58,2297.67,2281.12,2319.99],
      [2299.38,2301.26,2289,2323.48],
      [2273.55,2236.3,2232.91,2273.55]
    ];

    // 将数据转换为Echarts要求的格式
    var kData = data.map(function (item) {
      return [item[1], item[2], item[3], item[0]];
    });

    // 设置图表配置项
    var option = {
      title: {
        text: 'K线图示例'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: {
        type: 'category',
        data: data.map(function (item) {
          return item[0];
        })
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'candlestick',
        data: kData,
        itemStyle: {
          color: '#ec0000',
          color0: '#00da3c',
          borderColor: '#8A0000',
          borderColor0: '#008F28'
        }
      }]
    };

    // 使用刚指定的配置项和数据显示图表
    chart.setOption(option);
  </script>
</body>
</html>

效果图：

后续会持续更新

李浩东@
关注
  • 30
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML代码学习
Tuye的博客
09-09 1452
任务： 请根据给出的需求，在基本模板上完善网页，网页包括首页、登录、注册界面。 实现3个页面功能，页面外观请参考给出的具体图片 首页代码： <html> <body> <h1>各位~注意了，这个页面是...是首页</h1> <p> <center><a href="regis.html" >注册</...
简单的一个html代码
07-01
Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页Html静态网页
html基本代码
09-17
html基本代码,总结了html中所有的标签，很全面
Vue中插入HTML代码的方法
12-03
一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` My name is Pjee <p v-html='text'></p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS ...
2024跨年倒计时html代码（跨年倒计时html代码2024）
01-22
2024跨年倒计时html代码（跨年倒计时html代码2024） 效果演示https://www.denghongyuan.com/html/chunjie/ 倒计时结束时间：2024-02-10 00:00:00 顺计时开始时间：2024-02-10 23:59:59 提示：2024年春节时间是2024年...
Html常见代码
12-25
html初学者使用，便于查找和参考！包含各个标签的主要功能！
快速字符串替换html代码
11-25
html代码编写的网页，可以快速查找，替换掉需要替换的字符串，多个字符串一次性替换完成， 简单方便
Echarts数据可视化 第4章 Echarts可视化图 4.9 箱线图
谢谢你们的关注
03-18 2716
Echarts数据可视化 第4章 Echarts可视化图 4.9 箱线图
Echarts 箱线图的详细配置过程
梁辰兴的博客
05-09 1371
ECharts（百度开源的数据可视化库）提供了丰富的图表类型，其中包括箱线图。箱线图是一种用于展示数据分布情况的图表类型，它可以显示数据的中位数、四分位数、最大值、最小值和异常值等信息。引入ECharts库和主题在HTML文件中引入ECharts库和主题，可以使用CDN或本地文件。-- 引入ECharts库 --> < script src = " https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js " >
深入解析Pyecharts箱型图：多样式展示与数据分析实战
最新发布
一键难忘的博客
01-31 4973
箱形图（Box Plot），又称为盒须图，是一种用于显示一组数据分布情况的统计图表。Pyecharts是一个基于Echarts的Python库，可以轻松地绘制各种交互式图表，包括箱形图。本文将介绍Pyecharts库中绘制箱形图的多种炫酷样式，同时详细说明相关参数，并通过实际代码演示实战操作。
HTML介绍以及常用代码
Xiaohuang的博客
12-05 1万+
HTML
Python数据可视化 Pyecharts 制作 Boxplot 箱线图
热门推荐
Mr数据杨
03-09 3万+
大家好，我是Mr数据杨。想象一下，《三国演义》中的群英荟萃。想像曹操与其谋士郭嘉的对话，郭嘉手上一纸图表，那便是今天我要介绍的Boxplot，即箱形图。箱形图犹如三国之地，基本设置就像三国分野的基本规则。就像三国的战略版图，要有山有水，要有城有池，箱形图也需要坐标轴设置，给出数据的方向，清晰明了。三国里的人物英勇，如关羽的刀，赵云的矛，都是他们独特的象征，而箱形图中的数据项，就像这些英雄的武器一样，各具特色。曹魏的大营好比基础箱线图，冷静而有序，如同曹操严齐的军队。
echarts 箱线图
贵林之恋的博客
08-21 6236
需要多引入一个文件dataTool.js，要不然会报错，下面为dataTool.js的源码： !function(e,t){"object"==typeof exports&amp;&amp;"object"==typeof module?module.exports=t(require("echarts")):"function"==typeof define&amp;&amp;define
vue 前端使用最新版eachrts画箱线图，并修改横坐标为自己需要的内容（附代码）
weixin_51192038的博客
07-25 1018
vue画箱线图
echart自定义图分享之自定百分比的(箱线图/盒须图)
fjxtgdx的博客
05-10 1717
echarts自定义图之自定百分比的(箱线图/盒须图)： 分享一些自己在工作中遇到的非常规图 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因
echarts散点图加趋势线_Excel画带箱线图的散点图
weixin_42427302的博客
12-28 1705
原问题：这个EXCEL图怎么画？包含了散点和误差线。怎么把每个X轴的项目均匀的画在一个图上。？​www.zhihu.com拿到这个问题，首先看图可以拆成四部分：1 多系列散点图。因为每个组的颜色是不同的，所以这是一个多系列的散点图，并且每个系列中每个点的x轴是有微波动的，这就需要我们手动构造x坐标值。2 带水平误差线的上下四分位散点。每个组的上下四分位线，可以用上下四分位点，加水平误差线，然后散点...
HTML代码详解与实例
"html代码大全"文档提供了HTML基础元素和常用属性的详细介绍，帮助用户更好地理解和运用这种标准来构建网页内容。以下是一些关键知识点： 1. 图片插入: 使用`<img>`标签，通过`src`属性指定图片的URL，如`图片地址...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值