echarts 雷达图实例属性详解

echarts 雷达图实例属性详解

• 实例效果图

option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],	//图例颜色
  title: {
    text: 'Customized Radar Chart'	//标题
  },
  legend: {		//图例组件信息
  	show: true,		//是否显示图例
  	icon: 'rect',	//图例形状
  	// 图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 'path://' 将图标设置为任意的矢量路径。
  	top: '40%',		// 图例距离顶部边距
	left: '15%',	// 图例距离左侧边距
    itemWidth: 10,	// 图例标记的图形宽度。[ default: 25 ]
    itemHeight: 10,	// 图例标记的图形高度。[ default: 14 ]
    itemGap: 30,	// 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
    orient: 'vertical',	// 图例列表的布局朝向,'horizontal'为横向,''为纵向.
    textStyle: { 	// 图例的公用文本样式。
       fontSize: 15,
       color: '#fff'
    },
    data:[{...},{...}]	//图例数据，可单独设置icon与textStyle
  },	
  radar: [
    {
      indicator: [		// (圆外的标签数据)雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应。
        { text: 'Indicator1' },
        { text: 'Indicator2' },
        { text: 'Indicator3' },
        { text: 'Indicator4' },
        { text: 'Indicator5' }
      ],
      center: ['25%', '50%'],	 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
      radius: 120,	//雷达图半径
      startAngle: 90,	// 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
      splitNumber: 4, // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
      shape: 'circle',	//形状 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
      axisName: {	// (圆外的标签)雷达图每个指示器名称的配置项。
        formatter: '【{value}】',
        color: '#428BD4'
      },
      splitArea: { 	//(圆中间的圆环分隔的区域)坐标轴在 grid 区域中的分隔区域，默认不显示。
        areaStyle: {	// 分隔区域的样式设置。
          color: ['#77EADf', '#26C3BE', '#64AFE9', '#428BD4'],	// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {	// (圆内的几条直线)坐标轴轴线相关设置
          lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'	 // 坐标轴线线的颜色。
          width: 1,		// 坐标轴线线宽。
          type: 'solid',	// 坐标轴线线的类型。
         }
      },
      splitLine: {	// (这里是指所有圆内的圆环)坐标轴在 grid 区域中的分隔线。
        lineStyle: {
          color: 'rgba(213, 253, 250, 0.8)'	//所有圆环的颜色
        }
      }
    },
    {
      indicator: [
        { text: 'Indicator1', max: 150 },
        { text: 'Indicator2', max: 150 },
        { text: 'Indicator3', max: 150 },
        { text: 'Indicator4', max: 120 },
        { text: 'Indicator5', max: 108 },
        { text: 'Indicator6', max: 72 }
      ],
      center: ['75%', '50%'],
      radius: 120,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ],
  series: [		//雷达图数据
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [100, 8, 0.4, -80, 2000],
          name: 'Data A'
        },
        {
          value: [60, 5, 0.3, -100, 1500],
          name: 'Data B',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.6)'
          }
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [
        {
          value: [120, 118, 130, 100, 99, 70],
          name: 'Data C',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'dashed'
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        },
        {
          value: [100, 93, 50, 90, 70, 60],
          name: 'Data D',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 145, 124, 0.1)',
                offset: 0
              },
              {
                color: 'rgba(255, 145, 124, 0.9)',
                offset: 1
              }
            ])
          }
        }
      ]
    }
  ]
};

实例效果图

参考地址 https://www.tqwba.com/x_d/jishu/355893.html