用echarts来实现多重环形图

最新推荐文章于 2024-05-15 18:02:09 发布
最新推荐文章于 2024-05-15 18:02:09 发布
阅读量9.4k 收藏 26
点赞数 5
分类专栏： echarts 文章标签： echarts环形图 环形图 用echarts实现环形图效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41619796/article/details/88557332
版权

老规矩先看效果：

然后就是贴代码啦：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script type="text/javascript" src='echarts.js'></script>
</head>
<body>
    <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var BorderWidth = '10';
    //反方向剩下部分的样式
    var placeHolderStyle = {
        normal: {
            label: {
                show: false,
                position: "center"
            },
            labelLine: {
                show: false
            },
            color: "rgba(0,0,0,0)",
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 0
        },
        emphasis: {
            color: "#dedede",
            borderColor: "#dedede",
            borderWidth: 0
        }
    };
    var options = {
        backgroundColor: '#000',
        color: ['#53f1f2', '#4ebefd', '#30ed9d', '#faa234', "#fff"],
        legend: {
            show: true,
            orient:'vertical',
            left:'left',
            top:'middle',
            data: ['正常', '次要', '警告','重要','严重'],
            textStyle:{
                color:'#fff',
                fontSize:16
            }
        },
        series: [{
            name: '正常',
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [100, 101],
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#53f1f2",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 7,
                name: '70%'
            },
             {
                value: 3,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        }, {
            name: '次要',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [80, 81],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#4ebefd",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 6,
                name: '60%'
            }, 
            {
                value: 4,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        },  {
            name: '警告',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [60, 61],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#30ed9d",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 5,
                name: '40%'
            }, 
            {
                value: 5,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        },  {
            name: '重要',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [40, 41],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#faa234",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 5,
                name: '30%'
            }, 
            {
                value: 5,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        }, {
            name: '严重',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: [20, 21],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#fff",
                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                }
            },
            data: [{
                value: 4,
                name: '30%'
            }, 
            {
                value: 6,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        }]
    };
    myChart.setOption(options);
</script>
</html>

 

