156 lines
3.2 KiB
Vue
156 lines
3.2 KiB
Vue
<template>
|
|
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from './mixins/resize'
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '200px'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '200px'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chart = echarts.init(document.getElementById(this.id))
|
|
|
|
const xAxisData = []
|
|
const data = []
|
|
const data2 = []
|
|
for (let i = 0; i < 50; i++) {
|
|
xAxisData.push(i)
|
|
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
|
|
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
|
|
}
|
|
this.chart.setOption({
|
|
backgroundColor: '#08263a',
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%'
|
|
},
|
|
xAxis: [{
|
|
show: false,
|
|
data: xAxisData
|
|
}, {
|
|
show: false,
|
|
data: xAxisData
|
|
}],
|
|
visualMap: {
|
|
show: false,
|
|
min: 0,
|
|
max: 50,
|
|
dimension: 0,
|
|
inRange: {
|
|
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#4a657a'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#08263f'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'back',
|
|
type: 'bar',
|
|
data: data2,
|
|
z: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.4,
|
|
barBorderRadius: 5,
|
|
shadowBlur: 3,
|
|
shadowColor: '#111'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'Simulate Shadow',
|
|
type: 'line',
|
|
data,
|
|
z: 2,
|
|
showSymbol: false,
|
|
animationDelay: 0,
|
|
animationEasing: 'linear',
|
|
animationDuration: 1200,
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'transparent'
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: '#08263a',
|
|
shadowBlur: 50,
|
|
shadowColor: '#000'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'front',
|
|
type: 'bar',
|
|
data,
|
|
xAxisIndex: 1,
|
|
z: 3,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5
|
|
}
|
|
}
|
|
}],
|
|
animationEasing: 'elasticOut',
|
|
animationEasingUpdate: 'elasticOut',
|
|
animationDelay(idx) {
|
|
return idx * 20
|
|
},
|
|
animationDelayUpdate(idx) {
|
|
return idx * 20
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|