最新消息:20210917 已从crifan.com换到crifan.org

【记录】用AdminLTE实现报表的原型

AdminLTE crifan 3373浏览 0评论

想要画一个报表的原型,大概类似于这种:

想要基于AdminLTE去画

adminlte

Free Bootstrap Admin Template | AdminLTE.IO

Releases · almasaeed2010/AdminLTE

https://github.com/almasaeed2010/AdminLTE/archive/v2.4.0-rc.zip

AdminLTE-2.4.0-rc.zip

然后解压后,找到了:

AdminLTE-2.4.0-rc/pages/layout/collapsed-sidebar.html

比较适合作为开始:

然后把html拷贝过去,然后把对应的依赖的资源都放到该目录下,再去更新引用的目录:

然后就可以正常显示了:

然后就可以去修改页面了。

先去找:

【已解决】AdminLTE中如何实现可以点击关掉的tag标签

再去把ECharts中的地图集成进来:

【已解决】AdminLTE中集成ECharts中的中国地图

接着再去,给第一行的右边添加上tab选项:

【已解决】AdminLTE中添加Tab选项卡

但是期间遇到个布局问题:

【已解决】AdminLTE中间的row的自动布局无效

继续去添加:

【已解决】AdminLTE中添加简单表格及其中的进度条

继续添加渠道部分。

接着继续添加漏斗图:

【已解决】AdminLTE中添加水平方向的漏斗图

然后再去:

【已解决】AdminLTE中添加外层圆环内层扇区的饼图

然后再去实现另外一个饼图:

【总结】

目前代码是:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>xxx报表</title>
    <!– Tell the browser to be responsive to screen width –>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!– Bootstrap 3.3.7 –>
            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
            <!– Font Awesome –>
                <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
                <!– Ionicons –>
                    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
                    <!– Theme style –>
                        <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
                        <!– AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them
                            to reduce the load. –>
                            <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
                            <!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
                                <!– WARNING: Respond.js doesn't work if you view the page via file:// –>
                                    <!–[if lt IE 9]>
                                        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>;
                                        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>;
                                        <![endif]–>
  <!– Google Font –>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">;
  <style type="text/css">
    .nav-pills > li > a {
      border-radius: 4px 4px 4px 4px;
    }
  </style>
