93 lines
1.5 KiB
Vue
93 lines
1.5 KiB
Vue
<template>
|
|
<div id="abstractechar"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Area } from '@antv/g2plot';
|
|
export default {
|
|
props:{
|
|
lineData:{
|
|
type:Array,
|
|
required:true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.pieChart()
|
|
},
|
|
|
|
methods: {
|
|
/* 图表 */
|
|
pieChart() {
|
|
const data = this.lineData
|
|
let _vm= this
|
|
if(this.chart){
|
|
this.chart.update({
|
|
data:data
|
|
})
|
|
return
|
|
}
|
|
this.chart = new Area("abstractechar",{
|
|
data,
|
|
xField: 'date',
|
|
yField: 'value',
|
|
colorField: '#0096FF',
|
|
areaStyle:()=>{
|
|
return { fill: '#0096FF' }
|
|
},
|
|
yAxis: {
|
|
line:{
|
|
subTickLine:{
|
|
count:5,
|
|
max:100
|
|
},
|
|
},
|
|
},
|
|
line:{
|
|
lineWidth:0,
|
|
lineDash:[0,0]
|
|
},
|
|
|
|
tooltip: {
|
|
}})
|
|
this.chart.render()
|
|
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
// 直接当做普通属性调用不加括号
|
|
// 任何data中数据变化立即重新计算
|
|
// 计算属性会缓存
|
|
textColor() {
|
|
return this.$store.getters.theme
|
|
},
|
|
},
|
|
watch: {
|
|
textColor: function (val) {
|
|
this.chart.update({
|
|
areaStyle:{
|
|
fill:val == 'default' ? '#282828' : '#C7C7C7'
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
lineData: function (val) {
|
|
this.pieChart()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#abstractechar {
|
|
padding: 0 30px;
|
|
width:100%;
|
|
height: 151px;
|
|
}
|
|
</style> |