關於ECharts的使用總結——餅圖、雷達圖、儀表盤

一、餅圖

為餅圖准備的數據是一個對象數組，每個對象有name和value兩個屬性。

    var pieData = [
      {
        name: '淘寶',
        value: 11231
      },
      {
        name: '京東',
        value: 22673
      },
      {
        name: '唯品會',
        value: 6123
      },
      {
        name: '1號店',
        value: 8989
      },
      {
        name: '聚美優品',
        value: 6700
      }
    ]

之后在option中只需要配置series即可：

      series: [
        {
          type: 'pie',
          data: pieData,
          label: { // 餅圖文字描述的顯示
            show: true, // 顯示文字
            //formatter: 'hehe' // 決定文字顯示的內容
            formatter: function(arg){
              // console.log(arg)　　arg對象中包含的內容很豐富
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: 20 // 餅圖的半徑
          // radius: '20%' // 百分比參照的是div容器的寬度和高度中較小值的一半
          // radius: ['50%', '75%'] // 環形圖：第0個元素代表的是內圓的半徑 第1個元素外圓的半徑
          roseType: 'radius', // 南丁格爾圖 餅圖的每一個區域的半徑是不同的
          // selectedMode: 'single' // 選中的效果,能夠將選中的區域偏離圓點一小段距離
          selectedMode: 'multiple',
          selectedOffset: 30
        }
      ]

二、雷達圖

雷達圖（radar）需要配置兩個選項，一個是通用的series，另一個是它特有的radar：

      radar: { 
        indicator: dataMax, // 配置各個維度的最大值
        shape: 'polygon' // 配置雷達圖最外層的圖形 circle polygon
      },

dataMax是一個對象數組，每個對象代表雷達圖上的一個維度，包含name和max兩個屬性：

    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '續航',
        max: 100
      }
    ]

series中一個對象就是一張雷達圖，，一個雷達圖中可以顯示多組數據（對應data中的多個對象）。data.value中的五個元素，對應dataMax中的五項維度。

      series: [
        {
          type: 'radar', // radar 此圖表是一個雷達圖
          label: { // 設置標簽的樣式
            show: true // 顯示數值
          },
          areaStyle: {}, // 將圖上每組數據構成的封閉區域填充陰影
          data: [
            {
              name: '華為手機1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中興手機1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]

 

三、儀表盤

儀表盤（gauge）的配置十分簡單，只需要指定儀表顯示區間（min和max）和指針相關屬性（data）即可，這些全都包含在series選項中：

      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 97,
              itemStyle: { // 指針的樣式
                color: 'pink' // 指針的顏色
              }
            }, // 每一個對象就代表一個指針
            {
              value: 85,
              itemStyle: {
                color: 'green'
              }
            }
          ],
          min: 50 // min max 控制儀表盤數值范圍
        }
      ]

效果如圖所示：