跳至主要內容

雷达图

刘春龙原创...大约 2 分钟WEB前端数据可视化Echarts教程文档

雷达图(Radar Chart),也被称为蛛网图(Spider Chart)或星形图(Star Chart),是一种用来表示多维数据的图表。它以一个中心点为起点,沿着多个方向绘制出多个数据轴线,然后用不同的颜色或线条连接各个数据点,形成一个多边形。每个数据点代表一个维度,多边形的大小和形状反映了各维度数据之间的关系和差异。雷达图常用于比较多个对象或者评估一个对象的多个方面

图表特点

  • 显示多个数据维度。每个维度代表一种数据,而且每个维度都有一个对应的轴线和数据点,通过对比多个数据点的位置和大小可以直观地了解各个维度之间的关系和差异。
  • 显示数据分布情况。雷达图的多边形边缘可以清晰地表达数据分布的形态和特征,从而让人们更好地理解数据的趋势和分布情况。
  • 显示数据比较结果。不同的雷达图之间可以进行比较,通过比较多个雷达图的不同维度和数据点的位置和大小,可以更好地了解各个对象或方面之间的差异和优劣。
import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
      var option = {
        legend: {
          data: ["兰博基尼", "阿斯顿马丁"],
        },
        radar: {
          // shape: 'circle',  //雷达图绘制类型,支持 'polygon' 和 'circle'。
          indicator: [
            { name: "价格", max: 50000000 },
            { name: "速度", max: 50000000 },
            { name: "安全性", max: 50000000 },
            { name: "车辆数量", max: 50000000, color: "red" },
            { name: "车重", max: 50000000 },
            { name: "品牌价值", max: 50000000 },
          ],
        },
        series: [
          {
            name: "兰博基尼 vs 阿斯顿马丁",
            type: "radar",
            data: [
              {
                value: [
                  25000000, 25000000, 25000000, 25000000, 25000000, 25000000,
                ],
                name: "兰博基尼",
              },
              {
                value: [
                  30000000, 10000000, 40000000, 10000000, 40000000, 10000000,
                ],
                name: "阿斯顿马丁",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7