</head>
<!– ADD THE CLASS sidebar-collapse TO HIDE THE SIDEBAR PRIOR TO LOADING THE SITE –>
<body class="hold-transition skin-blue sidebar-collapse sidebar-mini">
<!– Site wrapper –>
<div class="wrapper">
。。。
  <!– Content Wrapper. Contains page content –>
  <div class="content-wrapper">
    <!– Content Header (Page header) –>
    <!– <section class="content-header">
      <h1>
        xxx报表
      </h1>
    </section> –>
    <!– Main content –>
    <section class="content">
      <div class="row">
        <div class="col-md-6">
          <!– <div class="col-md-4 col-sm-4 col-xs-4" style="width: 260px;"> –>
          <div class="col-md-6">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h5 class="box-title">东南大区 > 上海商务处</h5>
      
                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i></button>
                </div>
              </div>
            </div>
          </div>
    
          <!– <div class="col-md-4 col-sm-4 col-xs-4" style="width: 120px;"> –>
          <div class="col-md-3">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h5 class="box-title">明锐</h5>
      
                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i></button>
                </div>
              </div>
            </div>
          </div>
          <!– <div class="col-md-4 col-sm-4 col-xs-4" style="width: 120px;"> –>
          <div class="col-md-3">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h5 class="box-title">DCC</h5>
      
                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i></button>
                </div>
              </div>
            </div>
          </div>
      </div>
      
      <div class="col-md-3">
        <div>
        </div>
      </div>
      <!– <div class="col-md-4">
          <div class="col-md-6">
            <button type="button" class="btn btn-block btn-info">目标达成</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn btn-block btn-info">同环比</button>
          </div>
      </div> –>
      <div class="col-md-3">
        <div class="col-md-3">
          <div>
          </div>
        </div>
        
        <div class="col-md-9">
          <!– <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">目标达成</a></li>
              <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="true">同环比</a></li>
            </ul>
          </div> –>
          <ul class="nav nav-pills">
            <li class="active">
              <a href="#target_complete" data-toggle="tab">目标达成</a>
            </li>
            <li>
              <a href="#yoy" data-toggle="tab">同环比</a>
            </li>
          </ul>
        </div>
      </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">区域</h3>
    
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_map" style="width: 100%; height:250px;transform: scale(1.2, 1.2);" >
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">车型</h3>
    
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="box-body no-padding">
                <table class="table table-striped">
                  <tr>
                    <td>新明锐</td>
                    <td style="width: 100px">
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-danger" style="width: 45%;">4500</div>
                      </div>
                    </td>
                    <td>10000</td>
                  </tr>
                  <tr>
                    <td>柯迪亚克</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width: 100%;">1800</div>
                      </div>
                    </td>
                    <td>600</td>
                  </tr>
                  <tr>
                    <td>晶锐</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-yellow" style="width: 65%">780</div>
                      </div>
                    </td>
                    <td>1200</td>
                  </tr>
                  <tr>
                    <td>速派</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width: 87%">3480</div>
                      </div>
                    </td>
                    <td>4000</td>
                  </tr>
                  <tr>
                    <td>野帝</td>
                    <td>
                      <div class="progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width: 91%">1001</div>
                      </div>
                    </td>
                    <td>1100</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-md-3">
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">渠道</h3>
      
                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                  <i class="fa fa-minus"></i></button>
                </div>
              </div>
              <div class="box-body">
                <div class="box-body no-padding">
                  <table class="table table-striped">
                    <tr>
                      <td>DCC</td>
                      <td style="width: 100px">
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-danger" style="width: 65%;">50000</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-red">80000</span></td> –>
                      <td>80000</td>
                    </tr>
                    <tr>
                      <td>到店</td>
                      <td>
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-success" style="width: 87%;">7000</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-green">8000</span></td> –>
                      <td>8000</td>
                    </tr>
                    <tr>
                      <td>二级网络</td>
                      <td>
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-yellow" style="width: 70%">1400</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-yellow">2000</span></td> –>
                      <td>2000</td>
                    </tr>
                    <tr>
                      <td>外拓</td>
                      <td>
                        <div class="progress progress-striped active">
                          <div class="progress-bar progress-bar-success" style="width: 90%">900</div>
                        </div>
                      </td>
                      <!– <td><span class="badge bg-green">1000</span></td> –>
                      <td>1000</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
      </div>
      
      <div class="row">
        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">转化</h3>
    
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <!– <div id="echart_convertion" style="width: 100%; height:250px; transform: rotate(270deg) scale(0.6, 1.6);" > –>
              <div id="echart_convertion" style="width: 100%; height:250px; transform: scale(1.2, 1.2);" >
              <!– <div id="echart_convertion" style="width: 100%; height:250px;" > –>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">批售</h3>
    
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_wholesales" style="height:220px;" ></div>
              <div style="text-align:center;">
                  <p>
                    月目标<span class="label label-primary">12000</span>
                        
                    完成率<span class="label label-primary">67%</span>
                  </p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-md-3">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">库存</h3>
    
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="echart_inventory" style="height:220px;" ></div>
              <div style="text-align:center;">
                  <p>    </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!– /.content –>
  </div>
  <!– /.content-wrapper –>
<!– Add the sidebar's background. This div must be placed
       immediately after the control sidebar –>
  <div class="control-sidebar-bg"></div>
