快捷導(dǎo)航

echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽

更新時(shí)間：2022年12月08日 11:34:38 作者：某只雜魚(yú)

項(xiàng)目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下

需求描述

需要實(shí)現(xiàn)一個(gè)“五彩斑斕”的餅圖：每塊餅上的標(biāo)簽顏色與這塊餅的顏色一致。

實(shí)現(xiàn)思路

要改變餅圖標(biāo)簽的顏色，需要參考echarts餅圖label配置項(xiàng)，以及這個(gè)很棒的官方示例：餅圖引導(dǎo)線調(diào)整。從這個(gè)示例中可以了解到自定義標(biāo)簽涉及的兩個(gè)配置項(xiàng)：formatter（用于自定義標(biāo)簽顯示內(nèi)容）、rich（用于自定義標(biāo)簽文字顯示樣式）。

自定義標(biāo)簽用到的配置項(xiàng)

label: {
  formatter: '{name|}\n{time|{c} 小時(shí)}',
  rich: {
    time: {
      fontSize: 10,
      color: '#999'
    }
  }
}

接下來(lái)稍微講解下上面這段自定義標(biāo)簽的配置項(xiàng)：

formatter

比較簡(jiǎn)單的標(biāo)簽內(nèi)容可以通過(guò)使用echarts標(biāo)簽字符串模板實(shí)現(xiàn)（個(gè)人感覺(jué)理解起來(lái)類似于JS模板字符串），“{name|}\n{time|{c} 小時(shí)}”中包含兩個(gè)內(nèi)容（“”、“{c} 小時(shí)”），它們之間使用“\n”分隔。至于“{name|}”“{time|}”這種寫(xiě)法，大概相當(dāng)于“<div class=‘name’></div>”、“<div class=‘time’>{c} 小時(shí)</div>”，用于為內(nèi)容指定樣式類名。

此外，還可以通過(guò)回調(diào)函數(shù)的方式手動(dòng)返回formatter字符串，且回調(diào)函數(shù)中無(wú)法使用echarts標(biāo)簽字符串模板（也沒(méi)有必要使用，回調(diào)函數(shù)傳入的參數(shù)包含的數(shù)據(jù)更全），如果用回調(diào)函數(shù)生成上面的formatter字符串，可以這樣寫(xiě)：

label: {
  formatter: params => {
    // console.log(params)
    return `{name|${params.name}}\n{time|${params.value} 小時(shí)}`
  },
  rich: {
    time: {
      fontSize: 10,
      color: '#999'
    }
  }
}

rich

用于為每個(gè)樣式類名配置具體樣式內(nèi)容，可以參考echarts支持的樣式配置

根據(jù)筆者的測(cè)試，有兩點(diǎn)需要注意：①自定義標(biāo)簽樣式必須通過(guò)在formatter中為內(nèi)容設(shè)置樣式類名并在rich中配置對(duì)應(yīng)樣式實(shí)現(xiàn)；②每段內(nèi)容只能指定一個(gè)樣式類名

參考代碼

根據(jù)以上分析，要實(shí)現(xiàn)標(biāo)簽顏色與餅塊一致，可以預(yù)先定義一個(gè)配色數(shù)組，遍歷數(shù)組為每種顏色創(chuàng)建rich樣式類名，再使用回調(diào)函數(shù)formatter為標(biāo)簽內(nèi)容指定下標(biāo)一致的樣式類名即可，具體參考代碼如下：

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = { 
    fontSize: 28,
    color: item
  }
})

