Vue+Echart實現(xiàn)利用率表盤效果的示例代碼
更新時間：2023年04月28日 11:02:52 作者：老丹丘
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實現(xiàn)利用率表盤的效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的可以參考一下
效果演示
組件
里面對應(yīng)兩個圖片資源，panelBackground_red.png 和 panelBackground_green.png，請前往百度網(wǎng)盤進行下載。如果喜歡其他顏色，可以使用.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實現(xiàn)利用率表盤效果的示例代碼的文章就介紹到這了,更多相關(guān)Vue Echart利用率表盤效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的實例代碼
這篇文章主要介紹了vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的實例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的工作或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
在vue-cli的組件模板里使用font-awesome的兩種方法
今天小編就為大家分享一篇在vue-cli的組件模板里使用font-awesome的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
關(guān)于element ui中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element ui中el-cascader的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Vue3設(shè)計思想及響應(yīng)式源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue-autoui自匹配webapi的UI控件的實現(xiàn)
這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
當(dāng)容器有滾動條時,有時需要將滾動條滑到某個位置,下面這篇文章主要給大家介紹了關(guān)于vue控制滾動條滑到某個位置的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
本文通過兩種方法給大家介紹了基于vue插入視頻的方法，每種方法通過實例代碼給大家介紹的都非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12