echarts自定义图表--仪表盘

最新推荐文章于 2025-05-01 23:24:04 发布
最新推荐文章于 2025-05-01 23:24:04 发布
阅读量287 收藏
点赞数 1
分类专栏： ECharts 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/printf_hello/article/details/147593895
版权

在这里插入图片描述
基于仪表盘类型的自定义表盘
在这里插入图片描述

上图为3层结构组成

  • 正常一个仪表盘配置
  • 要在外圈和内圈之间制造一条缝隙间隔 再创建一个仪表盘配置 背景透明 进度条拉满 进度条颜色和数据的背景相同
  • 开始处的线 又一个仪表盘配置 数值固定一个比较小的值
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/echarts@5"></script>
        <style>
            #main {
                width: 200px;
                height: 200px;
                margin: 100px auto;
            }
        </style>
        <style>
            /* 在 CSS 文件中定义自定义字体 */
            @font-face {
                font-family: "MyCustomFont"; /* 自定义字体名称 */
                src: url("public/只含数字.ttf");
                font-weight: normal;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script>
            var chart = echarts.init(document.getElementById("main"));

            const bgColor = "#1F1316";

            chart.setOption({
                backgroundColor: "black",
                series: [
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            // shadowColor: "#fff",
                            // shadowBlur: 10,
                        },
                        progress: {
                            show: true,
                            width: 8,
                            // roundCap: true,
                            overlap: true,
                            itemStyle: {
                                // borderColor: "#fff",
                                // borderWidth: 1,
                                // opacity: 1,
                                // borderType: [5, 10],
                                // borderDashOffset: 5,
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: "#f20075" }, // 渐变起始色
                                        { offset: 1, color: "#ff6666" }, // 渐变结束色
                                    ],
                                },
                                // shadowColor: "#f20075",
                                // shadowBlur: 10,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                // color: [[1, "#1F1016"]], // 背景圆环
                                color: [[1, bgColor]], // 背景圆环
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: "{value}\n%",
                            fontSize: 24,
                            fontFamily: "MyCustomFont",
                            color: "#fff",
                            textShadowColor: "#CB3359",
                            textShadowBlur: 10,
                            textBorderColor: "#CB3359",
                            textBorderWidth: 1,
                            offsetCenter: [0, "0%"],
                        },
                        data: [
                            {
                                value: 49,
                            },
                        ],
                        z: 1,
                    },
                    // 紧贴外圈与背景同色 利用遮蔽下层颜色产生间隔效果
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            color: "",
                        },
                        progress: {
                            show: true,
                            width: 2,
                            itemStyle: {
                                color: bgColor,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                                value: 100,
                            },
                        ],
                        z: 2,
                    },
                    // 开始处齐点
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            color: "",
                        },
                        progress: {
                            show: true,
                            width: 10,
                            itemStyle: {
                                // borderColor: "#fffae5",
                                // borderWidth: 1,
                                // borderType: [5, 10],
                                // borderDashOffset: 5,
                                color: "#fffae5",
                                shadowColor: "#fff",
                                shadowBlur: 5,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                                value: 0.5,
                            },
                        ],
                        z: 3,
                    },
                ],
            });
        </script>
    </body>