</div>
<!– ./wrapper –>
<!– ECharts –>
<script src="dist/lib/echarts/echarts.js"></script>
<script src="dist/lib/echarts/map/china.js"></script>
<!– <script src="dist/lib/echarts/china.js"></script> –>
<!– jQuery 3 –>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!– Bootstrap 3.3.7 –>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!– SlimScroll –>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!– FastClick –>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!– AdminLTE App –>
<script src="dist/js/adminlte.min.js"></script>
<!– AdminLTE for demo purposes –>
<script src="dist/js/demo.js"></script>
<script type="text/javascript">

    const ValueColor = {
        RED: '#F56954′, //rgb(245, 105,  84)',
        GRAY: '#D2D654′, //rgb(210, 214,  222)',
        GREEN: '#00A65A', //rgb(0,   166,  90)',
        YELLOW: '#F39C12′, //rgb(243, 156,  18)',
        LIGHT_BLUE: '#00C0EF', //'rgb(0,   192,  239)',
        DARK_BLUE: '#3C8DBC', //'rgb(60,  141,  188)',
        WHITE: '#FFFFFF', //'rgb(255, 255,  255)',
    };
</script>
<script type="text/javascript">
    var mapEcharts = echarts.init(document.getElementById('echart_map'));
    option = {
        title: {
            text: ",
        subtext: ",
        left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data:['2017年']
        },
        visualMap: {
            show: false,
            min: 0,
            max: 500,
            // splitNumber: 250,
            // splitNumber: 100,
            // max: 450,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],           // 文本,默认为数值文本
            calculable: false,
            // calculable: true,
            inRange: {
                //color: [ '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                // color: [ '#FF0033', '#22BF2E']
                //AdminLTE: red, green
                // color: [ '#DD4B39', '#00A65A']
                color: [ValueColor.RED, ValueColor.GREEN],
                //other: red, green
                // color: [ '#FF4500', '#7FFF00'],
                // opacity: 1.0
            }
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {readOnly: false},
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        // geo: {
        //   show: true,
        //   map: 'china',
        //   regions: [{
        //       name: '广东',
        //       itemStyle: {
        //           normal: {
        //               areaColor: ValueColor.YELLOW,
        //               // color: ValueColor.YELLOW
        //           }
        //       }
        //   }],
        //   itemStyle: {
        //       normal: {
        //           areaColor: ValueColor.DARK_BLUE,
        //           // borderColor: '#111'
        //       },
        //       emphasis: {
        //         areaColor: ValueColor.DARK_BLUE,
        //       }
        //   }
        // },
        series: [
            {
                name: '2016年',
                type: 'map',
                // type: 'scatter',
                // coordinateSystem: 'geo',
                // mapType: 'china',
                map: 'china',
                roam: false,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    // data: convertData([
                    //大西北区
                    {
                        name: '甘肃',
                        value: 50,
                    },
                    { name: '青海', value: 50 },
                    {
                        name: '新疆',
                        value: 50,
                        // itemStyle: {
                        //   normal: {
                        //     areaColor: ValueColor.YELLOW,
                        //     color: ValueColor.YELLOW,
                        //   }
                        // }
                    },
                    { name: '宁夏', value: 50 },
                    { name: '陕西', value: 50 },
                    { name: '山西', value: 50 },
                    //大中南区
                    { name: '湖南', value: 450 },
                    { name: '江西', value: 450 },
                    { name: '湖北', value: 450 },
                    //大华东区
                    { name: '江苏', value: 450 },
                    { name: '安徽', value: 450 },
                    //大华南区
                    { name: '广东', value: 50 },
                    { name: '海南', value: 50 },
                    { name: '福建', value: 50 },
                    //大华北区
                    { name: '黑龙江', value: 450 },
                    { name: '吉林', value: 450 },
                    { name: '辽宁', value: 450 },
                    { name: '河北', value: 450 },
                    { name: '天津', value: 450 },
                    { name: '北京', value: 450 },
                    { name: '内蒙古', value: 450 },
                    //大华中区
                    { name: '河南', value: 450 },
                    { name: '山东', value: 450 },
                    //大东南区
                    { name: '浙江', value: 450 },
                    { name: '上海', value: 450 },
                    //大西南区
                    { name: '重庆', value: 450 },
                    { name: '四川', value: 450 },
                    { name: '西藏', value: 450 },
                    { name: '云南', value: 450 },
                    { name: '广西', value: 450 },
                    { name: '贵州', value: 450 },
                    { name: '台湾', value: 450 },
                    { name: '香港', value: 450 },
                    { name: '澳门', value: 450 }
                ]
                // ])
            },
        ]
    };
    mapEcharts.setOption(option);
