echarts 科技仪表盘

最新推荐文章于 2024-04-30 19:12:07 发布
最新推荐文章于 2024-04-30 19:12:07 发布
阅读量295 收藏 1
点赞数
文章标签： echarts 科技 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47133092/article/details/128263385
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
    <style>
        #main {
            width: 306px;
            height: 278px;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        var dataArr = 8;
        option = {
            backgroundColor: '#021434',
            series: [{
                    name: '外层刻度',
                    type: 'gauge',
                    radius: '111%',
                    splitNumber: 10,
                    startAngle: 450,
                    endAngle: 90,
                    z: 5,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 5,
                            color: [
                                [1, '#1087e2']
                            ],
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        splitNumber: 10,
                        lineStyle: {
                            color: 'rgba(0,255,255,0.5)',
                            width: 3
                        },
                        length: 13
                    },
                    splitLine: {
                        show: false,
                    },
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                },
                //  {
                //     name: "最外层圆环",
                //     type: "gauge",
                //     radius: '100%',
                //     splitNumber: 10,
                //     endAngle: '-269.9999',
                //     startAngle: '90',
                //     axisLine: {
                //         lineStyle: {
                //             color: [
                //                 [1, new echarts.graphic.LinearGradient(
                //                     0, 1, 0, 0, [{
                //                         offset: 0,
                //                         color: 'rgba(0,255,255,0)',
                //                     }, {
                //                         offset: 0.5,
                //                         color: 'rgba(0,255,255,1)',
                //                     }, {
                //                         offset: 1,
                //                         color: 'rgba(0,255,255,0)',
                //                     }]
                //                 )],
                //                 [
                //                     1, 'rgba(28,128,245,.0)'
                //                 ]
                //             ],
                //             width: 12

                //         },
                //     },
                //     axisLabel: {
                //         show: false,
                //     },
                //     axisTick: {
                //         show: false,
                //     },
                //     splitLine: {
                //         show: false,
                //     },
                // }, 
                {
                    name: "最外部进度条",
                    type: "gauge",
                    radius: '80%',
                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, new echarts.graphic.LinearGradient(
                                    0, 1, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(0,255,255,0)',
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(0,255,255,0.3)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,255,255,0)',
                                    }]
                                )],
                                [
                                    1, 'rgba(0,255,255,.0)'
                                ]
                            ],
                            width: 5

                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                }, {
                    name: "内部阴影",
                    type: "gauge",
                    radius: '70%',
                    z: 3,
                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 10, new echarts.graphic.LinearGradient(
                                    0, 1, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(0,255,255,0)',
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(0,255,255,0.1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,255,255,1)',
                                    }]
                                )],
                                [
                                    1, 'rgba(28,128,245,.0)'
                                ]
                            ],
                            width: 45,
                        }
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,

                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        formatter: function(value) {
                            if (value !== 0) {
                                return parseInt(value);
                            } else {
                                return 0;
                            }
                        },
                        offsetCenter: [0, 5],
                        textStyle: {
                            fontSize: 14,
                            color: 'white'
                        }
                    },
                    title: { //标题
                        show: false,
                    },
                    data: [{
                        name: 'title',
                        value: dataArr,

                    }],
                    pointer: {
                        show: false,
                    },
                }, {
                    name: '内部圈',
                    type: 'gauge',
                    z: 2,
                    min: 0,
                    max: 10,
                    splitNumber: 10,
                    radius: '70%',
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, 'rgba(0,255,255)']
                            ],
                            width: 6,
                            shadowColor: 'rgba(0,255,255,.5)',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                        }
                    },
                    tooltip: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,

                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        show: false
                    },
                    title: { //标题
                        show: false,
                    },
                    data: [{
                        name: "title",
                        value: dataArr,
                    }],
                    itemStyle: {
                        normal: {
                            color: '#01f4f7'
                        }
                    },
                    pointer: {
                        show: true,
                        length: '80%',
                        radius: '20%',
                        width: 10, //指针粗细
                    },
                    // animationDuration: 4000,
                }, {
                    name: '内部刻度',
                    type: 'gauge',
                    radius: '75%',
                    min: 0, //最小刻度
                    max: 10, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 5,
                            color: [
                                [1, 'white']
                            ],
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: 'rgba(172,207,255,.5)',
                        distance: 8,
                        fontSize: 8,
                        formatter: function(v) {
                            switch (v + '') {
                                case '0':
                                    return '0';
                                case '1':
                                    return '1';
                                case '2':
                                    return '2';
                                case '3':
                                    return '3';
                                case '4':
                                    return '4';
                                case '5':
                                    return '5';
                                case '6':
                                    return '6';
                                case '7':
                                    return '7';
                                case '8':
                                    return '8';
                                case '9':
                                    return '9';
                                case '10':
                                    return '10';
                            }
                        }
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: "rgba(0,255,255,0.5)", //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: 4
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: 8,
                        lineStyle: {
                            color: 'rgba(0,255,255,0.5)', //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                }, { //指针上的圆
                    type: 'pie',
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false,
                    legendHoverLink: false,
                    radius: ['0%', '20%'],
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "#0c244a",
                            },
                        },
                    }]
                }, { //指针上的圆
                    type: 'pie',
                    radius: ['19%', '20%'],
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "#00ffff",
                            },

                        },

                    }],
                }
            ]
        }
        option && myChart.setOption(option);
    </script>
