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仪表盘(详细示例——附有具体注释)
故里的博客
08-31 2390
ECharts仪表盘(详细示例——附有具体注释)
使用Echarts3实现渐变仪表盘需求
Future1994的博客
05-05 771
https://segmentfault.com/a/1190000011783585
echarts 仪表盘
qq_43086723的博客
04-12 144
echarts 仪表盘
ECharts 多仪表盘（自动）
qq_61324603的博客
04-07 2663
【代码】ECharts 多仪表盘（自动）
基于echarts 数据可视化大屏展示全国热点分布高亮地图特效
qq_365392777
10-23 2297
前言???? 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，...
Extjs中使用Echarts(自适应)
Ellie
12-07 4195
首先我们需要在extjs中引用echarts 1.index.html文件中引入Echarts<script type="text/javascript" src="js/echarts-min.js"></script> “js/echarts-min.js”替换成自己的echart文件路径;下载的时候根据的自己的需求下载不同的js. 2. 新建一个Panel（其他控件都OK），名字叫做P
echarts 实例 地图 仪表盘
03-01
echarts实例，其中包含经典的地图实例可以下钻，也包含了仪表盘实例
echarts汽车仪表盘动画效果
04-25
echarts汽车仪表盘动画效果是一款基于canvas制作电动汽车仪表盘跳动，仪表盘数据显示，仪表盘车辆信息动效。
ECharts仪表盘实例代码(附源码下载)
12-28
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率...
html5 echarts汽车仪表盘图表动画特效
04-16
ECharts的汽车仪表盘图表不仅外观精美，还具备丰富的动画特效。当数据发生变化时，仪表盘上的指针会以平滑的动画方式移动到新的位置，使得数据的变化过程一目了然。此外，ECharts还支持自定义动画效果，用户可以根据...
Python绘制仪表盘之可视化神器pyecharts
迷茫与徘徊只会让你陷入绝境，欢迎私信博主，带你开始提升变现价值！
02-22 2845
目录 仪表盘 仪表盘模板系列 假期剩余额度 任务完成率 多色仪表盘 仪表盘内部字体添加 每文一语 仪表盘 仪表盘的效果我只能说炫酷而已，如果想要运用在实际的场景中，我其实也不清楚那个场景比较适合，但是pyecharts毕竟是炫酷可视化的利器，炫酷自然也就有它了。 小汽车仪表盘是长这样的，下面我们来看看pyecharts的仪表盘是怎么样子的。 仪表盘模板系列 假期剩余额度 import pyecharts.options as opts from pyecharts..
ECharts——之二 表盘占比的显示 ECharts进阶使用 环形图绘制
梦若辰宇的博客
11-30 5260
时间：2018年11月——实践出真知 一、实际效果图 第一种，连接处特写 第二种，连接处特写 两种方法在显示时的思路不太一样，而且两种方法在显示的时候都有一点小瑕疵，也可以说是bug。 二、分析一下 先说第二种：第二种的实现思路是使用两个pie（饼图）进行重叠，将下面的颜色设置浅一点，上面的颜色设置深一点，然后按照顺序声明组件（颜色浅的的先声明，颜色深的后声明）。 再说...
基于EChars仪表盘创建时钟
weixin_33949359的博客
08-28 530
一、EChars学习官网：http://echarts.baidu.com/ 二、具体实现js脚本： function clock(id){ // 路径配置 require.config( { paths : { echarts : 'js/build/dist' } }); //画图 require( [ 'echarts', 'echarts/chart/g...
ECharts实现数据图表分析及代码
极北三少
08-04 1789
一、ECharts介绍 实现对统计数据的图形分析之前用过JFreeChar，但它是用纯java实现编码繁琐且效果不佳，后来又使用过Fusioncharts 报表工具，它是基于Flash的图表组件、以XML为数据、提供丰富的Flash动画作为图标模板，实现简单效果不错但flash是老东西了且浏览器需要flash插件的支持，更关键的是手机端浏览器基本上不支持。最近看到百度提供一套ECharts（
eCharts制作数据报表
dengwenwei121的专栏
11-20 251
折线堆积面积图: html页面代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt...
Vue+Echarts 项目演练（下）收尾工作图表绘制
dafsq的博客
04-25 933
Vue+Echarts 项目演练（下）收尾工作图表绘制
HTML 中添加视频
qq_34870529的博客
11-21 1335
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
mysql+excel：数据分析----销售情况分析仪表盘
weixin_45441862的博客
12-24 2084
一、介绍 这篇文章的学习来源于网上，将csv文件导入mysql workbench进行数据处理加工，然后通过ODBC驱动程序（网上老师用的是sql server导入，这个方法在导入时就可以仅创建链接以及加载到数据模型）将mysql workbench中加工好的数据表导入excel中，并通过power query将数据表添加到数据模型中以及使用power pivot制作分析仪表盘。 二、业务场景定义 某大型电子设备生产厂商，旗下有四款主力产品，采取总部、大区经理、城市经理的销售管理模式。 具体执行上.
基于Echarts实现大屏数据可视化物虚拟数据统计
热门推荐
HTML网页设计
08-15 1万+
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ...
echarts温度湿度仪表盘
最新发布
05-25
ECharts温度湿度仪表盘是一种基于ECharts的数据可视化组件，可以用于实时显示温度和湿度等环境数据。该组件可以自定义仪表盘的样式，包括仪表盘的大小、颜色、标签和刻度等，还可以自定义数据源和更新频率。通过这个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员小挽

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

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

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

打赏作者

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

抵扣说明：

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

余额充值