使用echarts（三）自定义图表仪表盘

最新推荐文章于 2024-05-31 11:37:45 发布
最新推荐文章于 2024-05-31 11:37:45 发布
阅读量1.1k 收藏 2
点赞数
文章标签： js python java 数据可视化 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz975896590/article/details/119991118
版权

自定义仪表盘

样式如下

代码如下
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <img src="e7a7ddebae2a69f5f92a4ad8648d7ba.png" id="bg_img" style="display:none" />
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {

            tooltip: {
                formatter: '{a} <br/>{b} : {c}M/S'
            },
            // toolbox: {//重置，保存图片
            //     feature: {
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    // center: ["50%", "45%"], // 仪表位置
                    // radius: "80%", //仪表大小
                    radius: 110, //半径
                    startAngle: 240,//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                    endAngle: -60, //结束角度。
                    min: 0,
                    max: 20,
                    //仪表盘轴线相关配置。
                    axisLine: {
                        show: true,//将图表轴线、label、分割线、隐藏，只保留刻度
                        lineStyle: {
                            color: [
                                [1, '#2bbcd9']
                            ],
                            width: 5,//表盘宽度
                            opacity: 1
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: { //指针样式
                        length: '45%'
                    },
                    detail: {
                        show: false
                    }
                },
                {
                    name: '业务指标',
                    type: 'gauge',
                    // center: ["50%", "45%"], // 仪表位置
                    // radius: "80%", //仪表大小
                    radius: 30, //半径
                    startAngle: 300,//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                    endAngle: -59.9, //结束角度。
                    min: 0,
                    max: 20,
                    axisLine: {
                        show: true,//将图表轴线、label、分割线、隐藏，只保留刻度
                        lineStyle: {
                            color: [
                                [1, '#2bbcd9']
                            ],
                            width: 1,//表盘宽度
                            opacity: 1
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: { //指针样式
                        length: '45%'
                    },
                    detail: {
                        show: false
                    }
                },
                {
                    name: '业务指标',
                    type: 'gauge',
                    // center: ["50%", "45%"], // 仪表位置
                    // radius: "80%", //仪表大小
                    radius: 100, //半径
                    startAngle: 240,//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                    endAngle: -60, //结束角度。
                    min: 0,
                    max: 20,
                    detail: { //仪表盘详情，用于显示数据。
                        formatter: '{value}M/S',
                        offsetCenter: [0, 95], // x, y，单位px
                        textStyle: {
                            color: '#2bbbd6',
                            fontSize: 16
                        }
                    },
                    axisLabel: {//刻度标签。
                        show: true,
                        color: "#2abbda",
                        fontSize: 12,
                        distance: 10,//位置  负数会显示在外层
                        formatter: function (v) {
                            return v;
                        },
                    },
                    axisTick: { //刻度样式
                        length: 5,//刻度长度
                        splitNumber: 2,// 增加刻度密度
                        lineStyle: {
                            color: "#fff",
                            // color: {
                            // image: document.getElementById('bg_img'),//刻度背景
                            // repeat: 'no-repeat'
                            // },
                            width: 1
                        },
                    },
                    splitLine: {//分隔线样式
                        show: true,
                        length: 15,
                        lineStyle: {
                            color: "#fff",
                            width: 2
                        },
                    },
                    axisLine: { //仪表盘轴线相关配置。
                        show: true,//将图表轴线、label、分割线、隐藏，只保留刻度
                        lineStyle: {
                            color: [
                                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#2cbbd9'
                                }, {
                                    offset: 0.5,
                                    color: '#37d3a4'
                                }, {
                                    offset: 1,
                                    color: '#71d07f'
                                }

                                ])]
                            ],
                            width: 20,//表盘宽度
                            opacity: 1
                        }
                    },
                    data: [{ value: 10 }]
                },
            ]
        };

        // setInterval(function () {
        option.series[2].data[0].value = (Math.random() * 10).toFixed(2) - 0;
        myChart.setOption(option, true);
        // }, 2000);

    </script>
</body>

</html>