</html>
Echarts——自定义仪表盘图表
相濡以沫不如相忘于江湖.
09-16 4590
我个人本身其实没有从事多久大数据可视化开发这方面，碰到那种没见过的图表都会很慌，然而怕什么来什么…给大家看下给到我的设计图长什么样子看到这个图表之后我就去echarts官网上面去找有没有，相必大家也猜到了，那必然是没有的，之后花了很长时间去写这个东西，就想着记录一下，后面工作用到了就不用麻烦了废话不多说了，直接上代码option = {// formatter: "{a} {b} : {c}%", } , series : [ // 最外层蓝色 {
echarts自定义仪表盘样式
weixin_43773218的博客
07-25 3628
注意echartsecharts的背景图片必须是一个dom节点，而不是图片的url。根据大哥的做法，先将图表轴线、label、分割线、隐藏，只保留刻度。然后将axisLine设置showfalse，还要设置opacity才能彻底隐藏底色。这中样式的仪表盘确实难找，找的我脑瓜子嗡嗡响，找了很久很久很久之后，终于让我找到一个差不多的样式。这位大哥写的样式是这样的，感觉稍微改造改造就差不多是我要的效果了，开干！可以根据自己的需求找ui帮忙做图。这次为难我胖虎的是这样子的仪表盘。......
ECharts仪表盘-自定义仪表盘1，附视频讲解与代码下载
欢迎来到我的CSDN博客，专注可视化图表技术前沿。这里汇集了各类可视化图表的详细讲解与源码实现。每篇文章不仅提供详细的配置步骤和技巧，还附有可运行的代码示例及下载链接，助力您快速上手并应用到项目中。
12-30 439
本文详细介绍如何使用ECharts库构建复杂的仪表盘，通过实例展示图表的效果，并提供源码下载和视频讲解链接，帮助读者快速上手并深入理解ECharts图表的实现。
Echarts制作不规则刻度的仪表盘图表,自定义仪表盘刻度值
$
01-30 3706
option = {series: [min: 0,max: 100, // 最大值// value打印出来是按十等分平均分配的值,打印出来就是0,10,20,30,.....90,100// 配合最大值使用,max*0.9 总共十等分,0.9就是前9份// 前9个刻度, 平分min-max所有的值,保留两位小数} else {// 后1个刻度, 原始value是100,我这里直接返回无穷了return '∞';},
使用echarts（三）自定义图表仪表盘
沉睡的博客
12-01 1459
自定义仪表盘 样式如下 代码如下 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 ECharts 文件 -...
echarts自定义仪表盘样式及一些属性了解
qq_53911056的博客
12-11 3145
本文主要对Echarts自定义仪表盘及其一些属性的详细介绍。这里自定义仪表盘主要通过对option对象中的series数组和相关属性进行设置来实现。series里面可用于配置仪表盘的数据系列，包括数据值、指针样式、背景颜色等。其中type属性应设置为'gauge'，以指明这是一个仪表盘图表。graphic是原生图形元素组件......
Echarts-仪表盘
m0_62785037的博客
07-02 859
Echarts-仪表盘案例
ECharts自定义仪表盘
qq_40511157的博客
12-10 3452
实现效果 源代码 html代码 <div class="lui_seal_platform_col_4_3"> <!--3.盖章异常预警仪表盘--> <div class="lui_hr_platform_block_echarts_item"> <div id="seal_warning_gauge"></div>...
Echarts-我的仪表盘
weixin_37343255的博客
11-18 466
Echarts 图表 1、仪表盘 var dataArr = [{ value: 91, name: ‘需量符合度’ }]; var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: ‘#5CF9FE’ // 0% 处的颜色 }, { offset: 0.17, color: ‘#468EFD’ ...
ECharts仪表盘-自定义仪表盘1.rar
12-27
通过学习“ECharts仪表盘-自定义仪表盘1”这个资源包，用户能够掌握如何使用ECharts强大的图表功能，特别是仪表盘的创建和自定义方法。用户能够学会如何编写代码以创建一个或多个仪表盘，设置它们的范围、颜色和动画...
ECharts仪表盘-多标题仪表盘.rar
12-27
使用ECharts创建多标题仪表盘，用户可以自定义每个仪表盘的标题、数据范围、颜色和其他视觉样式。这样不仅可以保持仪表盘在视觉上的一致性，还能根据不同数据的特点灵活调整，增强图表的表现力和易读性。 ECharts...
ECharts仪表盘-仪表盘10.zip
03-13
由于ECharts仪表盘-仪表盘10的文件中仅提供了一个名称“图表”，没有更具体的文件名称列表，因此无法得知该压缩包内具体包含了哪些文件和资源。不过，一般而言，这样的压缩包可能会包含一个或多个HTML文件、...
ECharts仪表盘-仪表盘29.zip
03-13
从文件名称“ECharts仪表盘-仪表盘29.zip”中，我们可以推断出这个压缩包主要关注的是仪表盘图表的实现。仪表盘图表是一种用于展示特定数据值的圆形图表，通过指针和度量刻度直观地表示数值。ECharts提供的仪表盘...
ECharts仪表盘-仪表盘25.zip
03-13
ECharts仪表盘-仪表盘25的相关知识点： ECharts是一个使用JavaScript实现的开源可视化库，它提供了一系列丰富的图表类型，让数据可视化变得简单快捷。仪表盘是ECharts中的一种图表类型，它可以形象地展示数据的进度...
改善WebStorm性能
四荒八极的博客
04-29 1479
默认情况下，WebStorm会在你输入代码时进行分析，并高亮显示当前文件中发现的所有问题。它的主要目标是减少IDE的总体索引时间和CPU使用率，因此请确保在“Settings | Plugins”的“Installed”选项卡上启用了Shared Project Indexes插件。可以转到“Settings | Editor | Inspections”，找到“未使用的全局符号检查（Unused global symbol）”，取消选中。这些插件支持我们大多数用户的应用场景，但你不需要的插件可以禁用。
watch 数组 Vue 3
qq_30049249的博客
05-01 133
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习
Json的知识梦工厂
04-27 747
因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下 我做的这个项目的一些功能，如果最近你也在学习前端，希望这篇文章能帮助到你，大家也可以仿照这个项目，自己尝试着写一些完整的功能，从而提高自己的编程能力。这个项目 使用的技术是vue2 做的。：用户可以在个人中心查看自己的交易记录、发布的商品、参与的圈子、个人信息等，便于管理账户和交易信息。：提供交换物品的功能，用户可以发布自己想交换的物品，并与其他用户进行交换，促进物品的循环利用。
ruoyi-plus Spring Boot + MyBatis 中 BaseEntity 的设计与动态查询实践
最新发布
字节叔叔
05-01 85
通过在BaseEntity中引入和params，我们实现了灵活的动态查询能力，在开发中极大简化了接口参数结构与查询逻辑。同时，也提升了系统的可维护性与扩展性，是开发大型后台系统中常用的技巧之一。如果你正在构建一个基于 Spring Boot + MyBatis 的后台管理系统，不妨考虑将这两个字段纳入你的BaseEntity设计中。
WebXR教学 06 项目4 跳跃小游戏
teacherchen90的博客
04-28 435
【代码】WebXR教学 06 项目4 跳跃小游戏。
微信小程序如何引入echarts组件--实现仪表盘数据
10-16
微信小程序引入Echarts组件实现仪表盘数据的步骤如下： 1. **安装依赖**：首先，你需要在项目中安装ECharts的官方小程序版本，可以使用npm或yarn，命令如下： ```bash npm install echarts@latest wechart-gl 或 yarn add echarts wechart-gl ``` 2. **导入并配置**：在需要使用Echarts的地方，如`index.js`或自定义组件中，引入Echarts库： ```javascript import echarts from 'echarts'; import { init, registerComponent } from 'wechart-gl'; registerComponent('wechart', echarts.init); ``` 3. **创建图表实例**： 创建一个新的`wechart`元素，并配置为仪表盘样式（例如环形图）： ```javascript const chart = init(document.getElementById('your-chart-id'), { type: 'pie', width: '100%', height: '100%' }); ``` 4. **数据绑定与渲染**： 获取到你要显示的数据后，动态更新图表： ```javascript const data = [/* 你的仪表盘数据数组 */]; chart.setOption({ series: [{ name: '数据', data, // ...其他仪表盘系列选项，如百分比、标签等 }] }); ``` 5. **响应数据变化**： 如果数据实时变化，记得监听数据更新并在必要时刷新图表： ```javascript wx.onUpdateRes({ success: () => { if (dataChanged) { chart.setOption({ series: [{ data: newData, }] }); } }}); ``` 6. **样式调整**： 根据需求调整图表的颜色、大小、背景等样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值