echarts餅圖詳細

標籤屬性

標籤屬性：label模板字符串顯示name和value

未使用之前，系列的name默認就顯示在外面了，顯示的是name

 

 系列裏面有系列的類型，數據，label標籤。數據就是一個列表，列表元素是字典，一個字典代表餅圖的一個扇區的數據，一個數據就有name,和value。

系列的標籤設置：如下，a代表啥不清楚，b代表數據裏的name,c代表數據裏的value,d代表數據裏的value的佔比。formatter可以控制顯示哪些內容。position代表顯示在圖內還是圖外，inside和outside。

 

 如下，a代表系列的名稱。系列在pandas裏面就是一列數據，這裏貌似類似，我們這裏相當於data裏面一個字典就代表一個單元格數據，name相當於行標題，一列就不需要標題了，只要對應數值就行，貌似這樣理解也行。標籤就是對每個數據單元的標籤描述、信息

 

 餅圖實現系列data的name value在圖外，百分比在圖內

 

 

option = {
  series: [
      {
        type: 'pie',
        radius: '90%',
        label: {            //餅圖圖形上的文本標籤
            show: true,
            position: 'outside', //標籤的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 14    //文字的字體大小
            },
            formatter: function (d) {
              console.log(d);
              return d.name+"\n"+d.value+"公里"
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },



      {
        type: 'pie',
        radius: '90%',
        label: {            //餅圖圖形上的文本標籤
            show: true,
            position: 'inside', //標籤的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 16    //文字的字體大小
            },
            formatter: function (d) {
              return Math.round(d.percent) + '%'
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }

    ]
};

option = {
  series: [
      {
        type: 'pie',
        radius: '90%',
        label: {            //餅圖圖形上的文本標籤
            show: true,
            position: 'outside', //標籤的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 14    //文字的字體大小
            },
            formatter: function (d) {
              console.log(d);
              return d.name+"\n"+d.value+"公里"
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },



      {
        type: 'pie',
        radius: '90%',
        label: {            //餅圖圖形上的文本標籤
            show: true,
            position: 'inside', //標籤的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 16    //文字的字體大小
            },
            formatter: function (d) {
              return Math.round(d.percent) + '%'
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }

    ]
};

當我們想要添加一個數據時，如下在兩個data上共添加兩行

效果：

、

 

 程序：

option = {
  series: [
      {
        type: 'pie',
        radius: '90%',
        label: {            //餅圖圖形上的文本標籤
            show: true,
            position: 'outside', //標籤的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 14    //文字的字體大小
            },
            formatter: function (d) {
              console.log(d);
              return d.name+"\n"+d.value+"公里"
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' },
          { value: 300, name: '魔降風雲變' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },



      {
        type: 'pie',
        radius: '90%',
        label: {            //餅圖圖形上的文本標籤
            show: true,
            position: 'inside', //標籤的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 16    //文字的字體大小
            },
            formatter: function (d) {
              return Math.round(d.percent) + '%'
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' },
      { value: 300, name: '魔降風雲變' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }

    ]
};