</script>
<script type="text/javascript">
    var convertionEcharts = echarts.init(document.getElementById('echart_convertion'));
    option = {
        title: {
            text: ",
        subtext: "
        },
        tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c}%"
            formatter: "{a} <br/>{b} : {c}"
        },
        // toolbox: {
        //     feature: {
        //         dataView: {readOnly: false},
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        // legend: {
        //     data: ['线索','有望','订单','成交']
        // },
        series: [
            {
                name: '目标',
                type: 'funnel',
                // left: '10%',
                // width: '80%',
                left: '10%',
                width: '70%',
                minSize: '10%',
                maxSize: '100%',
                label: {
                    normal: {
                        formatter: '{c}'
                    },
                    emphasis: {
                        position: 'inside',
                        // formatter: '{b}预期: {c}%'
                        formatter: '{b}目标: {c}'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        opacity: 0.7
                    }
                },
                data: [
                    {
                        value: 80,
                        name: '成交',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率:94%',
                                textStyle: {
                                    color: ValueColor.GREEN
                                }
                            }
                        },
                    },
                    {
                        value: 200,
                        name: '订单',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率:80%',
                                textStyle: {
                                    color: ValueColor.GREEN
                                }
                            }
                        },
                    },
                    {
                        value: 600,
                        name: '有望',
                        itemStyle: {
                            normal: {
                                color: ValueColor.YELLOW
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率:70%',
                                textStyle: {
                                    color: ValueColor.YELLOW
                                }
                            }
                        },
                    },
                    {
                        value: 2000,
                        name: '线索',
                        itemStyle: {
                            normal: {
                                color: ValueColor.RED
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{c}\n转化率:50%',
                                textStyle: {
                                    color: ValueColor.RED
                                }
                            }
                        },
                    }
                ]
            },
            {
                name: '实际',
                type: 'funnel',
                // left: '10%',
                // width: '80%',
                // maxSize: '80%',
                left: '10%',
                width: '70%',
                minSize: '5%',
                maxSize: '70%',
                label: {
                    normal: {
                        position: 'inside',
                        // position: 'outside',
                        // formatter: '{c}%',
                        formatter: '{c}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        position: 'inside',
                        // formatter: '{b}实际: {c}%'
                        formatter: '{b}实际: {c}'
                    }
                },
                itemStyle: {
                    normal: {
                        opacity: 0.5,
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                },
                data: [
                    {
                        value: 75,
                        name: '成交',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        },
                        // label: {
                        //   normal: {
                        //     position: 'outside'
                        //   }
                        // }
                    },
                    {
                        value: 160,
                        name: '订单',
                        itemStyle: {
                            normal: {
                                color: ValueColor.GREEN
                            }
                        }
                    },
                    {
                        value: 420,
                        name: '有望',
                        itemStyle: {
                            normal: {
                                color: ValueColor.YELLOW
                            }
                        }
                    },
                    {
                        value: 1000,
                        name: '线索',
                        itemStyle: {
                            normal: {
                                color: ValueColor.RED
                            }
                        }
                    }
                ]
            }
        ]
    };
    convertionEcharts.setOption(option);
