|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div id="main4" :style="{height:height,width:width}" /> |
|
|
|
<div id="main4" :style="{height:height}" /> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -41,6 +41,18 @@ import resize from '@/views/dashboard/mixins/resize' |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// var ROOT_PATH = 'https://echarts.apache.org/examples/data/asset/img/custom-gauge-panel.png' |
|
|
|
// var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png' |
|
|
|
// var _animationDuration = 1000 |
|
|
|
// var _animationDurationUpdate = 1000 |
|
|
|
// var _animationEasingUpdate = 'quarticInOut' |
|
|
|
// var _valOnRadianMax = 80 |
|
|
|
// var _outerRadius = 80 |
|
|
|
// var _innerRadius = 50 |
|
|
|
// var _pointerInnerRadius = 50 |
|
|
|
// var _insidePanelRadius = 30 |
|
|
|
|
|
|
|
// var _currentDataIndex = 0 |
|
|
|
export default { |
|
|
|
name: 'AcrossEcharts', |
|
|
|
mixins: [resize], |
|
|
|
@ -63,7 +75,16 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chart: null |
|
|
|
chart: null, |
|
|
|
panelImageURL: 'https://echarts.apache.org/examples/data/asset/img/custom-gauge-panel.png', |
|
|
|
animationDuration: 1000, |
|
|
|
animationDurationUpdate: 1000, |
|
|
|
animationEasingUpdate: 'quarticInOut', |
|
|
|
valOnRadianMax: 200, |
|
|
|
outerRadius: 200, |
|
|
|
innerRadius: 170, |
|
|
|
pointerInnerRadius: 40, |
|
|
|
insidePanelRadius: 140 |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -82,151 +103,167 @@ export default { |
|
|
|
window.addEventListener('resize', this.__resizeHandler) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
renderItem(params, api) { |
|
|
|
var valOnRadian = api.value(1) |
|
|
|
var coords = api.coord([api.value(0), valOnRadian]) |
|
|
|
var polarEndRadian = coords[3] |
|
|
|
var imageStyle = { |
|
|
|
image: this.panelImageURL, |
|
|
|
x: params.coordSys.cx - this.outerRadius, |
|
|
|
y: params.coordSys.cy - this.outerRadius, |
|
|
|
width: this.outerRadius * 2, |
|
|
|
height: this.outerRadius * 2 |
|
|
|
} |
|
|
|
return { |
|
|
|
type: 'group', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
type: 'image', |
|
|
|
style: imageStyle, |
|
|
|
clipPath: { |
|
|
|
type: 'sector', |
|
|
|
shape: { |
|
|
|
cx: params.coordSys.cx, |
|
|
|
cy: params.coordSys.cy, |
|
|
|
r: this.uterRadius, |
|
|
|
r0: this.innerRadius, |
|
|
|
startAngle: 0, |
|
|
|
endAngle: -polarEndRadian, |
|
|
|
transition: 'endAngle', |
|
|
|
enterFrom: { endAngle: 0 } |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'image', |
|
|
|
style: imageStyle, |
|
|
|
clipPath: { |
|
|
|
type: 'polygon', |
|
|
|
shape: { |
|
|
|
points: this.makePionterPoints(params, polarEndRadian) |
|
|
|
}, |
|
|
|
extra: { |
|
|
|
polarEndRadian: polarEndRadian, |
|
|
|
transition: 'polarEndRadian', |
|
|
|
enterFrom: { polarEndRadian: 0 } |
|
|
|
}, |
|
|
|
during: function(apiDuring) { |
|
|
|
apiDuring.setShape( |
|
|
|
'points', |
|
|
|
this.makePionterPoints(params, apiDuring.getExtra('polarEndRadian')) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'circle', |
|
|
|
shape: { |
|
|
|
cx: params.coordSys.cx, |
|
|
|
cy: params.coordSys.cy, |
|
|
|
r: this.insidePanelRadius |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: '#fff', |
|
|
|
shadowBlur: 25, |
|
|
|
shadowOffsetX: 0, |
|
|
|
shadowOffsetY: 0, |
|
|
|
shadowColor: 'rgba(76,107,167,0.4)' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
extra: { |
|
|
|
valOnRadian: valOnRadian, |
|
|
|
transition: 'valOnRadian', |
|
|
|
enterFrom: { valOnRadian: 0 } |
|
|
|
}, |
|
|
|
style: { |
|
|
|
text: this.makeText(valOnRadian), |
|
|
|
fontSize: 30, |
|
|
|
fontWeight: 700, |
|
|
|
x: params.coordSys.cx, |
|
|
|
y: params.coordSys.cy, |
|
|
|
fill: 'rgb(0,50,190)', |
|
|
|
align: 'center', |
|
|
|
verticalAlign: 'middle', |
|
|
|
enterFrom: { opacity: 0 } |
|
|
|
}, |
|
|
|
during: function(apiDuring) { |
|
|
|
apiDuring.setStyle( |
|
|
|
'text', |
|
|
|
this.makeText(apiDuring.getExtra('valOnRadian')) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
makeText(valOnRadian) { |
|
|
|
// Validate additive animation calc. |
|
|
|
if (valOnRadian < -10) { |
|
|
|
alert('illegal during val: ' + valOnRadian) |
|
|
|
} |
|
|
|
return ((valOnRadian / this.valOnRadianMax) * 100).toFixed(0) + '%' |
|
|
|
}, |
|
|
|
convertToPolarPoint(renderItemParams, radius, radian) { |
|
|
|
return [ |
|
|
|
Math.cos(radian) * radius + renderItemParams.coordSys.cx, |
|
|
|
-Math.sin(radian) * radius + renderItemParams.coordSys.cy |
|
|
|
] |
|
|
|
}, |
|
|
|
makePionterPoints(renderItemParams, polarEndRadian) { |
|
|
|
return [ |
|
|
|
this.convertToPolarPoint(renderItemParams, this.outerRadius, polarEndRadian), |
|
|
|
this.convertToPolarPoint( |
|
|
|
renderItemParams, |
|
|
|
this.outerRadius, |
|
|
|
polarEndRadian + Math.PI * 0.03 |
|
|
|
), |
|
|
|
this.convertToPolarPoint(renderItemParams, this.pointerInnerRadius, polarEndRadian) |
|
|
|
] |
|
|
|
}, |
|
|
|
drawChart() { |
|
|
|
const chartDom = document.getElementById('main4') |
|
|
|
this.chart = echarts.init(chartDom, 'macarons') |
|
|
|
this.chart = echarts.init(chartDom) |
|
|
|
let option = null |
|
|
|
option = { |
|
|
|
// title: { // 标题组件 |
|
|
|
// text: '80%', |
|
|
|
// subtext: '', |
|
|
|
// itemGap: 10, // 上下标题间距 |
|
|
|
// textStyle: { |
|
|
|
// color: '#000', // 文字颜色 |
|
|
|
// fontStyle: 'normal', // 字体风格：'normal','italic','oblique' |
|
|
|
// fontWeight: 'bold', // 字体粗细 ：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ... |
|
|
|
// fontSize: 30 // 字体大小 |
|
|
|
// }, |
|
|
|
// subtextStyle: { |
|
|
|
// color: '#000', // 文字颜色 |
|
|
|
// fontStyle: 'normal', // 字体风格：'normal','italic','oblique' |
|
|
|
// fontSize: 18 // 字体大小 |
|
|
|
// }, |
|
|
|
// x: 'center', // 设置标题居中 |
|
|
|
// // y: 'center', |
|
|
|
// bottom: 40 |
|
|
|
// }, |
|
|
|
tooltip: { |
|
|
|
formatter: '{a} <br/>{b} : {c}' |
|
|
|
animationEasing: this.animationEasingUpdate, |
|
|
|
animationDuration: this.animationDuration, |
|
|
|
animationDurationUpdate: this.animationDurationUpdate, |
|
|
|
animationEasingUpdate: this.animationEasingUpdate, |
|
|
|
dataset: { |
|
|
|
source: [[1, 156]] |
|
|
|
}, |
|
|
|
tooltip: {}, |
|
|
|
angleAxis: { |
|
|
|
type: 'value', |
|
|
|
startAngle: 0, |
|
|
|
show: false, |
|
|
|
min: 0, |
|
|
|
max: this.valOnRadianMax |
|
|
|
}, |
|
|
|
radiusAxis: { |
|
|
|
type: 'value', |
|
|
|
show: false |
|
|
|
}, |
|
|
|
polar: {}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '业务指标', |
|
|
|
type: 'gauge', |
|
|
|
startAngle: 90, // 仪表盘开始角度（设置背景圆的角度） |
|
|
|
endAngle: 180, // 仪表盘结束角度 |
|
|
|
radius: '100%', // 圆大小（仪表盘半径） |
|
|
|
clockwise: true, // 仪表盘刻度是否是顺时针增长 |
|
|
|
axisLine: { // 仪表盘轴线样式 |
|
|
|
show: true, |
|
|
|
roundCap: false, |
|
|
|
clip: false, |
|
|
|
lineStyle: { |
|
|
|
width: 20, |
|
|
|
color: [[1, '#F1F2F6']] |
|
|
|
// color: [[0.3, 'rgb(26,143,255)'], [0.5, 'rgb(23,151,255)'], [0.7, 'rgb(13,213,253)'], [0.8, 'rgb(9,237,253)'], [1, 'rgb(70,100,144)']] |
|
|
|
// opacity: 0.6, //盘的颜色变成透明 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { // 分割线样式,是大分割线 |
|
|
|
show: false |
|
|
|
}, |
|
|
|
// 刻度线 |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
// data: [{ value: '80' }], |
|
|
|
markPoint: { |
|
|
|
show: false, |
|
|
|
symbol: 'circle', |
|
|
|
symbolSize: 0, |
|
|
|
data: [ |
|
|
|
// 跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样 |
|
|
|
{ value: '', x: 'center', y: 'center', itemStyle: { color: '#000' }} |
|
|
|
], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
color: '#000', // 气泡中字体颜色 |
|
|
|
fontSize: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
detail: { // 仪表盘详情，用于显示数据。(仪表盘的数值字体样式和显示位置) |
|
|
|
show: true, // 是否显示详情,默认 true。 |
|
|
|
offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。 |
|
|
|
color: '#000', // 文字的颜色,默认 auto。 |
|
|
|
fontSize: 10, // 文字的字体大小,默认 15。 |
|
|
|
formatter: '{value}' // 格式化函数或者字符串 |
|
|
|
}, |
|
|
|
pointer: { // 仪表盘指针。 |
|
|
|
show: false, // 是否显示指针,默认 true。 |
|
|
|
length: '60%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。 |
|
|
|
width: 15 // 指针宽度,默认 8。 |
|
|
|
}, |
|
|
|
itemStyle: { // 仪表盘指针样式。 |
|
|
|
color: '#0066FF', // 指针颜色，默认(auto)取数值所在的区间的颜色 |
|
|
|
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|
|
|
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。 |
|
|
|
borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。 |
|
|
|
borderColor: '#000', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。 |
|
|
|
// shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|
|
|
shadowColor: '#000' // 阴影颜色。支持的格式同color。 |
|
|
|
}, |
|
|
|
// 进度设置 |
|
|
|
progress: { |
|
|
|
show: true, |
|
|
|
overlap: false, // 多组数据时进度条是否重叠 |
|
|
|
roundCap: true, // 是否在两端显示成圆形 |
|
|
|
clip: false, // 是否裁掉超出部分 |
|
|
|
// 进度条样式 |
|
|
|
itemStyle: { |
|
|
|
borderWidth: 10, |
|
|
|
shadowColor: '', |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: this.startColor // 0% 处的颜色 '#02C77E' |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: this.endColor // 100% 处的颜色 '#017770' |
|
|
|
} |
|
|
|
], |
|
|
|
global: false // 缺省为 false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 21, |
|
|
|
name: 'CPU占比', |
|
|
|
title: {}, |
|
|
|
detail: { |
|
|
|
// 中心title设置 |
|
|
|
offsetCenter: ['0%', '0%'], |
|
|
|
color: '#01F8FF', |
|
|
|
formatter: '{value}%' |
|
|
|
// borderColor: '#01F8FF', |
|
|
|
// borderRadius: 20, |
|
|
|
// borderWidth: 1, |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
type: 'custom', |
|
|
|
coordinateSystem: 'polar', |
|
|
|
renderItem: this.renderItem |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
var _this = this |
|
|
|
setInterval(function() { |
|
|
|
var nextSource = [[1, Math.round(Math.random() * this.valOnRadianMax)]] |
|
|
|
_this.chart.setOption({ |
|
|
|
dataset: { |
|
|
|
source: nextSource |
|
|
|
} |
|
|
|
}) |
|
|
|
}, 3000) |
|
|
|
option && this.chart.setOption(option) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -234,141 +271,5 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.dashboard-editor-container { |
|
|
|
padding: 20px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.chart-wrapper { |
|
|
|
height: calc(100% - 55px); |
|
|
|
} |
|
|
|
} |
|
|
|
@media (max-width: 1024px) { |
|
|
|
.chart-wrapper { |
|
|
|
padding: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.progress-right-item{ |
|
|
|
width:100%; |
|
|
|
height: calc(100% / 2); |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.progress-right-txt{ |
|
|
|
position: relative; |
|
|
|
color: #545B65; |
|
|
|
font-size: 14px; |
|
|
|
padding-left: 12px; |
|
|
|
margin-right: 50px; |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
font-size: 20px; |
|
|
|
color: #0C0E1E; |
|
|
|
padding-top: 4px; |
|
|
|
i{ |
|
|
|
display: inline-block; |
|
|
|
font-size: 12px; |
|
|
|
color: #A6ADB6; |
|
|
|
} |
|
|
|
} |
|
|
|
&::before{ |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 50%; |
|
|
|
content: ''; |
|
|
|
width: 4px; |
|
|
|
height: 50px; |
|
|
|
background: linear-gradient(180deg, #FF9B3B 0%, #F7BA1E 100%); |
|
|
|
border-radius: 100px; |
|
|
|
transform: translateY(-50%); |
|
|
|
} |
|
|
|
&.right-txt1{ |
|
|
|
&::before{ |
|
|
|
background: linear-gradient(180deg, #FF9B3B 0%, #F7BA1E 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
&.right-txt2{ |
|
|
|
&::before{ |
|
|
|
background: linear-gradient(180deg, #14C9C9 0%, #83DBAD 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.progress-class { |
|
|
|
position: relative; |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
margin: 0 100px; |
|
|
|
::v-deep svg > path:nth-child(2) { |
|
|
|
stroke: url(#red); |
|
|
|
} |
|
|
|
::v-deep .el-progress-circle{ |
|
|
|
border-radius: 50%; |
|
|
|
// box-shadow: 0 12px 12px #FEF1F3; |
|
|
|
box-shadow: 0 6px 8px #D9F6F6; |
|
|
|
} |
|
|
|
} |
|
|
|
.progress-class2{ |
|
|
|
position: relative; |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
::v-deep svg > path:nth-child(2) { |
|
|
|
stroke: url(#yellow); |
|
|
|
} |
|
|
|
::v-deep .el-progress-circle{ |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: 0 6px 8px #FFDEC1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.progress-class3{ |
|
|
|
position: relative; |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
::v-deep svg > path:nth-child(2) { |
|
|
|
stroke: url(#green); |
|
|
|
} |
|
|
|
::v-deep .el-progress-circle{ |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: 0 6px 8px #D9F6F6; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-progress__text{ |
|
|
|
white-space: pre; |
|
|
|
|
|
|
|
} |
|
|
|
::v-deep .el-progress-circle__track { |
|
|
|
stroke: #F1F2F6; |
|
|
|
} |
|
|
|
|
|
|
|
.differ { |
|
|
|
::v-deep .el-progress__text { |
|
|
|
top: 55%; |
|
|
|
font-size: 30px !important; |
|
|
|
color: #0C0E1E; |
|
|
|
&::before { |
|
|
|
content: 'CPU占比'; |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
top: -85%; |
|
|
|
left: 50%; |
|
|
|
font-weight: normal; |
|
|
|
font-size: 14px; |
|
|
|
color: #545B65; |
|
|
|
transform: translateX(-50%); |
|
|
|
} |
|
|
|
&::after { |
|
|
|
content: '%'; |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
bottom: 6px; |
|
|
|
left: 30px; |
|
|
|
font-weight: normal; |
|
|
|
font-size: 12px; |
|
|
|
color: #DEE0E4; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