浩星
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果
03-20
分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标或称为平面直角坐标系）和Bar（柱状图）实现的 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch
echarts 3/4的图 极坐标
weixin_43942866的博客
09-12 176
【代码】echarts 3/4的图 极坐标。
echarts实现多环形图
weixin_47673852的博客
05-15 256
echarts实现多环状图
echarts绘制嵌套环形图(南丁格尔玫瑰图)
Lorrey_的博客
05-17 4470
根据专业总人数和学院总人数绘制嵌套环形图 首先，echarts的基本步骤 引入js，准备容器，初始化实例， <script src="lib/echarts.min.js"></script> <style> .box{ width: 900px; height: 500px; background-color:#BBFFFF; } </style> <
Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）
懂得一千零一种,赋予你失败的方法！
01-04 2070
Echarts — 可视化练习（pie06 — 环形嵌套饼图） 别人想什么，我们控制不了；别人做什么，我们也强求不了。唯一可以做的，就是尽心尽力做好自己的事，走自己的路，按自己的原则，好好生活。即使有人亏待了你，时间也不会亏待你，人生更加不会亏待你！善待别人，就是善待自己。 ----- 摘自知乎 Flask: # -*- coding: utf-8 # @Author : ZYX # @File : pie06_嵌套环形饼图.py # @software: PyChar
HTML5 canvas实现多圆环嵌套统计数据
听海丶的博客
05-03 2500
//js代码     var pTestPassRate1 = $("#pTestPassRate1")[0];     var ctx = pTestPassRate1.getContext("2d");     ctx.lineWidth = 6;    //Background    /*gradient = ctx.createRadialGradient(250, 250, 5, 250...
flask echarts多个环形进度条
Newnotes的博客
06-07 844
<div id="mainjianpai" style="width:100%;height:400%;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('mainjianpai')); myChart.setOption({
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
使用echarts实现四象限散点图
09-02
本教程将详细介绍如何使用ECharts，一个流行的JavaScript库，来实现四象限散点图。 首先，ECharts是百度开发的一款开源的数据可视化库，它提供了丰富的图表类型和高度交互的功能，适合用于网页和移动设备上的数据...
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
Echarts饼图-断开环形图.rar
最新发布
07-04
本文将深入探讨如何使用ECharts库来制作断开的环形图，这种图表在视觉上具有强烈的吸引力，特别适合需要突出特定数据或增加图表可读性的场景。我们将从数据准备到最终的ECharts配置，一步步指导你完成断开环形图的...
使用ECharts实现状态区间图
10-17
主要为大家详细介绍了使用ECharts实现状态区间图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
echarts 实现圆柱体图形.zip
05-14
本篇文章将深入探讨如何使用 ECharts 实现圆柱体图形，以及可能遇到的问题和解决方案。 首先，我们要理解 ECharts 中柱状图的基本原理。柱状图是通过设置 `series` 中的 `type` 为 `'bar'` 来创建的。在默认情况下...
echarts 双折线图 实现 与虚线
05-15
根据提供的信息，我们可以深入探讨如何在 ECharts 中实现双折线图，并且让其中一条折线显示为虚线。此示例代码虽然未完全展示，但已经足够让我们理解其核心概念和技术要点。 ### 一、ECharts 双折线图简介 #### ...
echarts地图飞线实现
06-25
在“echarts地图飞线实现”这个主题中，我们将深入探讨如何使用ECharts来创建动态的地图线行展示，使得数据的流动和交互更加直观、生动。 首先，地图展示是ECharts的一个重要功能。ECharts支持多种地图类型，包括...
echarts 嵌套环形图
give it a try
05-22 2136
下定决心，好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { tooltip: { // trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { data: ['
Echarts 多环饼图实现
weixin_53858977的博客
05-11 891
经两个（或以上）的数据种类，通过radius设置图形的半径堆叠出图形，itemStyle隐藏多余图形等方式渲染出图形大致形状，按自身实际业务场景完成配置后，按对应数据结构注入相应的数据即可实现
uni-app中自定义图表（canvas实现chart图表）开发篇（2）-多圆环进度条
觉醒法师的专栏
05-19 2070
上篇讲了圆环进度条，这里再稍微改进下，将单环改成多环。有兴趣的朋友，可以了解下。 咱们将数组里增加一项，圆环会增加一个，如下图： 可以容纳几个圆环，大家可以根据需求进行微调。 一、创建相应页面 1.1 scss样式代码 .wrap-box{ padding: 0 30rpx; .echart-box{ padding: 15px 0; border-bottom: 1px solid #DDDDDD; .title{ font-size: 32rpx; } .conten
echarts实现多重环形图
09-28
实现多重环形图的方法可以使用Echarts中的Polar（极坐标）和Bar（柱状图）来实现。在Echarts中，可以通过设置多个系列来创建多重环形图。每个系列代表一个环，通过设置各个环的半径、角度和颜色等属性，可以实现多重环形图的效果。 首先，需要引入Echarts库，然后创建一个容器来承载图表。接着，通过配置项来设置图表的样式和数据，其中包括设置多个系列的属性。例如，设置各个环的半径、角度、颜色和数据等。 下面是一个示例代码，展示了如何使用Echarts实现多重环形图： ```javascript // 引入Echarts库 import echarts from 'echarts'; // 创建容器 const chartContainer = document.getElementById('chart-container'); // 初始化图表 const chart = echarts.init(chartContainer); // 配置项 const option = { // 设置图表类型为极坐标 polar: {}, // 设置多个系列，每个系列代表一个环 series: [ { type: 'bar', data: [/* 数据 */], // 设置第一个环的半径和角度 radius: ['0%', '30%'], angle: [0, 360], // 设置第一个环的颜色和样式 itemStyle: { color: 'blue', }, }, { type: 'bar', data: [/* 数据 */], // 设置第二个环的半径和角度 radius: ['30%', '60%'], angle: [0, 360], // 设置第二个环的颜色和样式 itemStyle: { color: 'green', }, }, // 可以继续添加更多的系列 ], }; // 使用配置项生成图表 chart.setOption(option); ``` 使用上述代码，你可以根据自己的需求设置每个环的半径、角度、颜色和数据等属性，从而实现多重环形图。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

浩星

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

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

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

打赏作者

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

抵扣说明：

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

余额充值