echarts1
<template>
<div class="worker-charts">
<el-tooltip
effect="dark"
content="所有Worker节点newOrder、payment、orderStatus、stockLevel、delivery的5类事务响应指标"
placement="right"
transition="el-zoom-in-center">
<span class="title">{{IdName}}</span>
</el-tooltip>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div :id="IdName" class="chart-block"></div>
<!-- 单选标签组件 -->
<el-radio-group v-model="params.interval" size="mini">
<el-radio-button label="5">1小时</el-radio-button>
<el-radio-button label="15">3小时</el-radio-button>
<el-radio-button label="30">6小时</el-radio-button>
<el-radio-button label="60">12小时</el-radio-button>
<el-radio-button label="120">1天</el-radio-button>
<el-radio-button label="360">3天</el-radio-button>
<el-radio-button label="720">7天</el-radio-button>
</el-radio-group>
<!-- 日期和时间范围 -->
<el-date-picker
size="mini"
:clearable="false"
prefix-icon="none"
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入获取数据接口
import { testData } from '@/api/report.js'
export default {
name: 'worker-charts',
props: ['IdName', 'chartItem', 'duration'],
data () {
return {
chart: {},
// 入参
params: {
id: '11',
hostId: 'work1',
item: this.chartItem,
interval: 15
},
// 图表数据
option: {
tooltip: {
trigger: 'axis'
},
legend: {
icon: 'circle',
right: 55,
top: 20
},
grid: {
left: '3%',
right: '3%',
top: '20%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: []
},
zoomMax: null, // 最大可缩小级别
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
}
},
methods: {
// echarts图表自适应
chartResize () {
this.myChart = echarts.init(
document.getElementById(this.IdName),
{ renderer: 'canvas' })
const myChart = this.myChart
this.$nextTick(() => {
myChart.resize()
})
myChart.setOption(this.option)
window.addEventListener('resize', function () {
myChart.resize()
})
},
// 获取图表数据
async getWorkData (params) {
try {
const { data } = await testData(params)
// 填充option数据
var res = data.data
this.params.interval = res.interval
this.option.series.length = 0 // 清空原数组
res.indices.forEach(item => {
var seriesItem = {
name: item.name,
type: 'line',
stack: '总量',
sampling: 'lttb',
data: item.data
}
this.option.series.push(seriesItem)
})
// 处理x轴坐标
this.option.xAxis.data.length = 0 // 清空原数组
res.indices[0].data.forEach((item, i) => {
// dayJS处理时间相加
var sDate = this.dayjs(res.startdate).add(res.interval * i, 's').format('YYYY-MM-DD H:m:s')
this.option.xAxis.data.push(sDate)
})
// 填充数据绘制echarts图表
this.myChart.setOption(this.option)
} catch (err) {
this.$message.error('获取数据失败')
}
},
// 初始化第一次调用interval
initInterval () {
if (this.duration >= 4320) {
this.params.interval = 600
} else if (this.duration >= 2880) {
this.params.interval = 300
} else if (this.duration >= 900) {
this.params.interval = 180
} else if (this.duration >= 300) {
this.params.interval = 60
} else if (this.duration >= 90) {
this.params.interval = 20
} else if (this.duration >= 20) {
this.params.interval = 5
} else {
this.params.interval = 1
}
this.zoomMax = this.params.interval
},
// 缩小
zoomOut () {
if (this.params.interval >= this.zoomMax) {
return (this.outDisabled = true)
} else {
this.outDisabled = false
}
if (this.params.interval === 1) {
this.params.interval = 5
} else if (this.interval === 5) {
this.params.interval = 20
} else if (this.interval === 20) {
this.params.interval = 60
} else if (this.interval === 60) {
this.params.interval = 180
} else if (this.interval === 180) {
this.params.interval = 300
} else {
this.params.interval = 600
}
},
// 放大
zoomIn () {
if (this.params.interval === 1) {
return (this.inDisabled = true)
} else {
this.inDisabled = false
}
console.log(123)
if (this.params.interval === 600) {
return (this.params.interval = 300)
} else if (this.interval === 300) {
return (this.params.interval = 180)
} else if (this.interval === 180) {
return (this.params.interval = 60)
} else if (this.interval === 60) {
return (this.params.interval = 20)
} else if (this.interval === 20) {
return (this.params.interval = 5)
} else {
return (this.params.interval = 1)
}
}
},
created () {
// 初始化interval
// this.initInterval()
// 调用接口获取数据
this.getWorkData(this.params)
},
computed: {
refreshChartStatus () {
return this.$store.getters.getRefreshChart
}
},
watch: {
// 侧边栏变化重设图表大小
refreshChartStatus () {
const myChart = echarts.getInstanceByDom(document.getElementById(this.IdName))
this.$nextTick(() => {
myChart.resize()
})
},
// 时间间隔变化 重载图表
'params.interval': {
handler () {
this.getWorkData(this.params)
}
}
},
mounted () {
this.chartResize()
}
}
</script>
<style lang="less" scoped>
.worker-charts {
position: relative;
padding: 5px 0;
margin-bottom: 30px;
overflow: hidden;
border: 1px solid #e6e6e6;
.el-tooltip {
position: absolute;
left: 0;
top: 0;
z-index: 3;
color: #333333;
}
.title {
font-size: 18px;
font-weight: 700;
display: inline-block;
margin: 20px;
}
.chart-block {
width: 100%;
height: 447px;
}
.el-radio-group {
position: absolute;
top: 50px;
left: 20px;
/deep/ .el-radio-button__inner {
width: 48px;
padding: 5px 0;
}
}
.el-date-editor {
position: absolute;
top: 48px;
right: 10px;
/deep/ .el-input__icon {
display: none;
}
}
}
</style>
