You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
5.0 KiB
217 lines
5.0 KiB
<template>
|
|
<div id="main2" :style="{height:height,width:width}" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from '@/utils/resizeMixins.js'
|
|
export default {
|
|
name: 'LineEcharts',
|
|
mixins: [resize],
|
|
props: {
|
|
chartData: {
|
|
type: Object,
|
|
require: true,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: 'calc(100% - 20px)'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
watch: {
|
|
chartData: {
|
|
deep: true,
|
|
mmediate: true,
|
|
handler(val) {
|
|
setTimeout(() => {
|
|
this.setOptions(val)
|
|
}, 100)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
const dom = document.getElementById('main2')
|
|
this.chart = echarts.init(dom, 'dark')
|
|
this.setOptions(this.chartData)
|
|
},
|
|
setOptions({ returnData, borrowedData } = {}) {
|
|
const time = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
|
|
this.chart.setOption({
|
|
backgroundColor: '#010326',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
top: '4%',
|
|
right: '4%',
|
|
icon: 'rect',
|
|
itemHeight: 4,
|
|
itemWidth: 26,
|
|
textStyle: {
|
|
fontSize: '16px',
|
|
color: '#339CFF'
|
|
},
|
|
data: ['借出', '归还']
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '4%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: time.map(function(item) {
|
|
return item
|
|
}),
|
|
axisLabel: {
|
|
interval: 5,
|
|
formatter: function(value, idx) {
|
|
return value
|
|
},
|
|
color: '#fff'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: '1',
|
|
color: '#113D72',
|
|
type: 'solid'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#333'
|
|
}
|
|
},
|
|
boundaryGap: false
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// 坐标轴最大值、最小值、强制设置数据的步长间隔
|
|
// max: 1000,
|
|
min: 0,
|
|
max: function(value) {
|
|
return Math.ceil(value.max + (value.max - value.min) * 0.2)
|
|
},
|
|
// interval: 250,
|
|
splitNumber: 5,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
// 轴线
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#113D72',
|
|
width: '1',
|
|
type: 'solid'
|
|
}
|
|
},
|
|
// 坐标轴刻度相关设置。
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
// 分割线
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#113D72',
|
|
type: 'dashed',
|
|
// 透明度
|
|
opacity: 1,
|
|
width: 1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '归还',
|
|
type: 'line',
|
|
smooth: 0.6,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#18B08F'
|
|
},
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 0.6,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(24, 176, 143, 0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(23, 175, 142, 1)'
|
|
}
|
|
])
|
|
},
|
|
data: returnData
|
|
},
|
|
{
|
|
name: '借出',
|
|
type: 'line',
|
|
smooth: 0.4,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#FE8042'
|
|
},
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 0.6,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(254, 128, 66, 0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(254, 128, 66, 1)'
|
|
}
|
|
])
|
|
},
|
|
data: borrowedData
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|