v-chart 雷达图

<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>