详细参数说明： https://www.w3cschool.cn/echarts_tutorial/

沉、睡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分段仪表盘echarts
HuLuWa1997的博客
09-01 516
option = { series: [{ type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 0.99, splitNumber: 3, // itemStyle: { // normal: { // borderWidth:30, //
html5 echarts汽车仪表盘图表动画特效
04-16
ECharts，作为一个强大的数据可视化库，提供了丰富多样的图表类型以满足不同领域的数据展示需求。其中，汽车仪表盘图表是一种直观、生动的展示方式，尤其适用于监控和展示实时数据。结合HTML5的先进技术，ECharts的汽车仪表盘图表不仅具有出色的视觉效果，还具备丰富的动画特效，为用户带来全新的数据可视化体验。 HTML5作为现代网页开发的基础技术，为ECharts提供了强大的支持。通过HTML5的Canvas或SVG技术，ECharts能够绘制出细腻、流畅的仪表盘图表，使得数据的展示更加生动和直观。同时，HTML5的跨平台特性也确保了ECharts的仪表盘图表能够在各种设备上流畅运行，为用户带来一致的数据可视化体验。 ECharts的汽车仪表盘图表不仅外观精美，还具备丰富的动画特效。当数据发生变化时，仪表盘上的指针会以平滑的动画方式移动到新的位置，使得数据的变化过程一目了然。此外，ECharts还支持自定义动画效果，用户可以根据需求设置不同的动画速度和样式，以满足不同的应用场景。 通过ECharts的汽车仪表盘图表，用户可以轻松监控和展示实时数据。
Echarts表示进度的仪表盘
最新发布
m0_67796383的博客
05-31 193
注：isBoard这个变量是用来控制图列的大小，项目中多次用到这个图列但大小不同。希望对你们有所帮助o(*￣▽￣*)ブ。
自定义仪表盘可动态显示刻度值.rar
07-30
自定义仪表盘可动态显示刻度值.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
配置echarts仪表盘图
qq_44727563的博客
11-13 731
文件 getOptions.js 内容，这里把配置单独写了一个js文件。这里也是参照大佬的配置。话不多说，直接上代码。
基于QT5.6编写Echart动态交互示例（仪表盘）-修改版
06-24
在原有QT编写Echart动态交互示例（仪表盘）进行修改，满足基于Qt5.6版本进行运行，实现C++与javascript之间的数据交互
Echarts解决左右上下边距问题（ 两种方法）
大剑师兰特的GIS世界
02-03 6466
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
echarts饼图+仪表盘设置
real_xiaobai的博客
10-11 627
饼图legend文字颜色： legend: { orient: 'horizontal', left: "10%", top: 'bottom', width: '80%', textStyle: { color:'white'//设置文字颜色 }, data: ['网络调查', '巡检', '神秘顾客', '座谈会', '面访执行'] }, 仪表盘内边距： series: [{ center: [
echarts制作饼状图如何设置不同类别之间有一定间隔？
热门推荐
七侠剑客的博客
12-25 1万+
解决echarts饼状图不同类之间有一定间隔 用echarts制作饼状图时，为了有利于区分不同类别，一般通过设置不同的颜色代表不同的类别即可，但为了进一步体现不同类别之间的区分，可通过设置不同类别之间的间隔来展现。 通过echarts官网API可以发现，可利用图形样式修改，即修改itemStyle的属性去改变，其原理是将饼状图各类之间加个border边框。 itemStyle:{ ...
echanrts 仪表盘 间隔进度条/规律多色进度条
书包的博客
08-25 2735
效果图: const cake:any = document.getElementById(`fault-item-${index}`) const myChart = echarts.init(cake); const option = { backgroundColor: '#000643', //底层色 toolbox: { feature: { restore: {}, saveAsImage: {}
echarts 实例 地图 仪表盘
03-01
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图和仪表盘等多种复杂图表。在“echarts 实例 地图 仪表盘”这个主题中，我们将深入...
echarts汽车仪表盘动画效果
07-24
ECharts是一款由百度开发的免费、开源的JavaScript图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及各种自定义的图形，包括我们这里讨论的仪表盘。在汽车仪表盘动画效果中，ECharts被用来模拟真实的汽车...
echarts 仪表盘设置刻度线离仪表盘的距离_收藏 | 那些高颜值的PowerBI仪表盘都在这里了...
weixin_29124971的博客
12-28 3490
在分析绩效目标达成情况、订单差错率或客户满意度时，仪表盘十分形象，所以在分析报告中经常可以看到它。仪表可视化可以清晰直观的传达信息，帮助我们进行快速决策，在进行特定的目标达成分析时，是一个相对比较理想的视觉效果。在PowerBI默认的视觉对象中，也有一个仪表盘可视化，之前介绍过，非常简约，参考：仪表盘 | PowerBI星球除了默认的仪表盘，在PowerBI中还有很多自定义的仪表对象，简单介绍如下...
ECharts仪表盘(详细示例——附有具体注释)
u012746918的博客
08-19 2968
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 ...
日常记录： 创建自定义样式的 echarts 仪表盘
qq_40206575的博客
11-09 1354
创建自定义样式的echarts仪表盘
echarts自定义仪表盘样式
weixin_43773218的博客
07-25 3275
注意echartsecharts的背景图片必须是一个dom节点，而不是图片的url。根据大哥的做法，先将图表轴线、label、分割线、隐藏，只保留刻度。然后将axisLine设置showfalse，还要设置opacity才能彻底隐藏底色。这中样式的仪表盘确实难找，找的我脑瓜子嗡嗡响，找了很久很久很久之后，终于让我找到一个差不多的样式。这位大哥写的样式是这样的，感觉稍微改造改造就差不多是我要的效果了，开干！可以根据自己的需求找ui帮忙做图。这次为难我胖虎的是这样子的仪表盘。......
Echarts——自定义仪表盘图表
相濡以沫不如相望于江湖，是望着你不是忘了你。
09-16 3813
我个人本身其实没有从事多久大数据可视化开发这方面，碰到那种没见过的图表都会很慌，然而怕什么来什么…给大家看下给到我的设计图长什么样子看到这个图表之后我就去echarts官网上面去找有没有，相必大家也猜到了，那必然是没有的，之后花了很长时间去写这个东西，就想着记录一下，后面工作用到了就不用麻烦了废话不多说了，直接上代码option = {// formatter: "{a} {b} : {c}%", } , series : [ // 最外层蓝色 {
echarts 仪表盘样式
weixin_54106595的博客
03-18 3026
整体效果如下： 基础配置： let evaluation = this.$echarts.init(document.getElementById(id)) evaluation.setOption({ grid: { top: '6%', bottom: '18%', left: '3%', width: '96%', containLabel: true .
echarts 仪表盘
09-14
您好！关于Echarts仪表盘的问题，我可以为您提供一些基本的信息和使用方法。Echarts是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和交互功能。 要创建一个仪表盘，您可以使用Echarts提供的仪表盘（gauge）图表类型。以下是一个简单的示例代码： ```javascript // 引入Echarts库 import echarts from 'echarts'; // 创建一个DOM元素来渲染图表 const chartDom = document.createElement('div'); document.body.appendChild(chartDom); // 初始化图表 const chart = echarts.init(chartDom); // 定义图表的配置项和数据 const option = { series: [ { type: 'gauge', data: [{ value: 50, name: '指标名称' }], }, ], }; // 使用配置项设置图表内容并渲染 chart.setOption(option); ``` 在上面的示例中，我们首先引入Echarts库，然后创建一个DOM元素来渲染图表。接下来，我们初始化图表，定义了一个仪表盘图表的配置项和数据。最后，我们使用`setOption`方法将配置项应用到图表中，并渲染出来。 这只是一个简单的示例，您可以根据自己的需求进一步自定义配置项和数据。Echarts还提供了丰富的配置选项，您可以通过官方文档详细了解每个配置项的使用方法。 希望这个简单的示例能够帮助您开始使用Echarts创建仪表盘！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值