31Echarts仪表盘镂空且导入外来图片

最新推荐文章于 2022-12-16 18:02:51 发布

weixin_30662539

最新推荐文章于 2022-12-16 18:02:51 发布

阅读量282

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10966385.html

版权

镂空效果实现思路：三图叠加。（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" style="height:500px;width:500px"></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'，即仪表盘下方空白；*/
                }]
            },
            {
                type: 'pie',
                radius: ['71%', '79%'],
                startAngle: 317, /*仪表盘下方有空白，这是空白右侧所在角度*/
                color: ['white', 'transparent'],//从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>
```
![图片描述](attimg://article/content/picture/201810/16/093115w0hm29k69mfl6gzg.png)
附：普通仪表盘
```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" style="height:506px;width:1006px"></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}%'},
                splitNumber: 10,/*默认值为10*/
                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: 30/*默认值为30*/
                    }
                },
                data: [{value: 70, name: '完成率'}]
            }
        ]
    };
    totalFlowRate.setOption(option);
</script>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10966385.html

weixin_30662539

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
31Echarts仪表盘镂空且导入外来图片

镂空效果实现思路：三图叠加。（1）仪表盘，画出仪表盘；（2）饼图一，从仪表盘左界开始，顺时针用绿色填充仪表盘整个显示区，用透明填充仪表盘下方空白；（3）饼图二，从仪表盘右界开始，逆时针用白色填充仪表盘部分显示区(这个计算过程较为复杂)，用透明填充整个圆环的其它部分；```html:run<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