</script>
<script type="text/javascript">
    var wholesalesEcharts = echarts.init(document.getElementById('echart_wholesales'));
    option = {
        title: {
            text: "",
            subtext: "",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18
            },
        },
        backgroundColor: '#ffffff',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:({d}%)"
        },
        series: [{
            name: '批售详细数据',
            type: 'pie',
            // radius: ['0%', '60%'],
            radius: ['0%', '58%'],
            // color: ['#ec5d51', '#59abe1', '#f4cf42', '#3dc6a8'],
            color: ['#5DADE2', '#884EA0', '#F5B041',],
            // color: ['#FDFEFE', '#28B463'],
            // color: ['#a0dca0', '#60bbb6', '#f78db3'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{b}\n{c}'
                }
            },
            data: [
                {
                    value: 6000,
                    name: '已批售'
                },
                {
                    value: 2000,
                    name: '今日批售'
                },
                {
                    value: 4000,
                    name: '缺口'
                },
            ]
        }, {
            name: '批售总体数据',
            type: 'pie',
            radius: ['60%', '70%'],
            labelLine: {
                normal: {
                    length: 1,
                    length2: 1
                }
            },
            //color: ['#a0dca0', '#60bbb6', '#f78db3', '#feadac', '#fae395′,'#91d4e5′,'#8eb3e8'],
            color: ['#28B463', '#FDFEFE'],
            label: {
                normal: {
                    formatter: '{b}\n{c}'
                }
            },
            data: [
                {
                    value: 8000,
                    name: '已完成'
                },
                {
                    value: 4000,
                    name: '缺口'
                }
            ]
        }]
    };
    wholesalesEcharts.setOption(option);
</script>
<script type="text/javascript">
    var inventoryEcharts = echarts.init(document.getElementById('echart_inventory'));
    option = {
        title: {
            text: "",
            subtext: "",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18
            },
        },
        backgroundColor: '#ffffff',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:({d}%)"
        },
        series: [
            // {
            //   name: '总部库存',
            //   type: 'pie',
            //   // radius: ['20%', '40%'],
            //   radius: ['20%', '45%'],
            //   // color: [ ValueColor.RED ],
            //   label: {
            //       normal: {
            //           position: 'inner',
            //           formatter: '{b}: {c}\n库存当量: 0.34'
            //       }
            //   },
            //   data: [
            //     {
            //         value: 1438,
            //         name: '总部',
            //         normal: {
            //           color: ValueColor.RED
            //         }
            //     }
            //   ]
            // },
            // {
            //   name: '经销商库存',
            //   type: 'pie',
            //   // radius: ['40%', '60%'],
            //   radius: ['45%', '70%'],
            //   labelLine : {
            //     normal : {
            //       length : 1,
            //       length2 : 1
            //     }
            //   },
            //   color: [ ValueColor.GREEN ],
            //   label: {
            //       normal: {
            //           formatter: '{b}: {c}\n库存当量: 2.31'
            //       }
            //   },
            //   data: [
            //     {
            //         value: 563,
            //         name: '经销商',
            //         // normal: {
            //         //   color: ValueColor.GREEN
            //         // }
            //     }
            //   ]
            // }
            {
                name: '库存系数',
                type: 'pie',
                selectedMode: 'single',
                radius: ['0%', '50%'],
                label: {
                    normal: {
                        position: 'center',
                        formatter: '{a} {c}',
                        textStyle: {
                            // color: '#000000',
                            color: ValueColor.RED,
                            fontSize: 16
                        }
                    },
                    emphasis: {
                        position: 'center',
                        formatter: '{a} {c}',
                        textStyle: {
                            // color: '#000000',
                            color: ValueColor.RED,
                            fontSize: 16
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ECF0F5'
                    }
                },
                data: [
                    {
                        value: '3.4',
                        name: '总部',
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{c} ({d}%)'
                        },
                    }
                ]
            },
            {
                name: '库存数量',
                type: 'pie',
                radius: ['50%', '70%'],
                labelLine: {
                    normal: {
                        length: 1,
                        length2: 1
                    }
                },
                color: [ValueColor.RED],
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{c}'
                    }
                },
                data: [
                    {
                        value: 5623,
                        name: '经销商',
                        // normal: {
                        //   color: ValueColor.GREEN
                        // }
                    }
                ]
            }
        ]
    };
    inventoryEcharts.setOption(option);
</script>
</body>
</html>

效果:

总体上的效果还是可以的。

转载请注明:在路上 » 【记录】用AdminLTE实现报表的原型

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
93 queries in 0.181 seconds, using 23.48MB memory