// 使用echarts
import * as echarts from 'echarts'
// 设备信息数据
const EquipmentDatas = EquipmentInformationDatas => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
axisTick: {
alignWithLabel: true
}
},
// visualMap: {
// type: 'piecewise',
// show: false,
// dimension: 0,
// seriesIndex: 0,
// pieces: [
// {
// gt: 1,
// lt: 3,
// color: 'rgba(0, 0, 180, 0.4)'
// },
// {
// gt: 5,
// lt: 7,
// color: 'rgba(0, 0, 180, 0.4)'
// }
// ]
// },
// dataZoom: [
// {
// type: 'inside',
// start: 0,
// end: 2
// },
// {
// start: 0,
// end: 2
// }
// ],
series: [
{
name: '消息量',
type: 'line',
smooth: 0,
symbol: 'none',
symbolSize: 1,
lineStyle: {
color: '#1890ff'
},
// markLine: {
// symbol: ['none', 'none'],
// label: {
show: false },
// data: [{
xAxis: 1 }, {
xAxis: 3 }, {
xAxis: 5 }, {
xAxis: 7 }]
// },
areaStyle: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#1890ff'
},
{
offset: 1,
color: '#1890ff'
}
])
},
data: EquipmentInformationDatas
}
]
}
}
// 当前在线
const deviceOnline = datas => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
axis: 'x',
label: {
show: false,
fontStyle: 'lighter',
fontSize: 12
}
}
},
// grid: {
// left: '0%',
// right: '4%',
// bottom: '3%',
// top: '2%',
// containLabel: true
// },
xAxis: [
{
type: 'time',
show: false
}
],
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
show: false
},
// series: [
// {
// name: 'Direct',
// type: 'bar',
// barWidth: '60%',
// data: datas
// }
// ],
series: [
{
name: '消息量',
type: 'bar',
smooth: 0,
symbol: 'none',
symbolSize: 1,
// showBackground: true,
itemStyle: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#83bff6' },
{
offset: 0, color: '#188df0' },
{
offset: 0, color: '#188df0' }
]),
shadowColor: false
},
data: datas
}
]
}
}
// 设备消息量
const deviceInfoNum = datas => {
console.log(datas, '数据')
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
axis: 'x',
snap: true,
// z: 0,
triggerTooltip: true,
label: {
show: false,
fontStyle: 'lighter',
fontSize: 18
}
}
},
xAxis: [
{
type: 'time',
show: false
}
],
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
show: false
},
series: [
{
name: '消息量',
data: datas,
type: 'line',
areaStyle: {
},
pointer: {
icon: 'circle'
},
symbol: 'circle',
// cursor: 'pointer',
showSymbol: false,
lineStyle: {
color: '#fff'
},
labelLine: {
show: false
},
itemStyle: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#975FE4' },
{
offset: 0, color: '#A776E8' },
{
offset: 0, color: '#8150C6' }
]),
shadowColor: false
}
}
]
}
}
// cpu图形数据
const cpuDatas = datas => {
console.log(datas)
return {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
radius: '78%', // 仪表盘的半径
name: '使用率',
type: 'gauge',
max: 10,
splitNumber: 10, // 分割段数，默认为5
splitLine: {
show: false, // 是否显示分割线
distance: 10
},
axisTick: {
show: true, // 是否显示刻度。
splitNumber: 1,
distance: -12,
lineStyle: {
color: '#63677A'
}
},
axisLabel: {
distance: 2
},
detail: {
formatter: '{value}%',
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333',
fontWeight: 'bold',
fontSize: 16
}
},
progress: {
show: true,
clip: true,
itemStyle: {
color: '#46DE71',
shadowColor: true
}
},
pointer: {
icon: 'roundRect',
width: 6,
itemStyle: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#1890FF' },
{
offset: 0, color: '#1890FF' },
{
offset: 0, color: '#1890FF' }
]),
shadowColor: false
}
},
data: [
{
value: 2
// name: 'SCORE'
}
]
}
]
}
}
// jvm图形数据
const jvmDatas = val => {
console.log(val)
return {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
radius: '78%', // 仪表盘的半径
name: '使用率',
type: 'gauge',
max: 10,
splitNumber: 10, // 分割段数，默认为5
splitLine: {
show: false, // 是否显示分割线
distance: 10
},
axisTick: {
show: true, // 是否显示刻度。
splitNumber: 1,
distance: -12,
lineStyle: {
color: '#63677A'
}
},
axisLabel: {
distance: 2
},
detail: {
formatter: '{value}%',
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333',
fontWeight: 'bold',
fontSize: 16
}
},
progress: {
show: true,
clip: true,
itemStyle: {
color: '#1890FF',
shadowColor: true
}
},
pointer: {
// icon: 'roundRect',
width: 6,
itemStyle: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#2F9CFF' },
{
offset: 0, color: '#2F9CFF' },
{
offset: 0, color: '#2F9CFF' }
]),
shadowColor: false
}
},
data: [
{
value: 2,
// name: 'SCORE',
detail: {
show: true,
color: '#654332'
},
itemStyle: {
color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#83bff6' },
{
offset: 0, color: '#83bff6' },
{
offset: 0, color: '#83bff6' }
]),
shadowColor: false
}
}
]
}
]
}
}
// 暴露出去
export default {
EquipmentDatas,
deviceOnline,
deviceInfoNum,
cpuDatas,
jvmDatas
}
效果图：
