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}'
                }
              }
            }
          ],

radius: ‘50%’, 的時候：

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}%)'
          },

五、默認色板

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

六、整個圖形背景顏色設置

backgroundColor: 'pink',

或是直接給Echarts所在的DOM元素設置背景顏色也能夠。

注意：如何兩種方式都設置的有，backgroundColor: ‘pink’, 生效