我用的是vue-element-admin 后台模板框架
其实也是差不多的
<script>
const animationDuration = 3000
export default {
data() {
return {
chart: null,
sign_in_ceremony_max: 10000,
blessing_bag_max: 20000,
ranking_max: 20000,
wait_pay_order: 20000,
pay_order: 20000,
Wool: [5000, 7000, 12000, 11000, 15000],
brisk: [4000, 9000, 15000, 15000, 13000],
sleep: [5500, 11000, 12000, 15000, 12000]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
radar: {
radius: '66%',
center: ['50%', '48%'],
splitNumber: 8,
splitArea: {
areaStyle: {
color: 'rgba(127,95,132,.3)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15
}
},
indicator: [
{ name: '签到礼', max: this.sign_in_ceremony_max },
{ name: '福袋', max: this.blessing_bag_max },
{ name: '冲榜礼', max: this.ranking_max },
{ name: '未支付订单', max: this.wait_pay_order },
{ name: '已支付订单', max: this.pay_order }
]
},
legend: {
left: 'center',
bottom: '10',
data: ['羊毛党', '活跃用户', '沉睡用户']
},
series: [{
type: 'radar',
label: {
show: true, // 显示数值
color: '#ffffff' //数值的颜色
},
symbolSize: 6,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [
{
value: this.Wool,
name: '羊毛党'
},
{
value: this.brisk,
name: '活跃用户'
},
{
value: this.sleep,
name: '沉睡用户'
}
],
animationDuration: animationDuration
}]
})
}
}
</script>