最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

AdminLTE crifan 1053浏览 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>RSE总部报表</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>
        RSE总部报表
      </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>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    完成率<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>&nbsp;&nbsp;&nbsp;&nbsp;</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,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
66 queries in 0.265 seconds, using 19.05MB memory