时间的法外狂徒

导航

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)'
                                }
                            }
               }
    ]
       
};

 

posted on 2019-03-13 09:58  抄手砚  阅读(1651)  评论(0编辑  收藏  举报