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.
202 lines
4.5 KiB
202 lines
4.5 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: {
|
|
className: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
chartData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: 'calc(100% - 20px)'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
watch: {
|
|
chartData: {
|
|
deep: true,
|
|
handler(val) {
|
|
this.setOptions(val)
|
|
}
|
|
}
|
|
},
|
|
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 } = {}) {
|
|
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: '0',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
// 坐标轴轴线相关设置
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: '1',
|
|
color: '#113D72',
|
|
type: 'solid'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontWeight: 'bold',
|
|
color: '#fff'
|
|
},
|
|
data: ['04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// 坐标轴最大值、最小值、强制设置数据的步长间隔
|
|
max: 1000,
|
|
min: 0,
|
|
interval: 250,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
// 轴线
|
|
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>
|