vue 实现雷达图

最新推荐文章于 2024-06-20 16:55:28 发布

聆听HJ

最新推荐文章于 2024-06-20 16:55:28 发布

阅读量2.3k

点赞数 1

文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/weixin_41542329/article/details/125392595

版权

1、安装echarts

npm install echarts --save

2、在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、代码实现

<template>
  <div id="myChart" style="width: 100%; height: 500px; margin-top: 20px"></div>
</template>

<script>
  export default {
    name: 'Radar',
    data () {
      
    }，
    mounted() {
      this.drawLine()
    },
    methods: {
        drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let dataMax = [
          { name: '社会评价信息', max: '15' },
          { name: '社会评价信息', max: '15' },
          { name: '社会评价信息', max: '15' },
          { name: '社会评价信息', max: '15' },
          { name: '社会评价信息', max: '15' },
        ]
        let option = {
          //配置维度的最大值
          radar: {
            center: ['50%', '60%'],//调位置  第一个左右   第二个上下
            radius: 70,//调大小
            //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
            indicator: dataMax,
            shape: 'polygon', //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
            splitArea: {
              areaStyle: {// 图表背景网格区域的颜色
                color: ["#ffffff"],
              }
            },
          },
          series: [
            {
              type: 'radar',
              label: {
                show: true, //显示数值
              },
              // areaStyle: {}, //每个雷达图形成一个阴影的面积
              itemStyle:{//折线拐点标志的样式
                color: "#4b85f1",
              },
              lineStyle: {//线条样式
                color: "#4b85f1"
              },
              symbolSize: 4,//圆点大小
              symbol: "circle",//圆点样式
              data: [
                {
                  name: '华为手机',
                  value: [7, 8, 15, 8, 15],
                },
              ],
            },
          ],
        }
        // 绘制图表
        myChart.setOption(option)
      },
    }
  }
</script>

4、效果图