</body>

</html>

城永
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Echarts-themes:闲着没事干做的Echarts主题
07-07
Echarts-themes 闲着没事干做的Echarts主题 第一个为helianthus，现在已经是Echarts线上内置的主题之一了~ 第二个配色方案选了画家威廉·透纳的画。但实际效果没有想象中的要好看。
自己总结的echarts仪表盘
weixin_45832746的博客
04-28 450
【代码】自己总结的echarts仪表盘。
echarts仪表盘指针颜色设置不生效问题
kaka22pato的博客
02-28 226
于是经过反复对比，折腾了好一会，原来颜色被series下data里面的颜色覆盖了，把data里的颜色配置删除就生效了！在series里给指针设置了红色，结果没起作用。
ECharts——之二 表盘占比的显示 ECharts进阶使用 环形图绘制
梦若辰宇的博客
11-30 5201
时间：2018年11月——实践出真知 一、实际效果图 第一种，连接处特写 第二种，连接处特写 两种方法在显示时的思路不太一样，而且两种方法在显示的时候都有一点小瑕疵，也可以说是bug。 二、分析一下 先说第二种：第二种的实现思路是使用两个pie（饼图）进行重叠，将下面的颜色设置浅一点，上面的颜色设置深一点，然后按照顺序声明组件（颜色浅的的先声明，颜色深的后声明）。 再说...
echarts+科技风环形图
weixin_44727080的博客
08-22 1410
前言： echart环形图 效果图： 实现代码： let value = 55.33; let title = '超期率'; let int = value.toFixed(2).split('.')[0]; let float = value.toFixed(2).split('.')[1]; option = { backgroundColor: '#051F54', title: { text: '{a|'+ int +'}{b|.'+ ...
我需要一个炫酷的旋转的echarts图表
weixin_35748962的博客
02-10 492
要制作一个旋转的 echarts 图表，您需要在 JavaScript 代码中使用 echarts 的 API 进行设置。首先，您需要在网页中引入 echarts 库的脚本文件，然后定义一个图表的实例，并向其中添加数据。 接下来，您可以使用 echarts 的配置项来设置图表的样式和布局，包括图表的类型、图表的标题、图例、坐标轴标签等。您也可以使用 echarts 提供的动画效果，为图表添加旋转效...
echarts科技饼图
m0_37780367的博客
01-08 1681
中间饼图，外部加装饰图片，再加360度旋转动画即可实现 var xdata = 60; //接收x数据 var ydata = 85; //接收y数据 var myChart = echarts.init(document.getElementById('chart')); var datas_outer = []; //存放外层颜色小...
旋转的echarts饼图
liuxi_happy的博客
08-23 359
【代码】旋转的echarts饼图。
echart实现地图3d自动旋转效果，领导都喜欢
weixin_43929450的博客
07-05 3380
这块总体来讲不是很难，就是会用到一些平时没用到过的语法，故可能会多花点时间如需完整代码，请联系邮箱 : 1015095073 @qq . com。
基于Echarts实现可视化数据大屏深蓝色科技感物流云数据看板炫酷登录页面模板
HTML网页设计
08-17 1907
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。❤❤❤❤。......
【大数据可视化系列三】echarts科技感环形图
Ann的笔记本
10-24 447
该文章主要实现echarts科技感环形图，用到的是gauges仪表盘图表。
echarts汽车仪表盘动画效果
07-24
echarts汽车仪表盘动画效果是一款基于canvas制作电动汽车仪表盘跳动，仪表盘数据显示，仪表盘车辆信息动效。
ECharts仪表盘实例代码(附源码下载)
09-02
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率...
echarts 实例 地图 仪表盘
03-01
echarts实例，其中包含经典的地图实例可以下钻，也包含了仪表盘实例
Q1营收稳健增长，云从科技如何在“百模大战”的险中求稳？
最新发布
songguocaijing的博客
04-30 366
这一方面体现在业务领域的扩大，比如社会层面，文旅产业的大发展，正在推动这个行业产生更多对创新技术的需求，此外还有银发经济等概念，也在牵动智能服务向生活性应用倾斜，创造更多价值。云从科技的技术基因，对其快速进入大模型腹地起到了巨大的积极作用，它是典型的“原生AI时代”企业——我们将其定义为，并非从其他领域跨界而来，而是一开始就带着AI技术的深度积累，并持续进行产业思维的开拓迭代的企业。也许，大模型时代的AI公司很难找到成功模板，但云从科技的坚定前行，却如明灯照亮了大模型纷争的未来一角。
维态思（上海）环保科技有限公司 | 2024全国水科技大会暨技术装备成果展览会
wangzhiping_1201的专栏
04-25 1096
公司主营小城镇农村污水生态修复、河道水生态修复、雨水生态净化及回用、人工景观湖生态修复、建筑中水生态治理及回用。项目建设地主要分布在全国二十几个省份。
杰发科技AC7840——ADC简介(1)_双路ADC同时使用
刘恩东的博客
04-26 452
Sample里面没有双路的，以为那个规则组只有一个通道，看了外设寄存器才发现，原来他的通道是双路的。
搜维尔科技：如何选择最佳的xsens动作捕捉设备
souvr007的博客
04-25 1079
您已经可以为一名演员使用 MVN Record，而 MVN Animate Plus 支持两名演员，如果您使用 On-Body Recording，MVN Animate Pro 则支持多名甚至无限的演员。通过将 MotionCloud 上的 MVN 处理添加到您的软件，您可以在云中导出和高清重新处理文件。我们的旗舰 MVN Link 套装为您提供更大的范围、更高的更新速率和更低的延迟。如果没有，我们有一些资源供您查看，例如社区对动作捕捉提供商的比较和评论的概述以及由 Xsens 提供支持的产品的概述。
积极应对半导体测试挑战 加速科技助力行业“芯”升级
Dido2021的博客
04-26 564
新兴领域芯片产品性能不断提升、使用场景也更加苛刻，对于芯片的设计和测试都提出了新的挑战，同时也带来了新的机遇。在长时间、高强度的测试环境下，加速科技的解决方案仍能保持稳定的性能，确保测试结果的一致性。同时，加速科技提供一站式的测试服务，包括测试程序开发、测试数据分析等，省心省时省力，帮助我们快速定位问题，大大提升了测试效率。多年来，加速科技持续增高研发投资，突破技术门槛，打造核心竞争力。我们相信，通过不断的技术创新和服务优化，我们的测试解决方案将更好地助力中国“芯”的升级，赋能半导体产业的发展。
使用ECHARTS完成仪表盘的制作
04-27
好的，我可以为您提供一些关于使用ECharts制作仪表盘的指导。 首先，您需要安装ECharts。您可以访问ECharts官方网站（https://echarts.apache.org/zh/index.html）下载最新版本的ECharts或者使用CDN引入。 然后，您需要创建一个HTML文件并引入ECharts。在HTML中创建一个div元素，然后在JavaScript中使用ECharts的API创建一个实例并将其绑定到该div元素。 接下来，您可以使用ECharts的API创建一个仪表盘。ECharts提供了一个Gauge组件用于创建仪表盘。您可以在ECharts文档中查找Gauge组件的详细说明以及示例代码。 在创建仪表盘时，您需要指定仪表盘的各个部分的属性，例如刻度线、指针、标签等。您可以根据自己的需求来调整这些属性，以达到所需的效果。 最后，您需要将数据绑定到仪表盘中。您可以使用ECharts提供的setOption方法来设置仪表盘的数据。在setOption方法中，您需要指定仪表盘的数据以及其他一些属性，例如仪表盘的颜色、最大值、最小值等。 希望这些信息能够帮助您制作一个漂亮的仪表盘！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值