vue项目中使用echarts实现雷达分析图

• 在工作中常常会开发大数据可视化展示效果，今天就使用vue结合echarts实现一个雷达分析图，记录一下，便于以后工作中查询

在vue安装echarts

npm install echarts           

使用

• 在methods定义一个方法drawRight1接受后端返回的数据

drawRight1 (indicatorData, seriesData) {
      let chart = this.$echarts.init(document.getElementById('chart_1'));
      let option = {
        tooltip: {
          trigger: 'axis',
          position: [110, 20],
          textStyle: {
            fontSize: 10,
          }
        },
        radar: [
          {
            indicator: indicatorData || [
              { text: '发布文章数', max: 1000 },
              { text: '评论数', max: 1000 },
              { text: '分享数', max: 1000 },
              { text: '点赞数', max: 1000 },
              // { text: '阅读数', max: 200 },             
            ],
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#0E275AFF"]  // 图表背景网格的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#045C97FF' // 图表背景网格线的颜色
              }
            },
            name: {
              textStyle: {
                fontSize: 10,
              }
            },
            center: ['50%', '50%'],
            radius: 45,
            nameGap: 5,
            shape: 'circle',
          },

        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {
              color: '#045C97'
            },
            areaStyle: {
              color: '#0991ED'
            },
            data: [
              {
                value: seriesData || [60, 73, 85, 40],
                name: '微信'
              }
            ]
          }
        ]
      };
      chart.setOption(option)
    },