html 圆环实现多种颜色,多个圆环时的颜色渲染问题

最新推荐文章于 2024-05-06 09:42:44 发布
最新推荐文章于 2024-05-06 09:42:44 发布
阅读量492 收藏
点赞数
文章标签： html 圆环实现多种颜色

option = {

"legend": {

"show": true,

"selectedMode": false,

"textStyle": {

"color": "#666666",

"fontSize": "12",

"fontFamily": "微软雅黑",

"fontWeight": "normal"

},

"orient": "horizontal",

"x": "center",

"y": "bottom",

"data": [{

"name": "99 memorysdfwegwdf",

"icon": "emptyCircle"

}, {

"name": "50 memorydasdgwedfsd",

"icon": "emptyCircle"

}, {

"name": "50 diskdsdfsdgwewdfefwer",

"icon": "emptyCircle"

}, {

"name": "50 dfsdsdfgwegsdfsdfwef",

"icon": "emptyCircle"

}, {

"name": "50 netsdsdfsgwefgwe",

"icon": "emptyCircle"

}, {

"name": "50 cpuswefsdgsdfsf",

"icon": "emptyCircle"

}, {

"name": "50 cpusdfsadfgwer",

"icon": "emptyCircle"

}, {

"name": "50 disksdfwergewdsdf",

"icon": "emptyCircle"

}, {

"name": "50 dfssdgehdfdsgv",

"icon": "emptyCircle"

}, {

"name": "50 netsxcgfdfbdfsdgfd",

"icon": "emptyCircle"

}]

},

"tooltip": "",

"series": [{

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["10%", "20%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "99 memorysdfwegwdf",

"value": 99,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 1,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["30%", "20%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 memorydasdgwedfsd",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["50%", "20%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 diskdsdfsdgwewdfefwer",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["70%", "20%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 dfsdsdfgwegsdfsdfwef",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["90%", "20%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 netsdsdfsgwefgwe",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["10%", "55%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 cpuswefsdgsdfsf",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["30%", "55%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 cpusdfsadfgwer",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["50%", "55%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 disksdfwergewdsdf",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["70%", "55%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 dfssdgehdfdsgv",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}, {

"type": "pie",

"avoidLabelOverlap": false,

"hoverAnimation": false,

"center": ["90%", "55%"],

"radius": ["50px", "65px"],

"x": "0%",

"labelLine": {

"normal": {

"show": false

}

},

"label": {

"normal": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

},

"emphasis": {

"show": true,

"position": "center",

"formatter": "{c}",

"textStyle": {

"fontSize": 43,

"fontFamily": "Arial",

"fontWeight": "bold"

}

}

},

"symbolSize": 3,

"data": [{

"name": "50 netsxcgfdfbdfsdgfd",

"value": 50,

"itemStyle": {

"normal": {

"color": ""

}

}

}, {

"name": "other",

"value": 50,

"label": {

"normal": {

"show": false

},

"emphasis": {

"show": false

}

},

"itemStyle": {

"normal": {

"color": "#e5e5e5"

},

"emphasis": {

"color": "#e5e5e5"

}

}

}]

}]

}

A Pei
关注
html 圆环实现多种颜色,Echart饼图实现（圆环图）+状态颜色控制
weixin_28308325的博客
06-15 1316
最近做项目遇到了圆环图以及对于图例颜色值的处理，这里做一个记录，分享给大家。UI图长这样：HTML其中，resize-chart是封装的自适应组件JSinitTaskChart() {getTaskStatus({ type: this.taskTimeType }).then(res => {console.log('任务状态', res)if (res) {const color = [...
Android画个颜色渐变的圆环玩玩
热门推荐
hellsam——一步两步一步两步，似大神的步伐
12-21 1万+
先看下最终的效果开始实现新建一个DoughnutView继承View public class DoughnutView extends View { }先重写onMeasure方法，为什么要重写onMeasure方法可以看我的上一篇文章，点这里 /** * 当布局为wrap_content时设置默认长宽 * * @param widthMeasure
javascript+html5实现绘制圆环的方法
10-23
主要介绍了javascript+html5实现绘制圆环的方法,实例分析了javascript实现html5基于canvas绘制圆环的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
html5圆环
Zdmzb的博客
03-22 389
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>圆角边框</title> <style> body{ padding:0; background-color:#f7f7f7; } ...
html圆环（该代码非原创，具体出处已不详）
weixin_34292287的博客
04-16 322
<!doctype><html> <head> <title></title> <meta charset="utf-8"> </head> <style> .circle { width: 200px; ...
在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
weixin_32073537的博客
05-30 920
最近笔者有个需求，需求内容为：一组文字显示在圆环的周围，用户可添加文字，文字围绕着圆环，每个词对应圆环周围的的蓝色小圆点，当用户鼠标放在圆环上方小蓝点时时，实现放射出三角形，再显示出文字，先看看动图效果吧！ ​ ​​如上图所示，当鼠标放在对应蓝色小圆点上时，需要放射出射类似三角形的射线，并在三角形外侧显示对应文字，且小蓝点变小白点。 ​当用户在上方输入内容后，将内容添加至下方的圆环周围。如上图所示...
html5 canvas进度条圆环图表统计动画特效
06-11
6. **颜色和样式**：圆环的颜色和样式可以通过Canvas API的`strokeStyle`属性来设置。这可以用来区分不同阶段的进度，或者根据统计数据的变化来调整视觉表现。 7. **交互性**：虽然描述中没有特别提及，但这样的...
OpenGL实现可交互式调节的MFC圆环渲染
通过以上知识点的综合运用，可以在MFC环境下创建一个包含复杂动态效果和交互功能的圆环渲染程序。这不仅展示了OpenGL的强大绘图能力，还体现了MFC在应用程序开发中的便利性。开发者需要对上述知识点有深入的理解和...
HTML5立体圆环旋转动画特效代码
03-20
此外，可能还使用了CSS3的选择器和伪类，如`:hover`，来触发特定的用户交互，例如当鼠标悬停在圆环上时，增加旋转速度或改变颜色。同时，`animation`属性可以定义自定义的动画，包括动画的持续时间、延迟、次数和...
html5 3D圆环旋转动画特效.zip
08-30
综上所述，这个压缩包中的项目可能会涵盖HTML5的Canvas、WebGL、CSS3动画、3D变换、事件处理以及性能优化等多个方面，通过学习和分析这个示例，开发者可以深入理解并掌握在网页上创建3D动态效果的技术和技巧。
html+css实现圆环进度效果
最新发布
zjbsama的博客
05-06 665
【代码】html+css实现圆环进度效果。
用html语言写一个环形,javascript+html5实现绘制圆环的方法
weixin_42499692的博客
05-30 439
Your browser does not support the HTML5 canvas tag.function yuanhuan(ctx,data,option){var cood=option.cood;var radius=option.radius;var lastpos=pos=0;for(var i=0;ictx.beginPath();ctx.moveTo(cood.x,co...
【HTML】简单制作一个3D动画效果重叠圆环
qq_70814008的博客
04-04 1412
这段HTML和CSS代码描述了一个具有3D动画效果的网页结构。HTML部分定义了一个带有cont类的容器，其中包含了多个带有ac类的子元素。每个子元素都通过CSS变量--a赋予了一个唯一的标识，这些标识将用于控制每个元素的动画和样式。CSS部分首先设置了一些根变量，如，用于后续动画延迟的计算。.ac类的样式定义了子元素的颜色和阴影效果，而.cont类则定义了容器的大小、阴影和自身的动画效果。动画rot是一个简单的旋转动画，使得每个子元素从完全旋转的状态过渡到静止状态。动画rot-cont。
svg在html中自定义圆环,利用svg画圆环进度条的两种方式
weixin_39545805的博客
07-01 2753
本文只要描述利用svg circle标签的实现方法知识点准备(摘自阮一峰老师的网络日志)1.标签SVG 代码都放在顶层标签``之中。下面是一个例子。的width属性和height属性，指定了SVG 图像在` HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位(单位：像素)。如果不指定这两个属性，SVG 图像默认大小是300像素(宽) x 150像素(高)。如果只想展示 SVG 图...
html圆环旋转效果,css制作收缩圆环旋转效果实例代码
weixin_30118919的博客
06-03 626
效果如下所示：收缩旋转圆环css代码：body {background: #372940;}.demo {position: relative;margin: 120px auto;width: 150px;}.loader {position: absolute;opacity: .7;}.loader circle {-webkit-animation: draw 4s infinite ea...
html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
weixin_31776191的博客
06-22 905
是的！你没看错！还是轮播图。这次的JQuery的哟！！CSS代码：/*轮播图 左右按钮 小白点*/#second_div{margin-top: 160px;}.img_box{overflow: hidden;width:100%;height:420px;border:1px solid;position:relative;}.img_box img{width:100%;position:a...
567day(绘制一个圆分成六等分颜色随机.html)
orangecloudy的博客
04-22 1022
《2019年4月25日》【连续 567天】 标题：绘制一个圆分成六等分颜色随机.html； 内容： var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); var w = ctx.canvas.width; var h = ctx.canvas.hei...
html5 canvas实现多重颜色圆环进度条
weixin_30363817的博客
07-30 807
如题，使用canvas实现如图效果，该效果用于手机端，也可以用于支持canvas的PC浏览器 实现思想：在画布上画多重扇圆进行颜色叠加，最后在顶层加上一个白色并且半径最小的圆覆盖，使视觉上形成一个圆环。　　　　　第一层是一个灰色的全圆　　　　　第二层是从12点钟方向顺时针开始画的红色扇圆，当角度=360度时整个圆环都是红色的。　　　　　第三层是从12点钟方向逆时针开始画的橙色扇圆 当红色圆...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值