欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼

 更新時間:2023年04月28日 11:02:52   作者:老丹丘  
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,需要的可以參考一下

效果演示

組件

里面對應(yīng)兩個圖片資源,panelBackground_red.png 和 panelBackground_green.png,請前往百度網(wǎng)盤進(jìn)行下載。如果喜歡其他顏色,可以使用.psd來修改導(dǎo)出就行。

鏈接: https://pan.baidu.com/s/1BmupspRch3aPcqY7l01WYA 提取碼: t3ur

在使用組件之前,記得引入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;
//內(nèi)輪廓半徑
var _innerRadius = 100;
//里面白色遠(yuǎn)的半徑
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("刷新表盤數(shù)據(jù)")
                // console.log("oldValue:" + oldValue)
                // console.log("newValue:" + newValue)
                // console.log("rate:" + this.rate)
                //刷新表盤數(shù)據(jù)
                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,
                //數(shù)據(jù)展示
                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);
            }
        },
        /**
              * 設(shè)置定時任務(wù)
              */
        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設(shè)置組件的高度
  • rate屬性設(shè)置利用率

到此這篇關(guān)于Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼的文章就介紹到這了,更多相關(guān)Vue Echart利用率表盤效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue+render+jsx實(shí)現(xiàn)可編輯動態(tài)多級表頭table的實(shí)例代碼

    vue+render+jsx實(shí)現(xiàn)可編輯動態(tài)多級表頭table的實(shí)例代碼

    這篇文章主要介紹了vue+render+jsx實(shí)現(xiàn)可編輯動態(tài)多級表頭table的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的工作或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • vue實(shí)現(xiàn)圖片上傳功能

    vue實(shí)現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • 在vue-cli的組件模板里使用font-awesome的兩種方法

    在vue-cli的組件模板里使用font-awesome的兩種方法

    今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 關(guān)于element ui中el-cascader的使用方式

    關(guān)于element ui中el-cascader的使用方式

    這篇文章主要介紹了關(guān)于element ui中el-cascader的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue3設(shè)計思想及響應(yīng)式源碼解析

    Vue3設(shè)計思想及響應(yīng)式源碼解析

    這篇文章主要為大家介紹了Vue3設(shè)計思想及響應(yīng)式源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • 在Vue中使用Echarts可視化庫的完整步驟記錄

    在Vue中使用Echarts可視化庫的完整步驟記錄

    這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

    vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

    這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • vue控制滾動條滑到某個位置的方法實(shí)例

    vue控制滾動條滑到某個位置的方法實(shí)例

    當(dāng)容器有滾動條時,有時需要將滾動條滑到某個位置,下面這篇文章主要給大家介紹了關(guān)于vue控制滾動條滑到某個位置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • 基于Vue插入視頻的2種方法小結(jié)

    基于Vue插入視頻的2種方法小結(jié)

    本文通過兩種方法給大家介紹了基于vue插入視頻的方法,每種方法通過實(shí)例代碼給大家介紹的都非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • elementui之封裝下載模板和導(dǎo)入文件組件方式

    elementui之封裝下載模板和導(dǎo)入文件組件方式

    這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12

最新評論