Echarts图表之圆形进度条(一)

最新推荐文章于 2024-06-27 10:31:04 发布
最新推荐文章于 2024-06-27 10:31:04 发布
阅读量948 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122561640
版权

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var e = 55;
            var option = {
                color: ['#121c28', '#fecb89'],
                backgroundColor:'rgba(1,202,217,.2)',
                title: {
                    show: true,
                    text: '消防',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: '15',
                        color: '#fecb89',
                        fontWeight: 'normal'
                    }
                },
                // 提示框不显示
                tooltip: {
                    trigger: 'item',
                    formatter: '{e}%',
                    show: false
                },
                legend: {
                    textStyle: {
                        fontSize: 15,
                        color: 'rgba(255,255,255)'
                    },
                },
                series: {
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '50%'],
                    avoidLabelOverLap: true,
                    hoverAnimation: false,
                    // 设置标签不显示
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    // 设置标签线条不显示
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                            value: e,
                            name: ''
                        },
                        {
                            value: 100 - e,
                            name: '消防'
                        }
                    ]
                }
            }
            myChart.setOption(option);
        </script>
    </body>
</html>

gly_technology
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
带进度的圆形进度条,可显示百分比
06-12
带进度的圆形进度条,可显示百分比。可以在统计控球率的时候使用
echarts实现圆形进度条，圆环中心显示进度
圆圆的 JavaScript 博客
11-03 8859
用echarts画圆形进度条，圆环中心显示进度
echarts/自定义 环形进度条，源码+图片 复制运行 自取
最新发布
zhuxiaolong1234的博客
06-27 432
echarts/自定义 环形进度条 动态，源码+图片 复制运行 自取
用echarts实现圆形进度条
qq_37062098的博客
09-18 561
基于vue2的，不过基本能看懂。
echarts 环形进度条
小城小永
06-02 3556
echarts 环形进度条
eachart绘制圆形进度条
weixin_44780502的博客
03-22 966
绘制圆形进度条
react-react组件用于各种圆形方形进度条环形图饼状图等
08-15
例如，创建一个圆形进度条： ```jsx ``` 在这里，`value`属性决定了进度条的填充程度，你可以根据需要动态改变它的值。 4. **自定义样式**："react-super-progress"库允许你通过props来自定义组件的外观。例如...
实心圆形展示报表
01-08
例如，在一个试题系统中，一个大题可能由多个小题组成，每个小题的完成状态可以用圆形进度条来展示，圆心可以标记总分，而圆环的填充程度代表当前得分，这样可以清晰地反映出学生的答题进度和得分分布。 在实际应用...
环形饼状图进度条效果
07-02
环形饼状图是一种常用于数据可视化的方法，它将数据以圆形分布，通过扇形区域的大小来表示各个部分所占整体的比例。在本案例中，“环形饼状图进度条效果”指的是一个动态的、可以展示进度的环形饼状图。这种图表通常...
ylproject.zip
09-30
ECharts与Vue的集成非常方便，可以通过Vue的组件化特性将ECharts图表封装为自定义组件，实现数据驱动图表的更新。在"ylproject"中，可能使用ECharts实现了数据展示或者分析的部分。 最后，提到的“进度条三段动画”...
echarts做圆环渐变进度条
王小森的成长博客
11-17 2830
echarts做圆环渐变进度条
仪表盘进度条HTML5特效
07-24
仪表盘进度条HTML5特效是一款基于HTML5 Canvas制作的自定义三个仪表盘进度条。
echarts圆环进度条效果
前端很忙
12-30 4694
圆形进度条效果
ECharts使用饼图（pie）类型生成圆环进度条
qq_39075021的博客
01-06 5348
效果图1 示例完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js...
ECharts进度条，环饼图，折线图案例记录
lwx931449660的博客
09-14 7348
ECharts 没有提供进度条类型的图表，但是可以根据仪表盘类型修改得到，上图 官方文档请看：ECharts官方配置项文档 上代码： <template> <div class="box-container"> <BoxHeader info="车辆类型" utils="万辆" type="dis" /> <div class="content"> <div class="item_image"> <d..
Echarts实现环形进度图
qq_42372534的博客
04-23 8326
利用Echart的饼状图实现环形进度图： 对于pie饼状图，要从构成上去理解它： 圆心center和半径radius确定一个饼状图，data里的数据就会自动绘制成饼状图，这是最基本的。 饼状图默认是从以直角坐标系上的90°，即正y轴，顺时针画的， startAngle：270,更改起始角度 clockwise:true,表示是顺时针，fals表示逆时针。 option设置如下： 关键点：在于data只能有两个数据，第一个数据就是要显示的数据，显示的label为所占的百分比，formatter就
echarts实现圆形进度图
qq_51558433的博客
11-01 627
【代码】echarts实现圆形进度图。
echart绘制环形进度条
beekim的博客
10-26 603
原型： 实际效果
微信小程序结合echarts完美实现缩放折线图，圆环图，饼图
qq_44713087的博客
12-25 6810
今天做了折线图和饼图，作为一个后端程序员，做前端页面是真难受，在网上找了很多资料和代码，一路磕磕碰碰总算是写出来了。下面我分享给大家，大家直接粘贴就可以了。不用想我一样痛苦了，最起码比我好受点了。 引入echarts组件 为了兼容小程序 Canvas，echarts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载 GitHub 上的项目。点击进入github进行下载...
echarts实现圆形进度条
09-21
要使用echarts实现圆形进度条，可以按照以下步骤进行操作： 1. 引入echarts库，可以通过CDN或下载并引入本地文件。 2. 创建一个容器元素，用来显示echarts图表。 3. 在JavaScript代码中，使用echarts.init方法初始化图表实例，并将容器元素作为参数传入。 4. 定义图表的配置项，包括图表的类型、数据、样式等。 5. 调用chart.setOption方法将配置项应用到图表中，实现圆形进度条的效果。 下面是一个示例代码，演示了如何使用echarts实现圆形进度条： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts Circle Progress</title> <!-- 引入echarts库 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <!-- 创建一个容器元素 --> <div id="chartContainer" style="width: 400px; height: 400px;"></div> <script> // 初始化图表实例 var chart = echarts.init(document.getElementById('chartContainer')); // 定义图表的配置项 var option = { series: [ { type: 'pie', radius: ['75%', '90%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 75, name: '进度'}, {value: 25, name: '剩余'} ] } ] }; // 将配置项应用到图表中 chart.setOption(option); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值