echarts 科技仪表盘

最新推荐文章于 2024-10-17 16:54:35 发布
最新推荐文章于 2024-10-17 16:54:35 发布
阅读量364 收藏 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>

城永
关注
Echarts-themes:闲着没事干做的Echarts主题
07-07
Echarts-themes 闲着没事干做的Echarts主题 第一个为helianthus，现在已经是Echarts线上内置的主题之一了~ 第二个配色方案选了画家威廉·透纳的画。但实际效果没有想象中的要好看。
echarts科技饼图
m0_37780367的博客
01-08 1792
中间饼图，外部加装饰图片，再加360度旋转动画即可实现 var xdata = 60; //接收x数据 var ydata = 85; //接收y数据 var myChart = echarts.init(document.getElementById('chart')); var datas_outer = []; //存放外层颜色小...
【Echarts 实战指南】仪表盘接收动态数据，小白轻松上手
weixin_52814911的博客
10-17 275
ECharts 仪表盘因其强大的数据可视化功能而被广泛应用于多种场景。性能监控、生产监控、设备监控等等。
我需要一个炫酷的旋转的echarts图表
weixin_35748962的博客
02-10 603
要制作一个旋转的 echarts 图表，您需要在 JavaScript 代码中使用 echarts 的 API 进行设置。首先，您需要在网页中引入 echarts 库的脚本文件，然后定义一个图表的实例，并向其中添加数据。 接下来，您可以使用 echarts 的配置项来设置图表的样式和布局，包括图表的类型、图表的标题、图例、坐标轴标签等。您也可以使用 echarts 提供的动画效果，为图表添加旋转效...
echart实现地图3d自动旋转效果，领导都喜欢
weixin_43929450的博客
07-05 4616
这块总体来讲不是很难，就是会用到一些平时没用到过的语法，故可能会多花点时间如需完整代码，请联系邮箱 : 1015095073 @qq . com。
旋转的echarts饼图
liuxi_happy的博客
08-23 561
【代码】旋转的echarts饼图。
html5 echarts仪表盘动画特效特效代码
03-20
ECharts是由百度开发的一个基于JavaScript的开源图表库，它支持多种图表类型，包括柱状图、折线图、饼图以及我们这里提到的仪表盘图表。ECharts的特点在于其丰富的定制选项、良好的性能和对移动设备的良好支持。 在...
echart各种酷炫图表,柱状图,折线图,仪表盘,雷达图.zip
12-12
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、仪表盘和雷达图等，能够帮助开发者轻松地在网页上实现交互式的数据展示。ECharts 的设计思想是轻量级、模块化...
html5 仪表盘
07-25
7. **JavaScript库和框架**：项目中的"JS仪表盘"可能包含了像D3.js、Chart.js、Highcharts、ECharts等JavaScript库，它们专门用于创建各种数据可视化效果，简化了开发过程。 8. **Ajax**：异步JavaScript和XML技术...
vue+echarts水文监测大数据可视化
09-12
基于vue+echarts水文监测大数据可视化平台，自适应布局，蓝色风格UI界面，用仪表盘图表表示当前流速流量，采用echarts中的柱状图，折线图来表示水位，融合流量，降雨量等等，用雷达图表示水质。各种图标展示监测要素...
数据可视化之交互仪表盘设计.pptx
10-14
数据可视化是一种将复杂的数据集转化为清晰、易于理解的视觉表示形式的过程。...利用Echarts图形、Excel照相机功能和电子表格控件，用户可以创建出既美观又实用的可视化仪表盘，提高数据分析的效率和质量。
HTML大屏报表-科技感大屏报表平台-Echarts图表大屏-源码-解压即用.zip
06-21
HTML大屏报表：Echarts大屏源码，即下即用 在这个数据驱动的时代，大屏展示已成为企业展示数据、分析趋势的重要工具。现在，我们为您提供一份精心制作的HTML大屏报表资源包，基于强大的Echarts可视化库，让您轻松构建专业级的数据大屏。 资源特点： 前端技术领先：利用HTML5和CSS3的前沿技术，确保大屏展示流畅、兼容性强，支持多终端访问。 Echarts图表库：集成丰富的图表类型，如折线图、柱状图、饼图等，轻松呈现复杂数据关系。 源码完整：提供完整的源码文件，解压即可使用，无需额外配置，节省开发时间。 即下即用：无需担心技术门槛，简单几步即可将大屏集成到您的项目中，快速实现数据可视化。 无论您是数据分析师、前端开发者还是项目经理，这份资源都将是您打造专业级数据大屏的得力助手。赶快下载体验，让数据以更直观、更专业的方式呈现在您的大屏上吧！
【大数据可视化系列三】echarts科技感环形图
Ann的笔记本
10-24 1302
该文章主要实现echarts科技感环形图，用到的是gauges仪表盘图表。
基于Echarts实现可视化数据大屏深蓝色科技感物流云数据看板炫酷登录页面模板
HTML网页设计
08-17 2186
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。❤❤❤❤。......
带【科技感】的Echarts 图表
weixin_45820444的博客
01-25 1886
echarts脚本在线地址 https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js 引入echarts 脚本后粘贴代码 vue2 代码： <template> <div> <div ref="col-2-row-2" class="col-2-row-2"></div> </div> </template> <script> expo
漏刻有时数据可视化Echarts组件开发(33)：科技感炫酷的环图
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
01-26 242
var labelData = []; var labelData1 = []; for (var i = 0; i < 150; ++i) { labelData.push({ value: 1, name: i, itemStyle: { normal: { color: 'rgba(0,209,228,0)', } } }); } fo.
echarts 大屏可视化_完整的可视化大屏分享，科技感十足，各行业直接就能用
weixin_39654245的博客
11-29 389
你的老板有没有要求过你做一个可视化大屏？或许在你看来，这就是一个无理的需求，很简单啊，做几个动态图表，直接投影到屏幕上不就行了？就算做出来能用数据增长业务吗？不懂为什么要拍脑袋做大屏，难以理解。其实，这真的是片面的看法了，随着技术的进步，可视化大屏肯定会取代以往的可视化报表，而且你有没有想过这种酷炫的大屏，其实并不难，但很有作用。做可视化大屏，Excel肯定不行了，实时更新数据的要求跟不上，vue...
基于Echarts实现可视化数据大屏展示(150套)——制作深蓝色科技感物流云数据看板页面模板
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-06 9683
基于Echarts实现可视化数据大屏展示(150套) 本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 1.超炫150套❤vue/react+echarts❤ 大屏数据可视化展示——点击进入 2.echarts物流云数据看板——点击进入 一、作品演示 Echa
echarts+科技风环形图
weixin_44727080的博客
08-22 1659
前言： 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 改变仪表盘指针
最新发布
10-19
ECharts是一款强大的数据可视化库，用于创建各种图表，包括仪表盘。在ECharts中，改变仪表盘指针通常涉及到配置`radar`图中的`splitLine`属性或者`gauge`图中的`pointer`部分。 如果你正在使用`echarts-gauge`组件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值