在vue中使用eachers做雷达图

最新推荐文章于 2024-05-28 11:11:34 发布

前端创新者

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量308

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/GDNLQ/article/details/137264950

版权

效果图

安装

npm i echarts

页面引入

var echarts = require('echarts');

页面使用

<div id="customEchart" style="width:500px;height: 420px;"></div>

js配置数据方法

let customEchart = echarts.init(document.getElementById('customEchart'));//获取DOM节点
      //雷达图配置
      let customOption = {
        legend: {//图例位置
          top: "1%",
          itemWidth: 20,
          itemHeight: 12
        },
        tooltip: {//悬浮框配置
          formatter: function () {
            let str ="<table style='border-collapse:collapse;'>"+
              "<tr style='background: rgb(241, 245, 255)'>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>指标名称</td>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>目标</td>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>实际</td>"+
              "</tr>"+
              "<tr style='background: #FFF'>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>测试1</td>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>100</td>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>68</td>"+
              "</tr>"+
              "<tr style='background: #FAFAFA'>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>测试2</td>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>100</td>"+
                  "<td style='text-align: center;width:150px;height:30px;font-weight: 600;'>96</td>"+
              "</tr>"
            str= str + "</table>"
            return str
          }
        },
        radar: {
          name: {
            textStyle: {//字体大小颜色设置
              color: '#444',
              fontSize: 11
            },
            formatter: function (text) {//文字过长换行
              let strLength = text.length;
              if (strLength % 3 == 1) {
                text = text.replace(/\S{3}/g, function (match) {
                  return match + '\n';
                })
              } else {
                text = text.replace(/\S{3}/g, function (match) {
                  return match + '\n';
                })
                strLength = text.length;
                text = text.substring(0, strLength - 1);
              }
              return text;
            },
          },
          indicator: [{max:100,text:'测试1'},{max:100,text:'测试2'},{max:100,text:'测试3'},{max:100,text:'测试4'},{max:100,text:'测试5'},{max:100,text:'测试6'},{max:100,text:'测试7'},{max:100,text:'测试8'}],//数据维度和最大值
          center: ['50%', '50%'],
          radius: 146,
          startAngle: 96,
          splitNumber: 4,
          shape: 'circle',
        },
        series: [
          {
            name: '雷达图',
            type: 'radar',
            emphasis: {
              label: {
                show: true,
                color: '#fff',
                fontSize: 10,
                formatter: '{c}',       // 鼠标悬浮时展示数据加上单位
                backgroundColor: '#0D1B42',
                borderRadius: 5,
                padding: 3,
                shadowBlur: 3
              }
              },
            data: [{
              value: ['83.20', '93.10', '96.40', '92.10', '94.55', '89.70', '98.40', '99.10'],//实际数据
              lineStyle: {
                type: 'dashed'
              },
              areaStyle: {
                opacity: 0.1
              },
              label: {
                normal: {
                  show: true
                }
              }
            },
            ]
          },
        ]
      };
      customEchart.setOption(customOption);
      customEchart.resize();