Vue+Echart实现利用率表盘效果【组件已封装,可直接使用】

简介: Vue+Echart实现利用率表盘效果【组件已封装,可直接使用】

效果演示

当利用超过70%(可以自行设置),表盘变红


组件

里面对应两个图片资源,panelBackground_red.png 和 panelBackground_green.png,请前往百度网盘进行下载。如果喜欢其他颜色,可以使用.psd来修改导出就行。


链接:https://pan.baidu.com/s/12wvEGlKrvjEBFki9YbE3hQ

提取码:fibf


b5eaea683a4c46ee83fbe686ac3f8d23.png


在使用组件之前,记得引入echart组件,可以参考echart组件引入

<template>
    <!-- <div class="titleDiv">占用率</div> -->
    <div id="customGaugeContainer" ref="panel" style="height: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts'
var app = {};
var ROOT_PATH = 'https://echarts.apache.org/examples';
// var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
var _panelImageURL = require("@/assets/panel/panelBackground_green.png");
var _animationDuration = 1000;
var _animationDurationUpdate = 1000;
var _animationEasingUpdate = 'quarticInOut';
//这个不改
var _valOnRadianMax = 100;
//这个不改
var _pointerInnerRadius = 60;
//外轮廓半径
var _outerRadius = 110;
//内轮廓半径
var _innerRadius = 100;
//里面白色远的半径
var _insidePanelRadius = 100;
var _fontSize = 50;
var _currentDataIndex = 0;
var _shadowColor = '#20A53A';
var _textColor = '#20A53A';
var _shadowBlur = 20;
export default {
    name: 'SmartSchedulingSystemCustomGauge',
    props: {
        rate: {
            type: Number
        },
        timeChange: {
            type: Number
        }
    },
    watch: {
        rate: {
            handler(newValue, oldValue) {
                // console.log("刷新表盘数据")
                // console.log("oldValue:" + oldValue)
                // console.log("newValue:" + newValue)
                // console.log("rate:" + this.rate)
                //刷新表盘数据
                this.setOptions();
            },
            deep: true
        },
    },
    data() {
        return {
            myChart: undefined,
            scheduledTask: undefined,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
            window.addEventListener('resize', this.myChart.resize());
            // this.setScheduledTask();
        })
    },
    methods: {
        initChart() {
            let dom = document.getElementById('customGaugeContainer');
            let clientHeight = dom.clientHeight;
            // console.log("clientHeight:" + clientHeight)
            _outerRadius = (clientHeight / 2) * 0.9;
            _innerRadius = (clientHeight / 2) * 0.8;
            _insidePanelRadius = (clientHeight / 2) * 0.8;
            _fontSize = (clientHeight / 2) * 0.3;
            _shadowBlur = (clientHeight / 2) * 0.2;
            // this.myChart = echarts.init(dom, null, {
            //     renderer: 'canvas',
            //     useDirtyRect: false
            // });
            this.myChart = echarts.init(this.$refs.panel);
            this.setOptions();
        },
        setOptions() {
            if (this.rate > 80) {
                _shadowColor = '#F33333';
                _textColor = '#F33333';
                _panelImageURL = require("@/assets/panel/panelBackground_red.png");
            } else {
                _shadowColor = '#20A53A';
                _textColor = '#20A53A';
                _panelImageURL = require("@/assets/panel/panelBackground_green.png");
            }
            let option = {
                animationEasing: _animationEasingUpdate,
                animationDuration: _animationDuration,
                animationDurationUpdate: _animationDurationUpdate,
                animationEasingUpdate: _animationEasingUpdate,
                //数据展示
                dataset: {
                    //100可以看成是百分比
                    source: [[1, this.rate]]
                },
                tooltip: {},
                angleAxis: {
                    type: 'value',
                    startAngle: 0,
                    show: false,
                    min: 0,
                    max: _valOnRadianMax
                },
                radiusAxis: {
                    type: 'value',
                    show: false
                },
                polar: {},
                series: [
                    {
                        type: 'custom',
                        coordinateSystem: 'polar',
                        renderItem: renderItem
                    }
                ]
            };
            if (option && typeof option === 'object') {
                this.myChart.setOption(option);
            }
        },
        /**
              * 设置定时任务
              */
        setScheduledTask() {
            this.scheduledTask = setInterval(function () {
                console.log("rate:" + this.rate)
            }, 2000);
        }
    },
};
function renderItem(params, api) {
    var valOnRadian = api.value(1);
    var coords = api.coord([api.value(0), valOnRadian]);
    var polarEndRadian = coords[3];
    var imageStyle = {
        image: _panelImageURL,
        x: params.coordSys.cx - _outerRadius,
        y: params.coordSys.cy - _outerRadius,
        width: _outerRadius * 2,
        height: _outerRadius * 2
    };
    return {
        type: 'group',
        children: [
            {
                type: 'image',
                style: imageStyle,
                clipPath: {
                    type: 'sector',
                    shape: {
                        cx: params.coordSys.cx,
                        cy: params.coordSys.cy,
                        r: _outerRadius,
                        r0: _innerRadius,
                        startAngle: 0,
                        endAngle: -polarEndRadian,
                        transition: 'endAngle',
                        enterFrom: { endAngle: 0 }
                    }
                }
            },
            // {
            //     type: 'image',
            //     style: imageStyle,
            //     clipPath: {
            //         type: 'polygon',
            //         shape: {
            //             points: makePionterPoints(params, polarEndRadian)
            //         },
            //         extra: {
            //             polarEndRadian: polarEndRadian,
            //             transition: 'polarEndRadian',
            //             enterFrom: { polarEndRadian: 0 }
            //         },
            //         during: function (apiDuring) {
            //             apiDuring.setShape(
            //                 'points',
            //                 makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
            //             );
            //         }
            //     }
            // },
            //白色中心圆
            {
                type: 'circle',
                shape: {
                    cx: params.coordSys.cx,
                    cy: params.coordSys.cy,
                    r: _insidePanelRadius
                },
                style: {
                    fill: '#fff',
                    shadowBlur: _shadowBlur,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    //轮廓阴影颜色
                    shadowColor: _shadowColor
                }
            },
            {
                type: 'text',
                extra: {
                    valOnRadian: valOnRadian,
                    transition: 'valOnRadian',
                    enterFrom: { valOnRadian: 0 }
                },
                style: {
                    text: makeText(valOnRadian),
                    fontSize: _fontSize,
                    fontWeight: 700,
                    x: params.coordSys.cx,
                    y: params.coordSys.cy,
                    //字体颜色
                    fill: _textColor,
                    align: 'center',
                    verticalAlign: 'middle',
                    enterFrom: { opacity: 0 }
                },
                during: function (apiDuring) {
                    apiDuring.setStyle(
                        'text',
                        makeText(apiDuring.getExtra('valOnRadian'))
                    );
                }
            }
        ]
    };
}
function convertToPolarPoint(renderItemParams, radius, radian) {
    return [
        Math.cos(radian) * radius + renderItemParams.coordSys.cx,
        -Math.sin(radian) * radius + renderItemParams.coordSys.cy
    ];
}
function makePionterPoints(renderItemParams, polarEndRadian) {
    return [
        convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
        convertToPolarPoint(
            renderItemParams,
            _outerRadius,
            polarEndRadian + Math.PI * 0.03
        ),
        convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
    ];
}
function makeText(valOnRadian) {
    // Validate additive animation calc.
    if (valOnRadian < -10) {
        alert('illegal during val: ' + valOnRadian);
    }
    return ((valOnRadian / _valOnRadianMax) * 100).toFixed(1) + '%';
}
</script>
<style lang="scss" scoped>
#customGaugeContainer {
    // height: calc(100% - 20px);
    height: 100%;
}
</style>


使用方式

在页面引入组件

使用组件

<customGauge style="height: 150px;" :rate="server.jvm.usage">
</customGauge>


height设置组件的高度

rate属性设置利用率

目录
相关文章
|
9天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
9天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
9天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
3天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
17 8
|
3天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
14天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
15天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
15天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
15天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
15天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
下一篇
无影云桌面