快捷導(dǎo)航

echarts自定義legend樣式的詳細(xì)圖文教程

更新時間：2022年10月12日 12:28:12 作者：ChangYan.

在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時候根據(jù)ui需要,根據(jù)不同的背景色,下面這篇文章主要給大家介紹了關(guān)于echarts自定義legend樣式的相關(guān)資料,需要的朋友可以參考下

最近要完成顯示一個餅圖，使用echarts組件，先用官方給定的模板加載出樣式，然后修改為自定義的樣式。如下圖是要自定義legend。

先放上官方加載出的代碼

      this.chart.setOption({
        title: {
          text: "Filter request number distribution of different project",
          textStyle: {
            color: 'black',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {       //對圖形的解釋部分
          orient: 'vertical',
          right: 10,
          y: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data // 需要加載的數(shù)據(jù) 
          }
        ]
      })

對于需要加載的數(shù)據(jù)如下：

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

然后在此基礎(chǔ)上進(jìn)行修改。

首先可以看到，圖標(biāo)默認(rèn)是長方形，而需求是小圓點。

在此處設(shè)置就可以變?yōu)樾A點

如果需要其它圖標(biāo)，可以參看下圖

接著就是右邊一段文字到三段文字的顯示，不止要展示出name，還要展示出百分比和數(shù)量。

這個就要用到legend.formatter進(jìn)行設(shè)置，還要用到legend.textStyle. rich，在 rich 里面，可以自定義富文本樣式，使三列文字的中間那一列展示為灰色，兩邊文字為黑色。

具體官網(wǎng)樣式設(shè)置教程：https://echarts.apache.org/zh/option.html#legend.formatter

具體分析過程如下：

首先把文字分為3段，a表示name，b表示百分比， c表示value數(shù)量。

然后在textStyle里設(shè)置各自的樣式，設(shè)置后的代碼如下，注意備注【添加】的地方是主要更改

      this.chart.setOption({
        title: {
          text: 'Filter request number distribution of different project',
          textStyle: {
            color: 'black',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: { // 對圖形的解釋部分
          orient: 'vertical',
          right: 10,
          y: 'center',
          icon: 'circle',			// 添加
          formatter: function(name) {	// 添加
            let total = 0
            let target
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            var arr = [
              '{a|' + name + '}',
              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
              '{c|' + target + '}'
            ]
            return arr.join('  ')
          },
          textStyle: {	// 添加
            padding: [8, 0, 0, 0],
            rich: {
              a: {
                fontSize: 15,
                width: 110
              },
              b: {
                fontSize: 15,
                width: 70,
                color: '#c1c1c1'
              },
              c: {
                fontSize: 15
              }
            }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '70%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      })

最后加載出的樣式如圖