index.vue 1.46 KB
<template>
  <div id="jgChart" />
</template>

<script>
export default {
  data () {
    return {
    };
  },
  methods: {
    drawInit () {
      let datavalue = [26, 300, 2000, 1200, 800];
      let ii = -1;
      var chartDom = document.getElementById('jgChart');
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        radar: {
          indicator: [
            { name: '原则监管', max: 2600 },
            { name: '时效监管', max: 2600 },
            { name: '证书监管', max: 3600 },
            { name: '年限监管', max: 2600 },
            { name: '内容监管', max: 2600 },
          ],
          name: {
            rich: {
              a: {
                color: '#606266'
              },
              b: {
                color: '#409EFF',
                align: 'center',
              }
            },
            formatter: (a, b) => {
              ii++;
              return `{a|${a}}\n{b|${datavalue[ii]}}`
            }
          }
        },
        series: [
          {
            type: 'radar',
            symbol: 'none',//去掉拐点的圈
            itemStyle: {
              color: '#409EFF'
            },
            data: [
              {
                value: datavalue,
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted () {
    this.drawInit()
  }
}
</script>
<style scoped>
#jgChart {
  width: 100%;
  height: 330px;
}
</style>