Echarts 系列之餅圖的相關配置

本文主要針對餅圖進行相關的自定義配置。

餅圖常用配置如下：

名稱	效果
name	圖標名稱
type	指明圖形的類型'pie','line'等
hoverAnimation	鼠標hover是否需要動畫
radius	餅圖的半徑，數組的第一項是內半徑，第二項是外半徑
center	餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。
label	餅圖圖形上的文本標簽，可用於說明圖形的一些數據信息
labelLine	標簽的視覺引導線樣式
data	渲染數據

1、實現labelLine與圖表的分離

思路：同圓心，不同半徑兩個餅圖疊加的方式實現，半徑較小的只顯示圖，不顯示引導線與label，半徑較大的不顯示圖，只顯示引導線與label，這樣就可以形成分離狀態。

 

 實現代碼如下：

 series: [{
            //半徑
            radius: ['0%', '40%'],
            type: 'pie',
            label: {
               //不顯示文字
                show: false
            },
             labelLine: {
                //不顯示引導線
                show: false
            },
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 274, name: '聯盟廣告'},
                {value: 235, name: '視頻廣告'},
                {value: 400, name: '搜索引擎'}
            ]
        },
        {
            radius: ['0', '45%'],
            type: 'pie',
            //文字樣式顯示
            label: {
                 normal:{
                    show: true,
                    formatter:'{b} : {c}台  ',
                }
            },
            //引導線樣式設置
            labelLine: {
                smooth: 0,
                length: 20,
                length2: 40
            },
            itemStyle: {
                //不顯示餅圖
                opacity:0,
            },
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 274, name: '聯盟廣告'},
                {value: 235, name: '視頻廣告'},
                {value: 400, name: '搜索引擎'}
            ]

        }
    ]            

 

2、實現label 在labelLine(引導線)上，且label自定義樣式

• hover時label、labelLine顏色改變
• lable自定義顏色、位於labelLine上方
• 餅圖內邊框與外邊框設置

重點屬性：label 中的 formatter屬性

 

字符串模板 模板變量有：

• {a}：系列名。
• {b}：數據名,  即name。
• {c}：數據值，即value。
• {d}：百分比,  即數據所占的比例。

 

拿下面的栗子說明一下：

//{a|...} {b|...} 用於區分,區分的名字可以自定義，我這里直接使用了a、b、c;
formatter: '{a|{c}} {c|台} \n  {b|{b}} \n\n',

通過上面的格式可以通過rich分別對label設置樣式，'\n'可以實現換行的效果，如果想讓label位於labelLine上可以使用'\n\n'.

rich: { 
    　　　　　　　//value樣式
                a: {
                  color: '#f3c773',
                  //字體粗細
                  fontWeight: 'bold',
                  //字體大小
                  fontSize: 45,
                  //設置行高，如果上下挨的比較緊不美觀時
                  lineHeight: 35,
                  //水平方向：對其方向
                  align: 'center',
                  //垂直方向 ：對齊方式。這里因為同一行的字體大小不一致，小字體會向上顯得不美觀；
                  verticalAlign: 'bottom',
                },
                //name樣式
                b: {
                  color: '#e05932',
                  fontWeight: 'bold',
                  fontSize: 18,
                  lineHeight: 40,
                  align: 'center',
                }, 
　　　　　　　　　　//小字體：台
                c: {
                  color: '#f3c773',
                  fontWeight: 'bold',
                  fontSize: 14,
                  align: 'center',
                  verticalAlign: 'bottom',
                },
              },
             //label偏離引導線時設置分別為：上、右、下、左；
              padding: [0, -90, 50, -90],
            },

 

樣式一：

 

 實現代碼如下：

 series: [
        {
          name: '設備分布',
          type: 'pie',
          radius: ['55%', '85%'],
          center: ['50%', '50%'],
         // 餅圖各部分顏色，部分數大於顏色數，就會循環使用這些顏色
          color: [
            'rgba(0,104,210,0.2)',
            'rgba(0,104,210,0.4)',
            'rgba(0,104,210,0.6)',
            'rgba(0,104,210,0.8)',
            'rgba(0,104,210,1)',
          ],
         // 如果要使用formatter屬性 ,name 為數據項名稱，value 為數據項值
          data:[
                {value: 1, name: '橋西區'},
                {value: 1, name: '寶安區'},
                {value: 1, name: '福田區'},
                ],
          //這里等一下單獨說明
          label: {
            normal: {
              show: false,
              color: '#e05932',
              formatter: '{a|{c}} {c|台} \n  {b|{b}} \n\n',
              rich: {
                a: {
                  color: '#f3c773',
                  fontWeight: 'bold',
                  fontSize: 45,
                  lineHeight: 35,
                  align: 'center',
                  verticalAlign: 'bottom',
                },
                b: {
                  color: '#e05932',
                  fontWeight: 'bold',
                  fontSize: 18,
                  lineHeight: 40,
                  align: 'center',
                },
                c: {
                  color: '#f3c773',
                  fontWeight: 'bold',
                  fontSize: 14,
                  align: 'center',
                  verticalAlign: 'bottom',
                },
              },
              padding: [0, -90, 50, -90],
            },
          },
          labelLine: {
            show: false,
            //引導線顏色漸變
            lineStyle: {
              color: {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(56,27,18)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(224,89,50)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(56,27,18)',
                  },
                ],
              },
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              width: 2,
            },
            smooth: 0,
            //第一條引導線長度
            length: 30,
            //第二條引導線長度
            length2: 100,
          },
          itemStyle: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
          emphasis: {
            label: {
              //hover時顯示引導線
              show: true,
            },
            labelLine: {
              //hover時顯示引導線
              show: true,
            },
            itemStyle: {
             //hover時改變 餅圖部分顏色（這里是漸變）
              color: new echarts.graphic.LinearGradient(0.2, 1, 0.2, 0, [
                { offset: 0, color: 'rgba(243,199,115,0.7)' },
                { offset: 0.7, color: 'rgba(200,140,82,0.7)' },
                { offset: 1, color: 'rgba(167,87,42,0.7)' },
              ]),
            },
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay(idx) {
            return Math.random() * 200;
          },
        },
        {
          type: 'pie',
          //內邊框
          radius: ['54.2%', '55%'],
          center: ['50%', '50%'],
          // 鼠標移入變大
          hoverAnimation: false, 
          //整圓
          data: [100],
          label: {
            show: false,
          },
        },
        {
          type: 'pie',
          //外邊框
          radius: ['84.2%', '85%'],
          hoverAnimation: false,
          center: ['50%', '50%'],
          data: [100],
          label: {
            show: false,
          },
        },
      ],        

 

樣式二：

 

實現代碼如下：

label: {
            normal: {
              show: true,
              formatter: ' {c|} {a|{b}} \n  {b|{c}}',
              rich: {
                a: {
                  color: '#157dff',
                  fontWeight: 'bold',
                  fontSize: 14,
                  lineHeight: 25,
                  align: 'center',
                },
                b: {
                  color: '#157dff',
                  fontWeight: 'bold',
                  fontSize: 24,
                  align: 'center',
                },
                //自定義圓圈，類似於css畫圓
                c: {
                  height: 10,
                  width: 10,
                  lineHeight: 10,
                  borderWidth: 1,
                  borderColor: '#157dff',
                  borderRadius: 10,
                },
              },
             //有時label 會偏離餅圖，不太美觀，這個屬性可以調整一下
              padding: [0, -15],
            },

 

echarts的配置很多，功能也很強大。希望這篇隨筆能幫到大家，也是我自己學習的積累～