option = {
  color: pieColors,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['36%', '56%'],
      avoidLabelOverlap: false,
      label: {
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}(${params.value})}`
        },
        rich: richColor
      },
      labelLine: {
        lineStyle: {
          width: 3
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

在線運(yùn)行

可以將參考代碼拷貝到這個(gè)在線示例進(jìn)行調(diào)試：echarts環(huán)形圖示例

標(biāo)簽plus

現(xiàn)在增加這樣一個(gè)小需求：在剛才的圓環(huán)餅圖中心，增加展示餅圖所有數(shù)據(jù)的和，效果類似：

標(biāo)簽plus效果圖

分析

首先想到的方案，也是筆者曾經(jīng)使用的方案：自己多寫(xiě)一個(gè)div來(lái)展示圓環(huán)中心的數(shù)據(jù)，但現(xiàn)在筆者有了更好的思路，便不細(xì)講了。

新的思路

其實(shí)和之前的思路差不多，只是不再自己寫(xiě)一個(gè)div自己調(diào)樣式，而是利用echarts餅圖支持在圓心處展示標(biāo)簽的特性，在series中增加一個(gè)餅圖用于展示總數(shù)，參考代碼如下：

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = { 
    fontSize: 28,
    color: item
  }
})

let chartData = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]

option = {
  color: pieColors,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['36%', '56%'],
      avoidLabelOverlap: false,
      label: {
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}(${params.value})}`
        },
        rich: richColor
      },
      labelLine: {
        lineStyle: {
          width: 3
        }
      },
      data: chartData
    },
    {
      name: '數(shù)據(jù)總數(shù)',
      type: 'pie',
      radius: ['0%', '0%'],
      itemStyle: { // 防止鼠標(biāo)懸浮到標(biāo)簽時(shí)出現(xiàn)放大的點(diǎn)
        color: 'transparent'
      },
      label: {
        position: 'inside',
        formatter: `{data|{c}}\n{serie|{a}}`,
        rich: {
          data: {
            fontWeight: 'bold',
            fontSize: 64,
            color: `#202020`,
            lineHeight: 68,
            textBorderColor: `transparent`,
            textBorderWidth: 0
          },
          serie: {
            fontSize: 24,
            color: `#acbac6`,
            lineHeight: 28,
            textBorderColor: `transparent`,
            textBorderWidth: 0
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [ // 計(jì)算表格數(shù)據(jù)value總和
        chartData.reduce((prev, cur) => prev + cur.value, 0)
      ]
    }
  ]
};

小伙伴們可自行拷貝到echarts環(huán)形圖示例在線調(diào)試~☆▽☆~

（最后再多嘴一句，echarts配置項(xiàng)的層級(jí)非常重要?。?！如果出現(xiàn)了配置項(xiàng)“失效”的情況，可以先·仔細(xì)·對(duì)照官方文檔，排查下配置項(xiàng)的層級(jí)問(wèn)題~）

附：解決formatter無(wú)法處理數(shù)據(jù)的問(wèn)題

解決圖標(biāo)自適應(yīng)大小的問(wèn)題

大家在使用echarts餅圖時(shí)，經(jīng)常遇到formatter無(wú)法處理精確數(shù)據(jù)的情況，怎么辦呢？建議在外面自定義或處理好數(shù)據(jù)pieData，然后在formatter里面使用for循環(huán)遍歷

//首先建議在外面自定義或處理好數(shù)據(jù)pieData，然后在formatter里面使用for循環(huán)遍歷
  var chartPie = echarts.init(document.getElementById("charPie"));
  var option = {
    backgroundColor: "#ffffff",//背景色
    legend: {//圖例配置
      selectedMode: false,//取消圖例上的點(diǎn)擊事件
      show: true,//是否顯示圖例
      orient: 'vertical',
      x: '55%',
      y: '0px',
      right: '0px',
      top: 'center',
      data: pieData,//餅圖數(shù)據(jù)
      icon: "circle",
      itemHeight: 9,//圖例圓點(diǎn)的高度
      formatter: function (name) {
        console.log(name, "打印一下name")
        // let arr = ["{a|" + n + "}", "{b|" + target + "%}"]
        //return arr.join("")
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 12,
            color: "#333",
            padding: 1//圖例上下的間距
          }
        }
      }
    },
    series: [{
      name: '圓環(huán)圖系列名稱',         // 系列名稱
      type: 'pie',                    // 系列類型 
      center: ['20%', '50%'],           // 餅圖的中心（圓心）坐標(biāo)，數(shù)組的第一項(xiàng)是橫坐標(biāo)，第二項(xiàng)是縱坐標(biāo)。[ default: ['50%', '50%'] ]
      radius: [34, 58],         // 餅圖的半徑，數(shù)組的第一項(xiàng)是內(nèi)半徑，第二項(xiàng)是外半徑。[ default: [0, '75%'] ]
      hoverAnimation: false,           // 是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果。[ default: true ]
      label: {                        // 餅圖圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息，比如值，名稱等.
        normal: {
          show: false             // 是否顯示標(biāo)簽[ default: false ]
        }
      },
      color: ['#16B6F3', '#DB3764', '#B482CE', '#F9C03D', "#44A22E", "#F39716", "#E54EB5", "#82E2D2", "#3DD5F9", "#A39D0E"], // 圓環(huán)圖各環(huán)節(jié)的顏色（順時(shí)針）
      data: pieData                      // 系列中的數(shù)據(jù)內(nèi)容數(shù)組。
    }]
  };
   // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
  chartPie.setOption(option)
  window.addEventListener("resize", function () {
    chartPie.resize()//圖表自適應(yīng)大小
  })

效果圖如下：

參考網(wǎng)址

[1] echarts餅圖label配置項(xiàng)

[2] echarts標(biāo)簽字符串模板

[3] JS模板字符串

[4] echarts支持的樣式配置

[5] echarts環(huán)形圖示例

總結(jié)

到此這篇關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的文章就介紹到這了,更多相關(guān)echarts餅圖標(biāo)簽formatter使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: