镂空效果实现思路：三图叠加。（1）仪表盘，画出仪表盘；（2）饼图一，从仪表盘左界开始，顺时针用绿色填充仪表盘整个显示区，用透明填充仪表盘下方空白；（3）饼图二，从仪表盘右界开始，逆时针用白色填充仪表盘部分显示区(这个计算过程较为复杂)，用透明填充整个圆环的其它部分；```HTML:run<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Echarts仪表盘</Title> <script type="text/JavaScript" src="https://cdn.bootCSS.com/echarts/3.7.1/echarts.Js"></script></head><body><div ID="totalFlowRate" ></div></body></HTML><script type="text/JavaScript"> var totalFlowRate = echarts.init(document.getElementByID(‘totalFlowRate‘)); var option = { serIEs: [ { type: ‘gauge‘,radius: ‘80%‘,min:0,max:100,detail: { formatter: ‘{value}℃‘,color: ‘#000‘,FontWeight: ‘bold‘ },Title: { offsetCenter: [0,‘80%‘] },splitNumber: 10,/*默认值为10*/ axisLabel: { formatter: ‘{value}‘,color: ‘#888‘,distance: -65,/*当取负值时，刻度值在圆圈外；当取正值时，刻度值在圆圈内；*/ FontSize: 15 },axisline: { //仪表盘轴线样式，轴线指的就是那个圆圈 linestyle: { color: [/*指针的颜色默认和它指向的区域颜色是一样的*/ [0,‘‘],/*圆圈0%处为黑色*/ [0.2,‘gray‘],/*圆圈0%-20%之间为灰色*/ [0.4,‘blue‘],/*圆圈20%-40%之间为蓝色*/ [0.6,‘green‘],/*圆圈40%-60%之间为绿色*/ [0.8,‘brown‘],/*圆圈60%-80%之间为棕色*/ [1,‘red‘]/*圆圈80%-100%之间为红色*/ ],wIDth: 0/*圆圈的宽度，默认值为30。为了不干扰三图叠加效果的实现，在这里把圆圈的宽度设为0；正常情况下，此处不应该为0；*/ } },splitline: { show: false },axisTick: { show: false,length: 5 },data: [{ value: 70,name: ‘cpu温度‘ }] },{ type: ‘pIE‘,radius: [‘70%‘,‘80%‘],startAngle: 225,/*仪表盘下方有空白，这是空白左侧所在角度*/ color: [‘green‘,‘transparent‘],//从225度开始，顺时针，整个圆周的[75%为"绿色",25%为"透明"]，可以把 ‘transparent‘换成‘blue‘，来看它的影响范围 hoverAnimation: false,clockwise: true,/*饼图的扇区为顺时针排布。默认为顺时针true*/ label: { normal: { show: false,position: ‘center‘ } },data: [{ value: 75/100/*从225度开始，顺时针方向，整个圆周的75%为绿色‘green‘，即仪表盘上方可填充区域的全部；*/ },{ value: 25/100/*接下来，整个圆周的25%为透明‘transparent‘，即仪表盘下方空白；*/ }] },radius: [‘71%‘,‘79%‘],startAngle: 317,/*仪表盘下方有空白，这是空白右侧所在角度*/ color: [‘white‘,//从317度开始，逆时针，整个圆周的[22.2%为"白色",77.8%为"透明"]，可以把 ‘transparent‘换成‘black‘，来看它的影响范围 hoverAnimation: false,clockwise: false,/*饼图的扇区为逆时针排布。默认为顺时针true*/ itemStyle: {/*鼠标放在仪表盘上方可填充区域时，不会闪烁*/ normal: { bordercolor: ‘transparent‘,/*本层用71%-79%的白色覆盖在下层70%-80%绿色上，下层的绿色轮廓露出*/ borderWIDth: 10/*本层在71%-79%的白色覆盖四周用10px的透明边框将露出的下层轮廓给遮住，可避免下层的绿色闪烁*/ /*另外本层因设置了hoverAnimation: false，所以本层不会闪烁。下层也设置了hoverAnimation: false，为何依旧出现闪烁以致于需要在此处理呢？*/ } },data: [{ value: (266/360)*((100-70)/100) //22.2%。从360份中取出266份(指针可转动角度),再从266份中取出30%(指针右侧空白区域)，即整个圆周的22.2%，设为白色‘#ffffff‘，即仪表盘上方可填充区域的空白部分；在100-70中，100为取值上线，70为当前值，0为取值下线； },{ value: 1 - (266/360)*((100-70)/100) //77.8%。剩余“1-22.2%=77.8%”，即整个圆周的77.8%，设为透明‘transparent‘，即仪表盘上方可填充区域的绿色部分和下方的空白；在100-70中，100为取值上线，70为当前值，0为取值下线； }] } ],graphic: { $action: ‘replace‘,// 5 === 5 ? ‘remove‘ : ‘replace‘,type: ‘image‘,ID: ‘logo‘,left: ‘center‘,top: 130,bounding: ‘raw‘,style: { image: ‘https://cdn.files.qdfuns.com/article/content/picture/201810/16/093115w0hm29k69mfl6gzg.png‘,wIDth: 152,height: 96,opacity: 0.8 } } }; totalFlowRate.setoption(option);</script>```附：普通仪表盘```HTML:run<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Echarts环状图效果</Title> <script type="text/JavaScript" src="https://cdn.bootCSS.com/echarts/3.7.1/echarts.Js"></script></head><body><div ID="totalFlowRate" ></div></body></HTML><script type="text/JavaScript"> var totalFlowRate = echarts.init(document.getElementByID(‘totalFlowRate‘)); var option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" },serIEs: [ { name: ‘业务指标‘,type: ‘gauge‘,detail: {formatter:‘{value}%‘},/*默认值为10*/ axisline: { //仪表盘轴线样式，轴线指的就是那个圆圈 linestyle: { color: [/*指针的颜色默认和它指向的区域颜色是一样的*/ [0,wIDth: 30/*默认值为30*/ } },data: [{value: 70,name: ‘完成率‘}] } ] }; totalFlowRate.setoption(option);</script>``` 总结 以上是内存溢出为你收集整理的31Echarts仪表盘镂空且导入外来图片全部内容，希望文章能够帮你解决31Echarts仪表盘镂空且导入外来图片所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）