雷達圖（多指標版）

程式碼

var chartDom=document.getElementById("radar");
var myChart=echarts.init(chartDom);
    option = {
      title: {
        text: '消費記錄',
        textStyle: {
          fontSize: 18,
          color: 'red',
          fontStyle:'oblique'
        },
        subtext:"這是個副標題",
        subtextStyle:{
          fontSize: 18,
          color: 'blue',
        },
        left: '10%'
      },
      legend: {//圖例
        data: ['月度消費', '年度消費', '2年消費']
      },
      radar: [
        {
          center: ['30%', '50%'],//指定雷達圖指標位置[左右，上下]
          indicator: [
            { name: '北京', max: 2000 },
            { name: '上海', max: 2000 },
            { name: '武漢', max: 2000 },
            { name: '長沙', max: 2000 }
          ]
        },
        {
          center: ['70%', '50%'],
          indicator: [
            { name: '深圳', max: 5000 },
            { name: '廣州', max: 5000 },
            { name: '江西', max: 5000 },
            { name: '邵陽', max: 5000 }
          ]
        },
        {
          center: ['30%', '50%'],
          indicator: [
            { name: '北京', max: 7000 },
            { name: '上海', max: 7000 },
            { name: '武漢', max: 7000 },
            { name: '長沙', max: 7000 }
          ]
        }
      ],
      series: [
        {
          type: 'radar',
          areaStyle: {},//遮罩
          radarIndex: 1,//選擇指標
          data: [
            {
              name: '月度消費',
              value: [4000, 4500, 3200, 1300]
            }
          ]
        },
        {
          type: 'radar',
          areaStyle: {},
          data: [
            {
              name: '年度消費',
              value: [1000, 1500, 1200, 400]
            }
          ]
        },
        {
          type: 'radar',
          areaStyle: {},
          radarIndex: 2,
          data: [
            {
              name: '2年消費',
              value: [6000, 5500, 6200, 7000]
            }
          ]
        }
      ]
    };
option & myChart.setOption(option)
 

效果圖