本文主要介紹了使用echart的餅圖資料部分展示百分比，分享給大家，具體如下：

效果圖

實現原始碼

option = {
    title : {
        text: '某站點使用者http://www.cppcns.com訪問來源',subtext: '純屬虛構',x:'center'
    },tooltip : {
        trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"
    },legend: {
        orient: 'vertical',// 佈局方式，預設為水平佈局，可選為：'horizontal' ¦ 'vertical'
         // 水平安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）
        x: 'left',// 垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
        y: 'bottom',// 重寫legend顯示樣式
        formatter: function(name) {
              // 獲取legend顯示內容
              let data = option.series[0].data;
              let total = 0;
              let tarValue = 0;
              for (let i = 0,l = data.length; i < l; i++) {
                  total += dhttp://www.cppcns.com
 
ata[i].value;
 http://www.cppcns.com                 if (data[i].name == name) {
                      tarValue = data[i].value;
                  }
              }
              let p = (tarValue / total * 100).toFixed(2);
              return name + ' ' + ' ' + p + '%';
          },data: ['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
    },series : [
        {
            name: '訪問來源',type: 'pie',radius : '55%',center: ['50%','60%'],data:[
                {value:335,name:'直接訪問'},{value:310,name:'郵件www.cppcns.com
 
營銷'},{value:234,name:'聯盟廣告'},{value:135,name:'視訊廣告'},{value:1548,name:'搜尋引擎'}
            ],itemStyle: {
                emphasis: {
                    shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0,0.5)'
                }
            }
        }
    ]
};

到此這篇關於vue實現echart餅圖legend顯示百分比的方法的文章就介紹到這了,更多相關vue 餅圖顯示百分比內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！