• 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="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)'
                                    }
                                }
                   }
        ]
           
    };
    就算这个世道烂成一堆粪坑,那也不是你吃屎的理由
  • 相关阅读:
    最火的.NET开源项目[转]
    ExtJs4.1目录结构介绍和使用说明[转]
    mvc4 Forms验证存储 两种登录代码
    微服务 第九章 springboot 使用NoSql数据库:redis
    【数据挖掘】关联分析之Apriori(转载)
    C语言面试
    10.15习题2
    java 执行linux命令
    servlet tomcat eclipse
    002_监测ssl证书过期时间
  • 原文地址:https://www.cnblogs.com/whalesea/p/10521168.html
Copyright © 2020-2023  润新知