<template>
<div class="Relation">
<!--图表 demo-->
<figure class="overview" :style="'width:'+ width +'px;'">
<v-chart :options="options" :init-options="initOptions" />
</figure>
</div>
</template>
<script>
export default {
data() {
return {
width: 300,
initOptions: {
renderer: 'canvas'
},
options: {
textStyle: {
fontSize: 15,
fontWeight: '700'
},
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'vertical',
left: '10%',
top: '13%',
itemWidth: 20,
itemHeight: 20,
data: [{
name: '某某市',
},
{
name: '平均值'
}
],
textStyle: {
fontSize: 15,
fontWeight: '700'
}
},
radar: {
axisLine: {
show: false
},
splitLine: false,
indicator: [{
text: '基础',
max: 100,
color: '#4d5459'
},
{
text: '投入',
max: 100,
color: '#4d5459'
},
{
text: '产出',
max: 100,
color: '#4d5459'
},
{
text: '绩效',
max: 100,
color: '#4d5459'
}
],
center: ['50%', '50%'],
radius: 80,
splitArea: {
areaStyle: {
color: ['#bdc0c2', '#d1d4d3', '#bdc0c2', '#d0d3d2', '#bfc2c4']
}
}
},
series: [{
type: 'radar',
tooltip: {
trigger: 'item'
},
lineStyle: {
color: ['#fbfbfb'],
normal: {
width: 3,
color: ['#fbfbfb']
}
},
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [{
value: [60, 73, 85, 40],
name: '某某市',
itemStyle: {
normal: {
color: '#5797f3'
}
}
},
{
value: [30, 20, 50, 40],
name: '平均值',
itemStyle: {
normal: {
color: '#dee948',
}
}
},
]
}],
}
}
},
created() {
this.width = window.innerWidth
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~@/common/stylus/variable'
@import '~@/common/stylus/mixin'
c(x)
(x / 2)px
.overview
height c(500)
margin-top c(36)
</style>
v-chart 雷达图
最新推荐文章于 2025-06-20 10:05:35 发布