zkthink
115 lines
2.1 KiB
Vue
115 lines
2.1 KiB
Vue
<template>
|
|
<div class="full-size">
|
|
<div
|
|
ref="myEchart"
|
|
class="full-size"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
export default {
|
|
props: {
|
|
chartData: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
chartData: {
|
|
deep: true,
|
|
handler (newVal) {
|
|
this.chartData = newVal
|
|
this.draw()
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.draw()
|
|
},
|
|
methods: {
|
|
draw () {
|
|
const myEchart = echarts.init(this.$refs.myEchart, 'light')
|
|
const o = this.chartData
|
|
// y轴设置
|
|
const y = Object.assign(
|
|
{},
|
|
{
|
|
name: '金额/元',
|
|
nameLocation: 'end',
|
|
nameTextStyle: {
|
|
color: '#999999',
|
|
fontSize: 14,
|
|
padding: [0, 10, -5, 0]
|
|
|
|
},
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(163,167,174,0.5)',
|
|
type: 'dotted'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E0E5EB'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#999999',
|
|
fontSize: 14
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
o.yAxis
|
|
)
|
|
const option = {
|
|
// 图标的位置
|
|
grid: {
|
|
top: '15%',
|
|
bottom: '15%',
|
|
left: '10%'
|
|
},
|
|
// x轴
|
|
xAxis: {
|
|
name: '时间',
|
|
nameLocation: 'end',
|
|
nameTextStyle: {
|
|
color: '#999999',
|
|
fontSize: 14,
|
|
padding: [0, 0, 0, -10]
|
|
|
|
},
|
|
data: o.xData,
|
|
axisLabel: {
|
|
color: '#999999',
|
|
fontSize: 14
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E0E5EB'
|
|
}
|
|
}
|
|
},
|
|
// y轴
|
|
yAxis: y,
|
|
// 柱状图和线状图数据展示
|
|
series: o.series
|
|
}
|
|
myEchart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|