echarts餅圖配置模板


var option = {
        title:{
            text:'完成人構成分析--申報',
            //標題的樣式
            textSytle:{
                //顏色
                color : '#FF0000',
                //粗細
//                 fontWeight : 'bold',
                //大小
//                 fontSize : 29
            },
            //標題頂部距離樣式
            top:5,
        },
        //提示框組件
        tooltip : {
            //觸發類型:item主要在散點圖、餅圖中;axis主要在柱狀圖折線圖中。
            trigger: 'item',
            //提示框浮層內容格式器,兩種模式:字符串模板、回調函數模板。
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        //工具框
           toolbox: {
              //懸停在小圖標的文本提示
              showTitle:true,
               //工具種類
           feature: {
               //數據視圖
               dataView: {
                   show: true, 
                   //只讀設置
                    readOnly: true,  lang:['','關閉'],
                   //小圖標的文本提示,配合showTitle使用
                   title:"數據視圖",
                    //html格式轉化
                   optionToContent: function(opt) {
                        var series = opt.series;
                        var table = '<table style="width:50%;"><thead style="font-weight:bold;">'
                                     + '<tr>';
                        for(var i = 0, l = series.length; i < l; i++){
                             table += '<td>'+series[i].name+'</td><td></td>';
                        }
                        table +=  '</tr></thead><tbody>';
                        for (var i = 0, l = series.length; i < l; i++) {
                            console.log(series[i].data);
                                     for(var j = 0;j<series[i].data.length;j++){
                                         table += '<tr><td>' + series[i].data[j].name + '</td>'
                                                 + '<td>' + series[i].data[j].value + '</td></tr>';
                                     }
                            table += '</tr>';
                        }
                        table += '</tbody></table>';
                        return table;
                    },
                    
                },
               //重置
               restore: {show: true},
               //圖片下載
               saveAsImage: {show: true},
               
           }
       },
       //圖例
       legend: {
           
          //圖例類型,普通,還有可滾動型
            type: 'plain',
            //布局朝向,豎排,還有橫排
            orient: 'vertical',
            //圖例相對於容器左側距離
            left:5,
            //圖例相對於容器上側距離
            top: 40,
            //圖例數據列表,格式為數組:["本科", "博士研究生", "碩士研究生", "專科"]
            data: legendData
            
        },     
        series:[
            {
                //數據項名稱,可用於提示框顯示。
                name:'申報數據',
                //圖表類型
                type:'pie',
                //圖形大小比例,按半徑計算。
                radius:'60%', 
                //圖表數據,格式為json數組:[{"name":"本科","value":29},{"name":"博士研究生","value":8},{"name":"碩士研究生","value":2},{"name":"專科","value":4}]
                data:jsonData,
                //圖形樣式
                 itemStyle: {
                    emphasis: {
                       shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
               }
    ]
       
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM