深航电企业评价评级系统可视化（HTML，CSS，JS）-526互联

一.项目背景

深航电企业评价评级系统EERS是一款企业绩效评价平台，旨在为企业提供科学、全面、精准的绩效评价服务，帮助企业发现问题、改进管理，提高整体绩效。

EERS评级系统借助大数据、云计算、人工智能等现代技术手段，将企业绩效数据进行多维度、系统化、动态化分析，为企业提供可视化的评级结果，帮助企业管理者直观了解企业的优势与不足，找到关键问题，制定科学的改进策略。

本项目旨在为EERS评级系统开发一套可视化界面，通过图表、雷达图等直观的数据展示方式，呈现企业绩效评价结果，让用户能够更为直观地了解企业的绩效表现，并及时作出应对措施，从而实现企业的长远发展目标。

二.项目开发意义

深航电企业评价评级系统EERS可视化项目的开发意义在于帮助深航电企业更加全面、直观地了解企业的运营情况，提高企业管理水平，优化经营决策，提高企业的竞争力和发展潜力。具体包括以下几个方面：

1. 提高数据的可视化程度：EERS可视化项目将海量的企业数据通过图表、报表、图形等方式呈现，帮助企业决策者快速全面地把握企业的运营情况，更好地发现问题，制定合适的调整方案。

2. 实现即时监控：EERS可视化项目具有实时监控功能，可以及时汇总和反馈企业数据，让企业决策者在第一时间得到数据的变化，根据变化及时做出反应，优化企业经营管理。

3. 提高数据价值：EERS可视化项目通过对数据的深入分析和挖掘，发现企业发展的优势和劣势，制定更加科学合理的经营计划和管理策略，提高数据价值，为企业的发展提供有力支持。

4. 提高企业竞争力：EERS可视化项目的开发可以提高企业的管理水平，优化经营决策，提高企业的竞争力和发展潜力。通过及时准确的数据反馈，帮助企业管理者掌握市场动态，把握发展机遇，快速响应市场变化，提高企业的市场占有率和营销效益。

总之，EERS可视化项目的开发在企业经营管理中具有重要的意义，它可以提高企业的管理水平，提高企业的竞争力和发展潜力，是企业在数据时代中必不可少的一项重要的工具。

三.开发流程

需求分析：确定项目的业务目标和用户需求，制定项目计划与目标。设计阶段：确定项目的数据来源，设计数据模型，创建原型，确定可视化图表等设计元素。

开发阶段：根据设计阶段的需求创建可视化图表和数据呈现方式，编写程序代码，实现业务逻辑，创建交互式视图。

测试阶段：测试项目的功能、用户体验和数据质量等方面，保证数据准确性和图表展示效果。

上线与维护阶段：将项目部署到生产环境，并对其进行长期的日常维护和更新。

四.技术架构

数据库技术：使用MySQL数据库管理数据。

前端技术：使用HTML、CSS、JavaScript等前端技术实现交互式界面。

可视化图表库：使用ECharts、D3.js等可视化图表库实现图表展示。

五.项目展示--可视化模式

六.项目源码

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <link rel="icon" href="F:\图片\头像\微信图片_20210813214934.jpg">
    <link rel="stylesheet" href="./css/u-reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="top">
        <div class="topleft">
            <img src="../web-study-5.8（数据可视化）/img/toptext_1.png" alt="">
        </div>
        <div class="topright">
            <div class="righttop">
                <div class="righttopleft">
                    北京航为高科连接技术有限公司
                    <!-- <span>北京航为高科连接技术有限公司</span> -->
                </div>
                <div class="date_box"></div>
                <div class="shift_box_1">
                    <div class="shift"></div>
                    <div class="shift_text"><span>切换界面</span></div>
                </div>
                <div class="shift_box_1">
                    <div class="set"></div>
                    <div class="shift_text"><span>基础设置</span></div>
                </div>
                <div class="shift_box_1">
                    <div class="log"></div>
                    <div class="shift_text"><span>退出登录</span></div>
                </div>
            </div>  
            <div class="rightbutton">
                <div class="rightbutton_2 active"><span>企业评价</span></div>
                <div class="rightbutton_2"><span>财务评价</span></div>
                <div class="rightbutton_2"><span>行业分析</span></div>
                <div class="rightbutton_2"><span>财务情况</span></div>
                <div class="rightbutton_2"><span>财务比率</span></div>
                <div class="rightbutton_2"><span>杜邦分析</span></div>
                <div class="rightbutton_2"><span>资产负载</span></div>
                <div class="rightbutton_2"><span>经营质量</span></div>
            </div>
        </div>
    </div>

     <!-- 内容 -->
     <div class="content">

        <!-- 左 -->
        <div class="left">
            <div class="blt"></div>
            <div class="blb">
                <div id="blb_0" class="radar_main"></div>
                <div id="blb_1" class="radar"></div>
                <div id="blb_2" class="radar"></div>
                <div id="blb_3" class="radar"></div>
                <div id="blb_4" class="radar"></div>
                <div id="blb_5" class="radar"></div>
                <div id="blb_6" class="radar"></div>
                <div id="blb_7" class="radar"></div>
                <div id="blb_8" class="radar"></div>
                <div class="wz">
                    <ul>
                        <li>当前</li>
                        <li>总分:42.29</li>
                        <li>均分:7.05</li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- 中 -->
        <div class="mid">
            <div class="contenttop">
                <div class="ctt">
                    <div class="logo_1">
                        <img src="../web-study-5.8（数据可视化）/img/1.png" alt="">
                        <b>行业格局</b>
                    </div>
                    <div class="logo"></div>
                </div>
                <div class="ctb" id="ctb_2"></div>


            </div>
            <div class="contentbutton">
                <div class="ctt">
                    <div class="logo_1">
                        <img src="../web-study-5.8（数据可视化）/img/3.png" alt="">
                        <b>能力排名</b>
                    </div>
                    <div class="logo"></div>
                </div>
                <div class="cbb" id="cbb_1"></div>
            </div>
        </div>


        <!-- 右 -->
        <div class="right">
            <div class="contenttop">
                <div class="ctt">
                    <div class="logo_1">
                        <img src="../web-study-5.8（数据可视化）/img/2.png" alt="">
                        <b>行业趋势</b>
                    </div>
                    <div class="logo"></div>
                </div>
                <div class="ctb" id="ctb_1"></div>
            </div>

            
            <div class="contentbutton">
                <div class="ctt">
                    <div class="logo_1">
                        <img src="../web-study-5.8（数据可视化）/img/4.png" alt="">
                        <b>space矩阵</b>
                    </div>
                    <div class="logo"></div>
                </div>
                <div class="cbb" id="cbb_2">
                    <div class="_li">
                        <img src="./img/u.png" alt="" class="t"> 
                        <img src="./img/d.png" alt="" class="b">
                        <img src="./img/z.png" alt="" class="l">
                        <img src="./img/y.png" alt="" class="r">
                        <div class="lt"><span>保守</span></div>
                        <div class="rt"><span>进攻</span></div>
                        <div class="lb"><span>防御</span></div>
                        <div class="rb"><span>竞争</span></div>
                        <b class="sr">产业优势</b>
                        <b class="st">财务优势</b>
                        <b class="sl">竞争优势</b>
                        <b class="sb">环境稳定性</b>
                        <div class="dot"></div>
                        <div class="line"></div>
                        <img src="./img/gold.png" alt="" class="gol">
                    </div>

                </div>
            </div>
        </div> 


    </div>
    <script src="./js/echarts4.min.js"></script> 
    <script src="./js/echarts-gl.min.js"></script>
    <script src="./js/index.js"></script>
</body>
</html >

2.CSS

html{
    width: 100%;
    height: 100%;
    min-width: 1024px;
    overflow-y: hidden;
}
body{
    width: 100%;
    height: 100%;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 32px 3% 32px 3%;
    box-sizing: border-box;
}
.top{
    width: 100%;
    height: 100px;
    background-image: url(../img/top.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction:row;
}
.content{
    width: 100%;
    height: calc(100vh - 184px);
    margin-top: 20px;
}
.left{
    width: 50%;
    height: 100%;
    background-image: url(../img/left.png);
    background-size: 100% 100%;
    float: left;
    display: flex;
    flex-direction:column;
    justify-content:space-between;
}
.mid{
    width:23%;
    height: 100%;
    float: left;
    margin-left:2%;
    display: flex;
    flex-direction:column;
    justify-content:space-between;

}
.right{
    width:23%;
    height: 100%;
    float: right;
    display: flex;
    flex-direction:column;
    justify-content:space-between;
}  
.contenttop{
    width: 100%;
    height: 40%;
    background-image: url(../img/connecttop.png);
    background-size: 100% 100%;
    
}
.contentbutton{
    width: 100%;
    height: 58%;
    background-image: url(../img/connectbutton.png);
    background-size: 100% 100%;
}
.topleft{
    width: 29.5%;
    height: 100%;
    margin-left: 1%;
}
.topleft img{
    width: 100%;
    height: 30%;
    background-size: 100% 100%;
    margin-top: 8%;
    margin-left: 5%;
}
.topright{
    width: 80%;
    height: 100%;
}
.righttop{
    width: 100%;
    height: 43%;
    display: flex;
}
.rightbutton{
    width: 100%;
    height: 60%;
    margin-left: 3.5%;
}
.righttopleft{
    width: 22%;
    height: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../img/rectangle.png);
    margin-top: 1%;
    margin-left: 6%;
    color: #fff;
    font-size: 15%;
    text-align: center;
    line-height: 200%;
}
.righttopleft span{
    margin-left: 8%;
    color: #fff;
    font-size: 12px;
}
.date_box{
    width: 230px;
    height: 30px;
    color: #fff;
    font-size: 20px;
    margin-left: 15%;
    margin-top: 1%;
}
.shift_box_1{
    width: 15%;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content:flex-end;
}
.shift{
    width: 30px;
    height: 70%;
    background-image: url(../img/shift.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.shift_text span{
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 20px;
    margin-left: 2px;
}
.set{
    width: 30px;
    height: 70%;
    background-image: url(../img/set.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.log{
    width: 30px;
    height: 70%;
    background-image: url(../img/log.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* .rightbutton_1{
    width: 10.1%;
    height: 75%;
    float: left;
    background-image: url(../img/leftbutton_1.png);
    background-repeat: no-repeat;
    margin-left: 1.5%;
    margin-top: 1%;
    background-size:100% 100%;
    display: flex;
    flex-direction:column;
    justify-content:center;
} */
.rightbutton_2{
    width: 10.1%;
    height: 75%;
    float: left;
    background-image: url(../img/leftbutton_2.png);
    background-repeat: no-repeat;
    margin-left: 0.6%;
    margin-top: 1%;
    background-size:100% 100%;
    display: flex;
    flex-direction:column;
    justify-content:center;
}
.rightbutton_1 span{
    color: #fff;
    margin-left: 22%;
    cursor: pointer;
}
.rightbutton_2 span{
    color: #fff;
    margin-left: 22%;
    cursor: pointer; 
}
.blt{
    width: 22%;
    height: 3%;
    margin-left: 35%;
    margin-top: 2.6%;
    background-image: url(../img/blt.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.rightbutton_1:hover{
    background-image: url(../img/leftbutton_1.png);
}
.rightbutton_2:hover{
    background-image: url(../img/leftbutton_1.png);
}
.blb{
    width: 100%;
    height: 90%;
    margin-left: 7px; 
    margin-bottom: 0.6%;
    position: relative;
}
.ctt{
    width: 100%;
    height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
}
.logo{
    width: 100%;
    height: 10px;
    background-image: url(../img/link.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.logo_1{
    width: 100%;
    height: 40px;
    display: flex;
}
.logo_1 img{
    margin-top: 18px;
}
.logo_1 b{
    color:#b6eefe;
    font-size: 20px;
    margin-top: 14px;
    margin-left: 10px;
}
.ctb{
    width: 100%;
    height:90%;
    margin-top: 5px;
}
.cbb{
    width: 100%;
    height: 88%;
    margin-top: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.active{
    background-image: url(../img/leftbutton_1.png);
}
#cbb_1{
    margin-top: -25px;
}
#cbb_2{
    background-image:url(../img/space.png) ;
    background-position: center;
    transform: translateX(-10px);
}
._li{
    width: 200px;
    height: 200px;
    transform: translate(5px,-40px);
    position: relative;
}
.lt{
    width: 100px;
    height: 100px;
    border-bottom:2px solid #cfcecd;
    border-right:2px solid #cfcecd;
    box-sizing: border-box;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rt{
    width: 100px;
    height: 100px;
    border-bottom:2px solid #cfcecd;
    box-sizing: border-box;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb{
    width: 100px;
    height: 100px;
    border-right:2px solid #cfcecd;
    box-sizing: border-box;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rb{
    width: 100px;
    height: 100px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
._li span{
    font-size: 18px;
    color: rgba(73, 108, 151, 0.4);
}
._li img{
    width: 11px;
    position: absolute;
}
.t{
    left: 94px;
    top: -8px;
}
.l{
    top: 93px;
    left: -8px;
}
.b{
    left: 94px;
    bottom: -8px;
}
.r{
    top: 93px;
    right: -8px;
}
.cbb b{
    position: absolute;
    font-size: 12px;
    color: #fff;
}
.sr{
    left: 207px;
    top: 67px;
}
.sl{
    right: 207px;
    top: 67px;
}
.st{
    left: 76px;
    top: -20px;
}
.sb{
    left: 70px;
    bottom: -20px;

}
.dot{
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: gold;
    border-radius: 50%;
    left: 94px;
    top: 94px;
}
.line{
    width: 2px;
    height: 105px;
    background-color: gold;
    position: absolute;
    left: 99px;
    top: -6px;
    transform-origin: bottom;
    transform: rotate(106deg);
}
.gol{
    position: absolute;
    width: 10px;
    left: 195px;
    top: 123px;
}
.radar_main{
    width: 420px;
    height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* border-radius: 50%; */
    background-image: url(../img/earth.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 72% 72%;
}
.radar{
    width: 150px;
    height: 130px;
    position: absolute;
    /* border-radius: 50%; */
    background-image: url(../img/001.png);
    background-repeat: no-repeat;
    background-size: 100% 80%;
    background-position: bottom;
}
#blb_1{
    position: absolute;
    left: 1%;
    top: 40%;
}
#blb_5{
    position: absolute;
    right:1%;
    top: 40%;
}
#blb_3{
    position: absolute;
    left: 40%;
    top: -2%;
}
#blb_7{
    position: absolute;
    left: 40%;
    bottom: 0%;
}
#blb_4{
    position: absolute;
    left: 72%;
    top: 10%;
}
#blb_2{
    position: absolute;
    right: 72%;
    top: 10%;
}
#blb_6{
    position: absolute;
    left: 72%;
    bottom: 10%;
}
#blb_8{
    position: absolute;
    right: 72%;
    bottom: 10%;
}
.wz{
    width: 150px;
    height: 80px;
    position: absolute;
    bottom: 0px;
    background-image: url(../img/002.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left;
}
.wz li{
    color: #fff;
    font-size: 12px;
    margin-left: 45px;
    margin-top: 3px;
}

3.JS

//时间
var date_box = document.querySelector(".date_box")
var time = function () {
  var date = new Date();
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  var h = date.getHours();
  var mi = date.getMinutes();
  var s = date.getSeconds();
  m = m < 10 ? "0" + m : m;
  d = d < 10 ? "0" + d : d;
  h = h < 10 ? "0" + h : h;
  mi = mi < 10 ? "0" + mi : mi;
  s = s < 10 ? "0" + s : s;
  date_box.innerHTML = `${y}-${m}-${d} ${h}:${mi}:${s}`
}
time();
setInterval(time, 1000);

//点击事件
let list = document.querySelectorAll(".rightbutton_2");
console.log(list);
for (let i = 0; i < list.length; i++) {
  list[i].onclick = function () {
    for (let j = 0; j < list.length; j++) {
      // list[j].style.backgroundImage="url(../web-study-5.8（数据可视化）/img/leftbutton_2.png)"
      list[j].classList.remove("active")
    }
    // list[i].style.backgroundImage="url(../web-study-5.8（数据可视化）/img/leftbutton_1.png)"
    list[i].classList.add("active")
  }
}

//行业趋势图表
function get_ctb_1() {
  var MyChart = echarts.init(document.querySelector("#ctb_1"))
  var option = {
    color: ['rgba(255,225,143,0.7)', 'rgba(0,255,255,0.7)', 'rgba(85,111,181,0.7)'],
    legend: {
      itemWidth: 10,
      itemHeight: 11,
      itemGap: 16,
      textStyle: {
        color: "#68a8cc",
        fontSize: 8,
      }
    },
    grid: {
      top: "18%",
      left: "12%",
      right: "8%",
      bottom: "10%"
    },
    tooltip: {},
    dataset: {
      source: [
        ['product', '营业收入', '企业同比', '行业同比'],
        ['T1', 5, 7.8, 6.8],
        ['T2', 5, 5.8, 6.8],
        ['T3', 3.8, 3.2, 5],
        ['T4', 3.8, 6.5, 5.8]
      ]
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: "rgba(104,168,204,0.5)",
          width: 2,
        }
      },
      axisLabel: {
        color: "rgba(104,168,204,0.6)",
        fontSize: 10
      }
    },
    yAxis: {
      min: 0,
      max: 10,
      splitLine: {
        lineStyle: {
          color: "rgba(104,168,204,0.5)",
          width: 2
        }
      }
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  };
  MyChart.setOption(option)
}
get_ctb_1()

//行业格局图表
function get_ctb_2() {
  var MyChart = echarts.init(document.querySelector("#ctb_2"))



  /*************************
  pie3D 尝试
  
  更新时间: 2020.7.21 13:30 v0.5
  使用组件: grid3D、xAxis3D、yAxis3D、zAxis3D、surface
  
  *************************
  【 getParametricEquation 函数说明 】 :
  *************************
      根据传入的
      startRatio（浮点数）: 当前扇形起始比例，取值区间 [0, endRatio)
      endRatio（浮点数）: 当前扇形结束比例，取值区间 (startRatio, 1]
      isSelected（布尔值）:是否选中，效果参照二维饼图选中效果（单选）
      isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
      
      生成 3D 扇形曲面
  
  *************************
  【 getPie3D 函数说明 】 :
  *************************
      根据传入的饼图数据，生成模拟 3D 饼图的配置项 option
      
      饼图数据格式示意：
      [{
          name: '数据1',
          value: 10
      }, {
          // 数据项名称
          name: '数据2',
          value : 56,
          itemStyle:{
              // 透明度
              opacity: 0.5,
              // 扇形颜色
              color: 'green'
          }
      }]
      
  *************************
  【 鼠标事件监听说明 】 :
  *************************
      click： 实现饼图的选中效果（单选）
              大致思路是，通过监听点击事件，获取到被点击数据的系列序号 params.seriesIndex，
              然后将对应扇形向外/向内移动 10% 的距离。
              
      mouseover： 近似实现饼图的高亮（放大）效果
              大致思路是，在饼图外部套一层透明的圆环，然后监听 mouseover 事件，获取
              到对应数据的系列序号 params.seriesIndex 或系列名称 params.seriesName，
              如果鼠标移到了扇形上，则先取消高亮之前的扇形（如果有）,再高亮当前扇形；
              如果鼠标移到了透明圆环上，则只取消高亮之前的扇形（如果有），不做任何高亮。
              
      globalout： 当鼠标移动过快，直接划出图表区域时，有可能监听不到透明圆环的 mouseover，
              导致此前高亮没能取消，所以补充了对 globalout 的监听。
  
          
  *************************/

  // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {

    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false;
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== 'undefined' ? k : 1 / 3;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 1;

    // 返回曲面参数方程
    return {

      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20
      },

      x: function (u, v) {
        if (u < startRadian) {
          return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        if (u > endRadian) {
          return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      y: function (u, v) {
        if (u < startRadian) {
          return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        if (u > endRadian) {
          return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      z: function (u, v) {
        if (u < - Math.PI * 0.5) {
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u);
        }
        return Math.sin(v) > 0 ? 1 * height : -1;
      }
    };
  };

  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {

    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;

    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {

      sumValue += pieData[i].value;

      let seriesItem = {
        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
        type: 'surface',
        parametric: true,
        wireframe: {
          show: false
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k
        }
      };

      if (typeof pieData[i].itemStyle != 'undefined') {

        let itemStyle = {};

        typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
        typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;

        seriesItem.itemStyle = itemStyle;
      }
      series.push(seriesItem);
    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value;
      console.log(series[i]);
      series[i].pieData.startRatio = startValue / sumValue;
      series[i].pieData.endRatio = endValue / sumValue;
      series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

      startValue = endValue;

      legendData.push(series[i].name);
    }

    // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
    series.push({
      name: 'mouseoutSeries',
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      itemStyle: {
        opacity: 0.1,
        color: '#E1E8EC',
      },
      parametricEquation: {
        u: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },
        v: {
          min: 0,
          max: Math.PI,
          step: Math.PI / 20,
        },
        x: function (u, v) {
          return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
        },
        y: function (u, v) {
          return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
        },
        z: function (u, v) {
          return Math.cos(v) > 0 ? -0.5 : -5;
        },
      },
    });

    // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
    series.push({
      name: 'mouseoutSeries',
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      itemStyle: {
        opacity: 0.1,
        color: '#000d36',
      },
      parametricEquation: {
        u: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },
        v: {
          min: 0,
          max: Math.PI,
          step: Math.PI / 20,
        },
        x: function (u, v) {
          return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
        },
        y: function (u, v) {
          return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
        },
        z: function (u, v) {
          return Math.cos(v) > 0 ? -5 : -7;
        },
      },
    });
    series.push({
      name: 'mouseoutSeries',
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      itemStyle: {
        opacity: 0.1,
        color: '#0030b8',

      },

      parametricEquation: {
        u: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },
        v: {
          min: 0,
          max: Math.PI,
          step: Math.PI / 20,
        },
        x: function (u, v) {
          return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
        },
        y: function (u, v) {
          return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
        },
        z: function (u, v) {
          return Math.cos(v) > 0 ? -7 : -7;
        },
      },
    });
    return series;
  }
  // 传入数据生成 option
  const optionsData = [
    {
      name: '主板',
      value: 100,
      itemStyle: {
        //   opacity: 0.5,
        color: 'rgba(0,180,255,0.7)',
      },
    },

    {
      name: '科创版',
      value: 30,
      itemStyle: {
        //   opacity: 0.5,
        color: 'rgba(255,174,0,0.7)',
      },
    },
  ];

  const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);

  series.push({
    name: 'pie2d',
    type: 'pie',
    label: {
      opacity: 1,
      fontSize: 13,
      lineHeight: 20,
      textStyle: {
        fontSize: 12,
      },
    },
    labelLine: {

      length: 10,
      length2: 20,
    },
    startAngle: -30, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ['25%', '60%'],

    center: ['50%', '50%'],
    data: optionsData,
    itemStyle: {
      opacity: 0,
    },
  });
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  option = {
    animation: true,
    tooltip: {
      formatter: params => {
        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
          return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value + '辆'}`;
        }
      },
      textStyle: {
        fontSize: 16
      },
    },
    title: {

      x: 'center',
      top: '20',
      textStyle: {
        color: '#fff',
        fontSize: 22,
      },
    },
    // backgroundColor: '#333',
    labelLine: {
      show: true,
      lineStyle: {
        color: '#7BC0CB',
      },
    },
    label: {
      show: true,
      position: 'outside',
      formatter: '{b} \n{c} {d}%',
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.5,
      //top: '30%',
      bottom: '50%',
      // environment: '#021041',

      viewControl: {
        distance: 150,
        alpha: 25,
        beta: 20,

        autoRotate: false, // 自动旋转
      },

    },

    series: series,
  };
  MyChart.setOption(option)
}
get_ctb_2()

//雷达图
function get_radar_main() {
  var MyChart = echarts.init(document.querySelector(".radar_main"))
  var option = {
    // backgroundColor: '#0A2E5D',
    "normal": {
      "top": 200,
      "left": 300,
      "width": 500,
      "height": 400,
      "zIndex": 6,
      "backgroundColor": ""
    },
    "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
    "title": {
      "show": true,
      // "text": "学生行为习惯分析",
      "left": "40%",
      "top": "1%",
      "textStyle": {
        "fontSize": 18,
        "color": "#fff",
        "fontStyle": "normal",
        "fontWeight": "normal"
      }
    },
    "tooltip": {
      "show": true,
      "trigger": "item"
    },
    "legend": {
      "show": true,
      "icon": "circle",
      "left": "35%",
      "top": "90%",
      "orient": "horizontal",
      "textStyle": {
        "fontSize": 14,
        "color": "#fff"
      },
      // "data": ["高一(1)班", "高一(2)班"]
    },
    "radar": {
      "center": ["50%", "50%"],
      "radius": "70%",
      "startAngle": 90,
      "splitNumber": 5,
      "shape": "circle",
      "splitArea": {
        "areaStyle": {
          "color": ["transparent"]
        }
      },
      "axisLabel": {
        "show": false,
        "fontSize": 18,
        "color": "#fff",
        "fontStyle": "normal",
        "fontWeight": "normal"
      },
      "axisLine": {
        "show": true,
        "lineStyle": {
          "color": "#045c95 "//
        }
      },
      "splitLine": {
        "show": true,
        "lineStyle": {
          "color": "#045c95"//
        }
      },
      "indicator":
        [{
          "color": "#fff",
          "name": "战略能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "组织能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "财务能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "制造能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "资源能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "营销能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "研发能力",
          "max": 10
        }, {
          "color": "#fff",
          "name": "执行能力",
          "max": 10
        }]
    },
    "series": {
      "name": "企业经济能力评价",
      "type": "radar",
      "symbol": "circle",
      "symbolSize": 0,
      // "itemStyle": {
      //     "normal": {
      //         color:'rgba(19, 173, 255, 1)',
      //         "borderColor": "rgba(19, 173, 255, 0.4)",
      //         "borderWidth": 10
      //     }
      // },
      "areaStyle": {
        "normal": {
          "color": "rgba(1, 232, 223, 1)"
        }
      },
      "lineStyle": {
        "normal": {
          "color": "rgba(1, 232, 223, 0)",
          "width": 2,
          "type": "dashed"
        }
      },
      "data": [
        [5.8, 9.8, 8, 2.3, 8, 7.9, 0, 10]
      ]
    }
  };
  MyChart.setOption(option)
}
get_radar_main()

//能力排名
function get_bbb_1() {
  var MyChart = echarts.init(document.querySelector("#cbb_1"))

  let category = [
    {
      name: "研发能力",
      value: 0 + ".00",
    },
    {
      name: "制造能力",
      value: 2.3 + "0",
    },
    // {
    //     name: "营销能力",
    //     value: 7.9+"0",
    // },
    // {
    //     name: "组织能力",
    //     value: 9.8+"0",
    // },
    // {
    //     name: "执行能力",
    //     value: 10+".00",
    // },
    // {
    //     name: "财务能力",
    //     value: 8+".00",
    // },
    {
      name: "战略能力",
      value: 5.8 + "0",
    },
    {
      name: "营销能力",
      value: 7.9 + "0",
    },
    {
      name: "资源能力",
      value: 8 + ".00",
    },
    {
      name: "财务能力",
      value: 8 + ".00",
    },
    {
      name: "组织能力",
      value: 9.8 + "0",
    },
    {
      name: "执行能力",
      value: 10 + ".00",
    },
  ];
  let yName = []; // y轴名称
  let bgData = []; // 最大值用作背景显示的数据
  let maxValue = category[category.length - 1].value; //最大值
  category.forEach((element) => {
    yName.push(element.name);
    bgData.push({
      name: element.name,
      value: maxValue,
      type: element.type,
    });
  });
  var option = {
    // backgroundColor: '#000',
    xAxis: {
      max: maxValue,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    grid: {
      left: 60,
      top: 20,
      right: 80,
      bottom: 0,
    },
    yAxis: [
      {
        // 每条图形上面的文字
        inverse: false,
        data: yName,
        axisLabel: {
          padding: [-10, 0, 20, 0],
          inside: true,
          textStyle: {
            fontSize: 10,
            fontWeight: 400,
            color: "#feffff",
            align: "left",
          },
          formatter: "{value}",
          rich: {
            a: {
              color: "transparent",
              lineHeight: 20,
              fontSize: 14,
              shadowColor: "rgba(0, 0, 0, 1)",
              shadowBlur: 10,
            },
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      {
        // y轴最左侧的文字
        axisTick: "none",
        axisLine: "none",
        position: "left",
        axisLabel: {
          padding: [-3, 13, 13, 10], // 调整文字位置
          textStyle: {
            color: "#feffff",
            fontSize: "18",
            fontWeight: "400",
          },
        },
        data: ["[8]", "[7]", "[6]", "[5]", "[4]", "[3]", "[2]", "[1]"],
      },
      {
        // y轴最右侧的文字
        axisTick: "none",
        axisLine: "none",
        type: "category",
        axisLabel: {
          margin: 10,
          textStyle: {
            color: "#34ecff",
            fontSize: "18",
          },
        },
        data: category,
      },
    ],
    series: [
      {
        // 背景样式
        name: "背景",
        type: "bar",
        barWidth: 18,
        stack: "总量",
        barGap: "-100%",
        symbol: "fixed",
        symbolRepeat: "repeat",
        legendHoverLink: false,
        itemStyle: {
          normal: {
            color: "rgba(75, 93, 132, 0.5)",
          },
        },
        data: bgData,
        animation: false, //关闭动画
        z: 0,
      },
      {
        name: "info",
        // 内（显示的内容）
        type: "bar",
        barGap: "-100%",
        barWidth: 18,
        legendHoverLink: false,
        silent: true,
        itemStyle: {
          normal: {
            color: function (params) {
              console.log(params.dataIndex);
              var color;
              if (params.dataIndex % 2 != 0) {
                color = {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#34ecff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(248,222,28,1)", // 100% 处的颜色
                    },
                  ],
                };
              } else {
                color = {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#34ecff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(248,222,28,1)", // 100% 处的颜色
                    },
                  ],
                };
              }
              return color;
            },
          },
        },
        data: category,
        z: 1,
        animationEasing: "elasticOut",
      },
      {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,1)",
          },
        },
        symbolRepeat: "fixed",
        symbolMargin: 4,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [2, 18],
        symbolPosition: "start",
        symbolOffset: [0, 0],
        symbolBoundingData: maxValue,
        data: bgData,
        animation: false, //关闭动画
        z: 2,
      },
    ],
  };
  MyChart.setOption(option)
}
get_bbb_1()

//小雷达图
function get_radar_3() {
  var MyChart = echarts.init(document.querySelector("#blb_3"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "企业战略",
             "max": 10
         }, {
           "color":"#fff",
             "name": "市场状况",
             "max": 10
         }, {
           "color":"#fff",
             "name": "竞争态势",
             "max": 10
         }, {
           "color":"#fff",
             "name": "行业状况",
             "max": 10
         }, {
           "color":"#fff",
             "name": "风控管理",
             "max": 10
         }, ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [10,0,6,6,10]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_3()

function get_radar_2() {
  var MyChart = echarts.init(document.querySelector("#blb_2"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "领导力",
             "max": 10
         }, {
           "color":"#fff",
             "name": "员工效率",
             "max": 10
         }, {
           "color":"#fff",
             "name": "员工激励",
             "max": 10
         }, {
           "color":"#fff",
             "name": "员工素质",
             "max": 10
         },{
             "color":"#fff",
             "name": "授权体系",
             "max": 10
         },{
             "color":"#fff",
             "name": "组织结构",
             "max": 10
         }, ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [10,10,8,3.5,10,10]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_2()

function get_radar_1() {
  var MyChart = echarts.init(document.querySelector("#blb_1"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "发展能力",
             "max": 10
         }, {
           "color":"#fff",
             "name": "盈利能力",
             "max": 10
         }, {
           "color":"#fff",
             "name": "盈利质量",
             "max": 10
         }, {
           "color":"#fff",
             "name": "运营能力",
             "max": 10
         }, ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [0,6,8,8]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_1()

function get_radar_4() {
  var MyChart = echarts.init(document.querySelector("#blb_4"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "处理",
             "max": 10
         }, {
           "color":"#fff",
             "name": "检查",
             "max": 10
         }, {
           "color":"#fff",
             "name": "行动",
             "max": 10
         }, {
           "color":"#fff",
             "name": "计划",
             "max": 10
         },{
             "color":"#fff",
             "name": "制度流程",
             "max": 10
         }, ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [10,10,10,10,10]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_4()

function get_radar_5() {
  var MyChart = echarts.init(document.querySelector("#blb_5"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "安全生产",
             "max": 10
         }, {
           "color":"#fff",
             "name": "工艺管理",
             "max": 10
         }, {
           "color":"#fff",
             "name": "库存管理",
             "max": 10
         }, {
           "color":"#fff",
             "name": "生产效率",
             "max": 10
         },{
             "color":"#fff",
             "name": "生产能力",
             "max": 10
         },{
             "color":"#fff",
             "name": "质量管理",
             "max": 10
         }, ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }   
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [10,6,8,8,9,7]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_5()

function get_radar_6() {
  var MyChart = echarts.init(document.querySelector("#blb_6"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "产品组合",
             "max": 10
         }, {
           "color":"#fff",
             "name": "客户关系",
             "max": 10
         }, {
           "color":"#fff",
             "name": "市场地位",
             "max": 10
         }, {
           "color":"#fff",
             "name": "营销策略",
             "max": 10
         },{
             "color":"#fff",
             "name": "销售能力",
             "max": 10
         }, ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }   
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [8,10,10,8,6]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_6()

function get_radar_7() {
  var MyChart = echarts.init(document.querySelector("#blb_7"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "IT资源",
             "max": 10
         }, {
           "color":"#fff",
             "name": "外部资源",
             "max": 10
         }, {
           "color":"#fff",
             "name": "无形资源",
             "max": 10
         }, {
           "color":"#fff",
             "name": "有形资源",
             "max": 10
         } ]
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }   
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [6,6,6,10]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_7()

function get_radar_8() {
  var MyChart = echarts.init(document.querySelector("#blb_8"));
  var option = {
    // backgroundColor: '#0A2E5D',
     "normal": {
         "top": 200,
         "left": 300,
         "width": 500,
         "height": 400,
         "zIndex": 6,
         "backgroundColor": ""
     },
     "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
     "title": {
         "show": true,
         // "text": "学生行为习惯分析",
         "left": "40%",
         "top": "1%",
         "textStyle": {
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         }
     },
     "tooltip": {
         "show": true,
         "trigger": "item"
     },
     "legend": {
         "show": true,
         "icon": "circle",
         "left": "35%",
         "top": "90%",
         "orient": "horizontal",
         "textStyle": {
             "fontSize": 14,
             "color": "#fff"
         },
         // "data": ["高一(1)班", "高一(2)班"]
     },
     "radar": {
       name: { // (圆外的标签)雷达图每个指示器名称的配置项。
             formatter: '{value}',
             textStyle: {
                 fontSize: 6,
                 color: '#000'
             }
         },
         nameGap: 5,
         "center": ["50%", "50%"],
         "radius": "70%",
         "startAngle": 90,
         "splitNumber": 5,
         "shape": "circle",
         "splitArea": {
             "areaStyle": {
                 "color": ["transparent"]
             }
         },
         "axisLabel": {
             "show": false,
             "fontSize": 18,
             "color": "#fff",
             "fontStyle": "normal",
             "fontWeight": "normal"
         },
         "axisLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95 "//
             }
         },
         "splitLine": {
             "show": true,
             "lineStyle": {
                 "color": "#045c95"//
             }
         },
         "indicator": 
         [{
             "color":"#fff",
             "name": "安全生产",
             "max": 10
         }, {
           "color":"#fff",
             "name": "工艺管理",
             "max": 10
         }, {
           "color":"#fff",
             "name": "库存管理",
             "max": 10
         }, {
           "color":"#fff",
             "name": "生产效率",
             "max": 10
         } , {
           "color":"#fff",
             "name": "生产能力",
             "max": 10
         }, {
           "color":"#fff",
             "name": "质量管理",
             "max": 10
         }] 
     },
     "series":  {
       "name":"企业经济能力评价",
         "type": "radar",
         "symbol": "circle",
         "symbolSize": 0,
         // "itemStyle": {
         //     "normal": {
         //         color:'rgba(19, 173, 255, 1)',
         //         "borderColor": "rgba(19, 173, 255, 0.4)",
         //         "borderWidth": 10
         //     }
         // },
         "areaStyle": {
             "normal": {
                 "color": "rgba(163, 161, 91, 1)"
             }   
         },
         "lineStyle": {
             "normal": {
                 "color": "rgba(1, 232, 223, 1)",
                 "width": 2,
                 // "type": "dashed"
             }
         },
         "data": [
             [6,6,6,10,8,7]
         ]
     }
 };
  MyChart.setOption(option)
}
get_radar_8()
// grt_radar(document.querySelector("#blb_1"))
// grt_radar(document.querySelector("#blb_2"))
// grt_radar(document.querySelector("#blb_3"))
// grt_radar(document.querySelector("#blb_4"))
// grt_radar(document.querySelector("#blb_5"))
// grt_radar(document.querySelector("#blb_6"))
// grt_radar(document.querySelector("#blb_7"))
// grt_radar(document.querySelector("#blb_8"))

html5css3 html5 html 5css

前端笔记html5 css3

前端笔记html css

班级html css