echarts 餅圖配置詳解

標題設置

title: {
             text: '某站點用戶訪問來源',
             subtext: '模擬數據',
             // x 設置水平安放位置，默認左對齊，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐標，單位px）
             x: 'center',
             // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐標，單位px）
             y: 'top',
             // itemGap設置主副標題縱向間隔，單位px，默認為10，
             itemGap: 30,
             backgroundColor: '#EEE',
             // 主標題文本樣式設置
             textStyle: {
               fontSize: 26,
               fontWeight: 'bolder',
               color: '#000080'
             },
             // 副標題文本樣式設置
             subtextStyle: {
               fontSize: 18,
               color: '#8B2323'
             }
       },

圖例設置

legend: {
            // orient 設置布局方式，默認水平布局，可選值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 設置水平安放位置，默認全圖居中，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐標，單位px）
            x: 'left',
            // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐標，單位px）
            y: 'center',
            itemWidth: 24,   // 設置圖例圖形的寬
            itemHeight: 18,  // 設置圖例圖形的高
            textStyle: {
              color: '#666'  // 圖例文字顏色
            },
            // itemGap設置各個item之間的間隔，單位px，默認為10，橫向布局時為水平間隔，縱向布局時為縱向間隔
            itemGap: 30,
            backgroundColor: '#eee',  // 設置整個圖例區域背景顏色
            data: ['搜索引擎','直接訪問','郵件營銷','聯盟廣告','視頻廣告']
       },

值域設置

series: [
            {
              name: '訪問來源',
              type: 'pie',
              // radius: '50%',  // 設置餅狀圖大小，100%時，最大直徑=整個圖形的min(寬，高)
              radius: ['30%', '60%'],  // 設置環形餅狀圖， 第一個百分數設置內圈大小，第二個百分數設置外圈大小
              center: ['50%', '50%'],  // 設置餅狀圖位置，第一個百分數調水平位置，第二個百分數調垂直位置
              data: [
                  {value:335, name:'搜索引擎'},
                  {value:310, name:'直接訪問'},
                  {value:234, name:'郵件營銷'},
                  {value:135, name:'聯盟廣告'},
                  {value:148, name:'視頻廣告'}
              ],
              // itemStyle 設置餅狀圖扇形區域樣式
              itemStyle: {
                // emphasis：英文意思是 強調;着重;（輪廓、圖形等的）鮮明;突出，重讀
                // emphasis：設置鼠標放到哪一塊扇形上面的時候，扇形樣式、陰影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
              },
              // 設置值域的那指向線
              labelLine: {
                normal: {
                  show: false   // show設置線是否顯示，默認為true，可選值：true ¦ false
                }
              },
              // 設置值域的標簽
              label: {
                normal: {
                  position: 'inner',  // 設置標簽位置，默認在餅狀圖外 可選值：'outer' ¦ 'inner（餅狀圖上）'
                  // formatter: '{a} {b} : {c}個 ({d}%)'   設置標簽顯示內容 ，默認顯示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指這一部分占總數的百分比
                  formatter: '{c}'
                }
              }
            }
        ]

series的radius設為50%時

 

series的radius設為['30%', '60%'],  的時候：

 

 提示框設置

tooltip: {
            // trigger 設置觸發類型，默認數據觸發，可選值：'item' ¦ 'axis'
            trigger: 'item',
            showDelay: 20,   // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
            hideDelay: 20,   // 隱藏延遲，單位ms
            backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景顏色
            textStyle: {
              fontSize: '16px',
              color: '#000'  // 設置文本顏色 默認#FFF
            },
            // formatter設置提示框顯示內容
            // {a}指series.name  {b}指series.data的name
            // {c}指series.data的value  {d}%指這一部分占總數的百分比
            formatter: '{a} <br/>{b} : {c}個 ({d}%)'
          }

背景顏色設置

 backgroundColor: 'red' 

餅圖每塊顏色設置

 color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E']