echarts 餅圖圖例形狀及位置

echarts 餅圖圖例形狀及位置

 

 

option = {
   title : {
       text: '圖例形狀及位置',
       subtext: '',
       x:'center'
   },
   tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
      orient: '',
          x: 'left', //可設定圖例在左、右、居中 left  center  right
          y: 'bottom', //可設定圖例在上、下、居中left  center  right
       data: [
           {
               name:'圓圈',
               icon : 'circle',           // 圖例形狀：圓圈
               textStyle: {
                    color: 'red'          // 圖例文字顏色
               }
           },
           {
               name:'長方形',
               icon : 'rect',              // 圖例形狀：長方形
               textStyle: {
                    color: '#fff'          // 圖例文字顏色
               }
           },
           {
               name:'圓角長方形',
               icon : 'roundRect',          // 圖例形狀：圓角長方形
               textStyle: {
                    color: '#fff'          // 圖例文字顏色
               }
           },  
           {
               name:'三角形',
               icon : 'triangle',           // 圖例形狀：三角形
               textStyle: {
                    color: 'blue'          // 圖例文字顏色
               }
           },               
           {
               name:'菱形',
               icon : 'diamond',           // 圖例形狀：菱形
               textStyle: {
                    color: '#fff'          // 圖例文字顏色
               }
           },               
           {
               name:'箭頭',
               icon : 'arrow',             // 圖例形狀：箭頭
               textStyle: {
                    color: '#fff'          // 圖例文字顏色
               }
           },             
           {
               name:'圓形',
               icon : 'pin',             // 圖例形狀：圓形
               textStyle: {
                    color: '#fff'          // 圖例文字顏色
               }
           },             
           {
               name:'自定義圖片',            
               textStyle: {
                    color: 'red'          // 圖例文字顏色
               },
               icon:'image://./img/pie_1.png'//格式為'image://+icon文件地址'，其中image::后的//不能省略
           },       
],            
   },
   series : [
       {
           name: '訪問來源',
           type: 'pie',
           radius : '55%',
           center: ['50%', '60%'],
           data:[
               {value:335, name:'圓圈'},
               {value:310, name:'長方形'},
               {value:234, name:'圓角長方形'},
               {value:135, name:'三角形'},
               {value:1548, name:'菱形'},
               {value:1548, name:'箭頭'},
               {value:1548, name:'圓形'},
               {value:1548, name:'自定義圖片'}
           ],
           itemStyle: {
               emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       }
   ]
};