echarts 受理情况仪表盘

最新推荐文章于 2024-04-12 18:09:28 发布
最新推荐文章于 2024-04-12 18:09:28 发布
阅读量937 收藏 2
点赞数
分类专栏： Echarts 文章标签： echarts echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39403933/article/details/121538688
版权

#效果图
在这里插入图片描述
#上代码

var myRate1 = 10000;
option = {
    backgroundColor: '#031845',
    title: [
        {
            x: '12%',
            bottom: 100,
            text: '应申报',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 30,
                color: '#fff',
            },
        },
        {
            x: '42%',
            bottom: 100,
            text: '已申报',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 30,
                color: '#fff',
            },
        },
        {
            x: '75%',
            bottom: 100,
            text: '未申报',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 30,
                color: '#fff',
            },
        },
    ],
    tooltip: {
        show: true,
    },
    series: [
        {
            type: 'gauge',
            center: ['50%', '55%'], // 默认全局居中
            radius: '50%',
            splitNumber: 10, //刻度数量
            min: 0,
            max: 20000,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [[1, '#03B7C9']],
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#03B7C9',
                    width: 1,
                },
                length: -15,
                splitNumber: 10,
            },
            splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                    color: '#03B7C9',
                },
            },
            axisLabel: {
                distance: -20,
                textStyle: {
                    color: '#03B7C9',
                    fontSize: '15',
                    fontWeight: 'bold',
                },
            },
            pointer: {
                //仪表盘指针
                show: 0,
            },
            detail: {
                show: false,
            },
            data: [
                {
                    name: '',
                    value: myRate1,
                },
            ],
        },
        {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['50%', '55%'], // 默认全局居中
            radius: '45%',
            min: 0,
            max: 10000,
            splitNumber: 0,
            axisLine: {
                // 坐标轴线
                lineStyle: {
                    color: [
                        [0.66, '#dddddd'],
                        [1, '#dddddd'],
                    ], // 属性lineStyle控制线条样式
                    width: 4,
                },
            },

            axisLabel: {
                // 坐标轴小标记
                textStyle: {
                    // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    fontSize: 16,
                    color: 'rgba(30,144,255,0)',
                },
            },
            splitLine: {
                // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: {
                    // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 0,
                    color: '#444',
                },
            },
            pointer: {
                // 分隔线 指针
                color: '#666666',
                width: 0,
                length: 230,
            },
            detail: {
                show: false,
            },
        },
        {
            name: '已申报',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '40%',
            center: ['50%', '55%'], // 默认全局居中

            min: 0,
            max: 10000,

            axisLine: {
                show: false,
                lineStyle: {
                    width: 25,
                    shadowBlur: 0,
                    color: [
                        [0.2, '#00FAFC'],
                        [0.4, '#3BD542'],
                        [0.6, '#E3F424'],
                        [0.8, '#7E48DA'],
                        [1, '#E531A8'],
                    ],
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                length: 20,
            },

            axisLabel: {
                show: false,
            },
            pointer: {
                show: true,
            },
            detail: {
                show: true,
                offsetCenter: [0, '40%'],
                textStyle: {
                    fontSize: 30,
                },
            },
            itemStyle: {
                normal: {
                    color: '#03B7C9',
                },
            },
            data: [
                {
                    value: 19984,
                },
            ],
        },
        {
            type: 'gauge',
            center: ['20%', '55%'], // 默认全局居中
            radius: '35%',
            splitNumber: 10, //刻度数量
            min: 0,
            max: 10000,
            endAngle: 45,
            clockwise: true,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [[1, '#03B7C9']],
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#03B7C9',
                    width: 1,
                },
                length: -15,
                splitNumber: 10,
            },
            splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                    color: '#03B7C9',
                },
            },
            axisLabel: {
                distance: -20,
                textStyle: {
                    color: '#03B7C9',
                    fontSize: '15',
                    fontWeight: 'bold',
                },
            },
            pointer: {
                //仪表盘指针
                show: 0,
            },
            detail: {
                show: false,
            },
            data: [
                {
                    name: '',
                    value: myRate1,
                },
            ],
        },
        {
            type: 'gauge',
            center: ['20%', '55%'], // 默认全局居中
            radius: '30%',
            min: 0,
            max: 10000,
            endAngle: 45,
            splitNumber: 0,
            axisLine: {
                // 坐标轴线
                lineStyle: {
                    color: [
                        [0.66, '#dddddd'],
                        [1, '#dddddd'],
                    ], // 属性lineStyle控制线条样式
                    width: 4,
                },
            },

            axisLabel: {
                // 坐标轴小标记
                textStyle: {
                    // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    fontSize: 16,
                    color: 'rgba(30,144,255,0)',
                },
            },
            splitLine: {
                // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: {
                    // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 0,
                    color: '#444',
                },
            },
            pointer: {
                // 分隔线 指针
                color: '#666666',
                width: 0,
                length: 230,
            },
            detail: {
                show: false,
            },
        },
        {
            name: '应申报',
            type: 'gauge',
            endAngle: 45,
            radius: '25%',
            center: ['20%', '55%'], // 默认全局居中

            min: 0,
            max: 10000,

            axisLine: {
                show: false,
                lineStyle: {
                    width: 25,
                    shadowBlur: 0,
                    color: [
                        [0.2, '#00FAFC'],
                        [0.4, '#3BD542'],
                        [0.6, '#E3F424'],
                        [0.8, '#7E48DA'],
                        [1, '#E531A8'],
                    ],
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                length: 20,
            },

            axisLabel: {
                show: false,
            },
            pointer: {
                show: true,
            },
            detail: {
                show: true,
                offsetCenter: [0, '40%'],
                textStyle: {
                    fontSize: 30,
                },
            },
            itemStyle: {
                normal: {
                    color: '#03B7C9',
                },
            },
            data: [
                {
                    value: 14969,
                },
            ],
        },
        {
            type: 'gauge',
            center: ['80%', '55%'], // 默认全局居中
            radius: '35%',
            splitNumber: 10, //刻度数量
            min: 0,
            max: 10000,
            startAngle: 140,
            endAngle: -45,
            clockwise: true,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [[1, '#03B7C9']],
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#03B7C9',
                    width: 1,
                },
                length: -15,
                splitNumber: 10,
            },
            splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                    color: '#03B7C9',
                },
            },
            axisLabel: {
                distance: -20,
                textStyle: {
                    color: '#03B7C9',
                    fontSize: '15',
                    fontWeight: 'bold',
                },
            },
            pointer: {
                //仪表盘指针
                show: 0,
            },
            detail: {
                show: false,
            },
            data: [
                {
                    name: '',
                    value: myRate1,
                },
            ],
        },
        {
            type: 'gauge',
            center: ['80%', '55%'], // 默认全局居中
            radius: '30%',
            min: 0,
            max: 10000,
            startAngle: 140,
            endAngle: -45,
            splitNumber: 0,
            axisLine: {
                // 坐标轴线
                lineStyle: {
                    color: [
                        [0.66, '#dddddd'],
                        [1, '#dddddd'],
                    ], // 属性lineStyle控制线条样式
                    width: 4,
                },
            },

            axisLabel: {
                // 坐标轴小标记
                textStyle: {
                    // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    fontSize: 16,
                    color: 'rgba(30,144,255,0)',
                },
            },
            splitLine: {
                // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: {
                    // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 0,
                    color: '#444',
                },
            },
            pointer: {
                // 分隔线 指针
                color: '#666666',
                width: 0,
                length: 230,
            },
            detail: {
                show: false,
            },
        },
        {
            name: '未申报',
            type: 'gauge',
            startAngle: 140,
            endAngle: -45,
            radius: '25%',
            center: ['80%', '55%'], // 默认全局居中

            min: 0,
            max: 10000,

            axisLine: {
                show: false,
                lineStyle: {
                    width: 25,
                    shadowBlur: 0,
                    color: [
                        [0.2, '#00FAFC'],
                        [0.4, '#3BD542'],
                        [0.6, '#E3F424'],
                        [0.8, '#7E48DA'],
                        [1, '#E531A8'],
                    ],
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                length: 20,
            },

            axisLabel: {
                show: false,
            },
            pointer: {
                show: true,
            },
            detail: {
                show: true,
                offsetCenter: [0, '40%'],
                textStyle: {
                    fontSize: 30,
                },
            },
            itemStyle: {
                normal: {
                    color: '#03B7C9',
                },
            },
            data: [
                {
                    value: 5015,
                },
            ],
        },
    ],
};
程序员小挽
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts 实例 地图 仪表盘
03-01
echarts实例，其中包含经典的地图实例可以下钻，也包含了仪表盘实例
echarts汽车仪表盘动画效果
04-25
echarts汽车仪表盘动画效果是一款基于canvas制作电动汽车仪表盘跳动，仪表盘数据显示，仪表盘车辆信息动效。
echarts 仪表盘
qq_43086723的博客
04-12 144
echarts 仪表盘
echarts 设置仪表盘数字的位置_全新数字高尔夫独具的特色！外观前卫紧跟潮流...
weixin_39853892的博客
10-22 150
近年来，汽车市场竞争特别激烈，目前国内许多紧凑型家庭轿车都是非常好的合资品牌，一汽-大众进入占据了紧凑型家庭轿车的领域。成为汽车市场的王者，不仅需要卓越的综合实力，还需要独特的特色，高尔夫可以说是大众品牌的主力军。多年来，在汽车市场上口碑甚佳，现在，高尔夫迎来了更新，第八代全新数字高尔夫即将上市。 今天先介绍这辆家轿。全新数字高尔夫，设计非常精致外观方面，全新数字高尔夫采用了最新家族设计语言，整体...
echarts仪表盘进度条、指针动态渐变色显示
stay hungry, stay foolish
05-30 4180
echarts仪表盘进度条、指针动态渐变色显示
echarts仪表盘，柱状图，折线图，趋势图
pleaseprintf的博客
04-12 926
/解决页面刷新canvas画布变大 async loadEcharts(id) {var myChart = echarts . init(document . getElementById(id)) myChart . resize() // 精髓之所在 } ,提示：以下是本篇文章正文内容，下面案例可供参考。
ECharts仪表盘实例代码(附源码下载)
12-28
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用。 效果演示      源码下载 HTML 首先引入Echarts，然后在需要放置图表的地方加上div#myChart，同时给它加上宽度和高度属性。 [removed][removed] Javascript 接下来要
ECharts仪表盘(详细示例——附有具体注释)
故里的博客
08-31 2392
ECharts仪表盘(详细示例——附有具体注释)
vue引入echarts仪表盘样式
真真的博客
05-19 895
option = { series: [ { type: "gauge", center: ["50%", "45%"], // 仪表位置 radius: "80%", //仪表大小 startAngle: 200, //开始角度 endAngle: -20, //结束角度
使用Echarts3实现渐变仪表盘需求
Future1994的博客
05-05 772
https://segmentfault.com/a/1190000011783585
Vue3使用echarts仪表盘（gauge）
Mr Dear的博客
07-07 4554
vue3使用echarts仪表盘
html5 echarts汽车仪表盘图表动画特效
04-16
ECharts的汽车仪表盘图表不仅外观精美，还具备丰富的动画特效。当数据发生变化时，仪表盘上的指针会以平滑的动画方式移动到新的位置，使得数据的变化过程一目了然。此外，ECharts还支持自定义动画效果，用户可以根据...
Echarts散点图与仪表盘的绘制（销售任务完成情况表.xlsx)
2301_81170993的博客
03-27 796
基于销售任务完成情况表，通过绘制散点图分析已购买客户数量与销售额之间的关系代码示例完成绘制。
使用echarts制作仪表盘式进度条
weixin_47102346的博客
08-31 997
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { series: [{ type: 'gauge', boundaryGap: ['0', '100'], radius: [120
仪表盘echarts图（附图与代码）
include_computer的博客
10-12 1388
var datas = { value: 82, title: "任务完成占比", type: 1, radiusType: 1 }; let startAngle=180,endAngle=0; var fontColor = "#00f6f7"; var seriesName = ""; let noramlSize = 16; let state = ""; let center = ["50%", "55%"]; let wqradius = 0, nqra
ECharts漏斗图、雷达图和仪表盘
萤烛末光,增辉日月
09-06 903
了解和使用ECharts漏斗图、雷达图和仪表盘等可视化图表类型。
ECharts 多仪表盘（自动）
qq_61324603的博客
04-07 2665
【代码】ECharts 多仪表盘（自动）
极致呈现系列之：Echarts仪表盘的光影奇迹
九仞山的专栏
06-21 1608
详细介绍了Echarts中的仪表盘组件
echarts实现仪表盘
qq_46056318的博客
02-07 737
官方封装的Chart组件无法直接使用仪表盘，因为不支持gauge类型，所以必须自己创建一个div，然后使用echarts初始化该div。
echarts温度湿度仪表盘
最新发布
05-25
ECharts温度湿度仪表盘是一种基于ECharts的数据可视化组件，可以用于实时显示温度和湿度等环境数据。该组件可以自定义仪表盘的样式，包括仪表盘的大小、颜色、标签和刻度等，还可以自定义数据源和更新频率。通过这个组件，用户可以更加直观地了解当前环境的温湿度情况。 如果您想了解更多关于ECharts温度湿度仪表盘的信息，您可以访问官方网站：https://echarts.apache.org/examples/zh/editor.html?c=gauge。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小挽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值