devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

大数据库可视化模版40：Echart图例使用_图例数据库

作者：人工智能uu | 2024-06-29 15:05:26

赞

踩

图例数据库

博主介绍：《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。
所有项目都配有从入门到精通的基础知识视频课程，免费
项目配有对应开发文档、开题报告、任务书、PPT、论文模版等

项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
在文章末尾可以获取联系方式

效果图

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
  6.     <meta name="renderer" content="webkit">
  7.     
  8.     <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
  9.     <link rel="stylesheet" href="assets/css/index.css"/>
  10. </head>
  11. <body>
  12. <!--头部-->
  13. <div class="header">
  14.     Echart图例使用
  15.     <a href="javascript:;" class="a-access">
  16.         <button class="button type1">
  17.     		返回
  18.     	</button>
  19.     </a>
  20. </div>
  21. <!--主体-->
  22. <div class="main clearfix">
  23.     <div class="main-left">
  24.         <div class="border-container">
  25.             <div class="name-title">
  26.                 ===
  27.             </div>
  28.             <div id="radar"></div>
  29.             <span class="top-left border-span"></span>
  30.             <span class="top-right border-span"></span>
  31.             <span class="bottom-left border-span"></span>
  32.             <span class="bottom-right border-span"></span>
  33.         </div>
  34.         <div class="border-container">
  35.             <div class="name-title">
  36.                ===
  37.             </div>
  38.             <div id="graduateyear"></div>
  39.             <ul class="three-pie clearfix">
  40.                 <li>
  41.                     <div id="sexrate"></div>
  42.                 </li>
  43.                 <li>
  44.                     <div id="householdrate"></div>
  45.                 </li>
  46.             </ul>
  47.             <span class="top-left border-span"></span>
  48.             <span class="top-right border-span"></span>
  49.             <span class="bottom-left border-span"></span>
  50.             <span class="bottom-right border-span"></span>
  51.         </div>
  52.     </div>
  53.     <div class="main-middle">
  54.         <div class="border-container">
  55.             <div id="mapadd"></div>
  56.             <div class="number-show">
  57.                 <ul>
  58.                     <li>
  59.                         <span class="span-name">第一标准</span>
  60.                     </li>
  61.                     <li>
  62.                         <span class="span-number-show">653</span>
  63.                     </li>
  64.                     <li>
  65.                         <span class="span-name">第二标准</span>
  66.                     </li>
  67.                     <li>
  68.                         <span class="span-number-show">836252</span>
  69.                     </li>
  70.                     <li>
  71.                         <span class="span-name">第三标准</span>
  72.                     </li>
  73.                     <li>
  74.                         <span class="span-number-show">32162</span>
  75.                     </li>
  76.                 </ul>
  77.             </div>
  78.             <span class="top-left border-span"></span>
  79.             <span class="top-right border-span"></span>
  80.             <span class="bottom-left border-span"></span>
  81.             <span class="bottom-right border-span"></span>
  82.         </div>
  83.         <div class="border-container">
  84.             <ul class="teacher-pie clearfix">
  85.                 <li>
  86.                     <div class="name-title">
  87.                         =======
  88.                     </div>
  89.                     <div id="courserate"></div>
  90.                 </li>
  91.                 <li>
  92.                     <div class="name-title">
  93.                        =======
  94.                     </div>
  95.                     <div id="professionrate"></div>
  96.                 </li>
  97.             </ul>
  98.  
  99.             <div class="name-title">
  100.                 ===
  101.             </div>
  102.             <div id="changedetail"></div>
  103.             <span class="top-left border-span"></span>
  104.             <span class="top-right border-span"></span>
  105.             <span class="bottom-left border-span"></span>
  106.             <span class="bottom-right border-span"></span>
  107.         </div>
  108.     </div>
  109.     <div class="main-right">
  110.         <div class="border-container">
  111.             <div class="name-title">
  112.                 ===
  113.             </div>
  114.            <table class="table table-kingdargen">
  115.                <thead>
  116.                    <tr>
  117.                        <th>test1</th>
  118.                        <th>test2</th>
  119.                        <th>test3</th>
  120.                        <th>test4</th>
  121.                        <th>test5</th>
  122.                    </tr>
  123.                </thead>
  124.                <tbody>
  125.                    <tr>
  126.                        <td>a</td>
  127.                        <td>268</td>
  128.                        <td>212</td>
  129.                        <td>342</td>
  130.                        <td>256</td>
  131.                    </tr>
  132.                    <tr>
  133.                        <td>b</td>
  134.                        <td>268</td>
  135.                        <td>212</td>
  136.                        <td>342</td>
  137.                        <td>256</td>
  138.                    </tr>
  139.                    <tr>
  140.                        <td>c</td>
  141.                        <td>268</td>
  142.                        <td>212</td>
  143.                        <td>342</td>
  144.                        <td>256</td>
  145.                    </tr>
  146.                    <tr>
  147.                        <td>d</td>
  148.                        <td>268</td>
  149.                        <td>212</td>
  150.                        <td>342</td>
  151.                        <td>256</td>
  152.                    </tr>
  153.                    <tr>
  154.                        <td>e</td>
  155.                        <td>268</td>
  156.                        <td>212</td>
  157.                        <td>342</td>
  158.                        <td>256</td>
  159.                    </tr>
  160.                    <tr>
  161.                        <td>f</td>
  162.                        <td>268</td>
  163.                        <td>212</td>
  164.                        <td>342</td>
  165.                        <td>256</td>
  166.                    </tr>
  167.                    <tr>
  168.                        <td>g</td>
  169.                        <td>268</td>
  170.                        <td>212</td>
  171.                        <td>342</td>
  172.                        <td>256</td>
  173.                    </tr>
  174.                    <tr>
  175.                        <td>h</td>
  176.                        <td>268</td>
  177.                        <td>212</td>
  178.                        <td>342</td>
  179.                        <td>256</td>
  180.                    </tr>
  181.                    <tr>
  182.                        <td>i</td>
  183.                        <td>268</td>
  184.                        <td>212</td>
  185.                        <td>342</td>
  186.                        <td>256</td>
  187.                    </tr>
  188.                    <tr>
  189.                        <td>k</td>
  190.                        <td>268</td>
  191.                        <td>212</td>
  192.                        <td>342</td>
  193.                        <td>256</td>
  194.                    </tr>
  195.                    <tr>
  196.                        <td>k</td>
  197.                        <td>268</td>
  198.                        <td>212</td>
  199.                        <td>342</td>
  200.                        <td>256</td>
  201.                    </tr>
  202.                    <tr>
  203.                        <td>k</td>
  204.                        <td>268</td>
  205.                        <td>212</td>
  206.                        <td>342</td>
  207.                        <td>256</td>
  208.                    </tr>
  209.                    <tr>
  210.                        <td>k</td>
  211.                        <td>268</td>
  212.                        <td>212</td>
  213.                        <td>342</td>
  214.                        <td>256</td>
  215.                    </tr>
  216.                </tbody>
  217.            </table>
  218.             <span class="top-left border-span"></span>
  219.             <span class="top-right border-span"></span>
  220.             <span class="bottom-left border-span"></span>
  221.             <span class="bottom-right border-span"></span>
  222.         </div>
  223.         <div class="border-container">
  224.             <div class="name-title">
  225.              	===
  226.             </div>
  227.           <div id="juniorservice"></div>
  228.             <span class="top-left border-span"></span>
  229.             <span class="top-right border-span"></span>
  230.             <span class="bottom-left border-span"></span>
  231.             <span class="bottom-right border-span"></span>
  232.         </div>
  233.         <div class="border-container">
  234.             <div class="name-title">
  235.                 ===
  236.             </div>
  237.             <div id="edubalance"></div>
  238.             <span class="top-left border-span"></span>
  239.             <span class="top-right border-span"></span>
  240.             <span class="bottom-left border-span"></span>
  241.             <span class="bottom-right border-span"></span>
  242.         </div>
  243.     </div>
  244. </div>
  245. </body>
  246. <script src="assets/js/jquery.min.js"></script>
  247. <script src="assets/js/echarts.min.js"></script>
  248. <script src="assets/js/index.js"></script>
  249. <script src="assets/js/map/shandong.js"></script>
  250. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/769550
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号