Angular：使用echarts製作漸變色雷達圖

雷達圖對應的圖示，雷達圖上顯示合同量和金額兩組數據：

legend: {
        x: 'center',
        data: ['合同量', '金額'],
        textStyle: {
          color: '#fff'
        }
      },

設置雷達圖各個座標軸的含義、座標軸位置、座標軸間隔的樣式等：

radar: {
        indicator: (function () {
          const res = [
            { text: '來源', max: 100 },
            { text: '其他', max: 100 },
            { text: '一覽協議', max: 100 },
            { text: '邀請招標', max: 100 },
            { text: '詢價', max: 100 },
            { text: '訂購協議', max: 100 },
            { text: '談判', max: 100 },
            { text: '公開招標', max: 100 },
          ];
          return res;
        })(),
        center: ['68%', '56%'],   // 座標軸中心座標
        radius: '58%',            // 座標軸半徑佔可顯示區域的比例
        axisLine: {               // 座標軸樣式
          lineStyle: {
            color: '#E9EBF1'
          }
        },
        splitArea: {              // 座標軸分隔區顯示顏色:默認是一深一淺的間隔顏色，這裏我們設置間隔之間是空白
          areaStyle: {
            opacity: 0
          }
        }
      },

設置雷達圖的數據和數據展示樣式：

      series: [
        // 1、合同量：
        {
          type: 'radar',        // 雷達圖
          data: [
            {
              name: '合同量',
              value: [21.6, 15.9, 40, 23.6, 32.2, 48.7, 18.8, 22.3],
              emphasis: {       // 鼠標懸浮時高亮顯示，同時展示雷達圖的數據樣式
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 14,
                  backgroundColor: '#0D1B42',
                  borderRadius: 5,
                  padding: 3,
                  shadowBlur: 3   // 陰影寬度
                }
              }
            }
          ],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(         // 設置漸變色
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
            )
          },
          areaStyle:                                          // 雷達圖輻射區域的樣式
          {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
            )
          },
        },
        
        // 2、金額：
        {
          type: 'radar',
          data: [
            {
              name: '金額',
              value: [24.0, 42.9, 71.0, 23.2, 22.2, 20.0, 46.4, 32.3],
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 14,
                  backgroundColor: '#0D1B42',
                  borderRadius: 5,
                  padding: 3,
                  shadowBlur: 3
                }
              }
            }
          ],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(1, 184, 252, 1)' },
                { offset: 1, color: 'rgba(100, 74, 255, 1)' }
              ]
            )
          },
          areaStyle:
          {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(1, 184, 252, 1)' },
                { offset: 1, color: 'rgba(100, 74, 255, 1)' }
              ]
            )
          },
        }
      ],

注意我們這樣設置漸變色：     

new echarts.graphic.LinearGradient( 
              0, 0, 0, 1,
             [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
)

 

這樣就實現了一個雷達的數據展示。