195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
|
<div >
|
|
<el-container >
|
|
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
|
|
require('echarts/theme/macarons') // echarts theme
|
|
import resize from '../dashboard/mixins/resize'
|
|
import { getDensity30Day } from '@/api/sd_dashboard/sd_density'
|
|
|
|
let lineChartData = {
|
|
xAxisData: [],
|
|
actualData: []
|
|
}
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
name: 'density30day',
|
|
|
|
created() {
|
|
this.getData()
|
|
},
|
|
mounted() {
|
|
|
|
|
|
},
|
|
methods: {
|
|
getData() {
|
|
|
|
lineChartData = {
|
|
xAxisData: [],
|
|
actualData: []
|
|
}
|
|
|
|
getDensity30Day().then(response => {
|
|
for (var i = 0; i < response.data.length; i++) {
|
|
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
|
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(3))
|
|
}
|
|
|
|
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
|
|
|
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
|
option_energy_avg.series[0].data = lineChartData.actualData
|
|
option_energy_avg.title.text = '30天平均密度'
|
|
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
|
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chart_energy_avg.setOption(option_energy_avg, true)
|
|
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
const option_energy_avg = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
color: '#000',
|
|
fontSize: 18
|
|
},
|
|
itemGap: 5,
|
|
|
|
x: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['1#', '2#', '3#', '30#'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
min: 0.36,
|
|
max: 0.42,
|
|
|
|
// splitNumber: 12,
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#DDD'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#333'
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
color: '#999'
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '密度',
|
|
type: 'line',
|
|
data: [80, 72],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 8,
|
|
color: {
|
|
type: 'linear',
|
|
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#A9F387' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#48D8BF' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(72,216,191, 0.3)',
|
|
shadowBlur: 10,
|
|
shadowOffsetY: 20
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#a32323',
|
|
borderWidth: 10,
|
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
|
shadowBlur: 100,*/
|
|
borderColor: '#A9F387',
|
|
label : {show: true}
|
|
}
|
|
},
|
|
smooth: false,
|
|
markLine: {
|
|
label: {
|
|
formatter: '{b}: {c}'
|
|
},
|
|
precision: 4,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: 'red'
|
|
},
|
|
data: [{
|
|
name: '目标',
|
|
yAxis: '0.38'
|
|
}, {
|
|
type: 'average',
|
|
name: '平均'
|
|
}]
|
|
}
|
|
}]
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-editor-container {
|
|
padding: 32px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
|