Echarts教程_1-2 简介

傷城~ 2023-01-05 01:17 292阅读 0赞

https://gitee.com/fakerlove/echarts

文章目录

  • echarts 教程
    1. 简介
    1. 入门
    • 2.1 环境准备
    • 2.2 入门demo
      • 基础设置
    • 2.3 echarts 使用
      • 下载并引入echarts.js
      • 准备一个具备大小的盒子
      • 初始化echarts 实例对象
      • 制定配置项和数据
      • 将配置项设置给echarts 实例对象

echarts 教程

1. 简介

由百度 ECharts 团队创建，联合公司内外众多数据可视化从业人组成的技术研究虚拟组织，致力于数据可视化的相关研究、教育普及、产品研发及生态建设。

2. 入门

2.1 环境准备

flexible.js+rem 智能大屏适配

flexible 是阿里出品的屏幕适配。

  1. https://github.com/amfe/lib-flexible

引用js的话

  1. https://github.com/amfe/lib-flexible/blob/2.0/index.js

具体例子

  1. (function flexible(window, document) { 
  2.     var docEl = document.documentElement;
  3.     var dpr = window.devicePixelRatio || 1;
  5.     // adjust body font size
  6.     function setBodyFontSize() { 
  7.         if (document.body) { 
  8.             document.body.style.fontSize = 12 * dpr + "px";
  9.         } else { 
  10.             document.addEventListener("DOMContentLoaded", setBodyFontSize);
  11.         }
  12.     }
  13.     setBodyFontSize();
  15.     // set 1rem = viewWidth / 10
  16.     function setRemUnit() { 
  17.         var rem = docEl.clientWidth / 24;
  18.         docEl.style.fontSize = rem + "px";
  19.     }
  21.     setRemUnit();
  23.     // reset rem unit on page resize
  24.     window.addEventListener("resize", setRemUnit);
  25.     window.addEventListener("pageshow", function(e) { 
  26.         if (e.persisted) { 
  27.             setRemUnit();
  28.         }
  29.     });
  31.     // detect 0.5px supports
  32.     if (dpr >= 2) { 
  33.         var fakeBody = document.createElement("body");
  34.         var testElement = document.createElement("div");
  35.         testElement.style.border = ".5px solid transparent";
  36.         fakeBody.appendChild(testElement);
  37.         docEl.appendChild(fakeBody);
  38.         if (testElement.offsetHeight === 1) { 
  39.             docEl.classList.add("hairlines");
  40.         }
  41.         docEl.removeChild(fakeBody);
  42.     }
  43. })(window, document);

vscode cssrem插件

13a67cf9b3cee028a334be17bf2ae095.png

flex 布局

less 使用

把less 编译成css插件

b2e13c5db933b289236cd8828bcfbfde.png

2.2 入门demo

基础设置

flexible.js

  1. (function flexible(window, document) { 
  2.     var docEl = document.documentElement;
  3.     var dpr = window.devicePixelRatio || 1;
  5.     // adjust body font size
  6.     function setBodyFontSize() { 
  7.         if (document.body) { 
  8.             document.body.style.fontSize = 12 * dpr + "px";
  9.         } else { 
  10.             document.addEventListener("DOMContentLoaded", setBodyFontSize);
  11.         }
  12.     }
  13.     setBodyFontSize();
  15.     // set 1rem = viewWidth / 10
  16.     function setRemUnit() { 
  17.         var rem = docEl.clientWidth / 24;
  18.         docEl.style.fontSize = rem + "px";
  19.     }
  21.     setRemUnit();
  23.     // reset rem unit on page resize
  24.     window.addEventListener("resize", setRemUnit);
  25.     window.addEventListener("pageshow", function(e) { 
  26.         if (e.persisted) { 
  27.             setRemUnit();
  28.         }
  29.     });
  31.     // detect 0.5px supports
  32.     if (dpr >= 2) { 
  33.         var fakeBody = document.createElement("body");
  34.         var testElement = document.createElement("div");
  35.         testElement.style.border = ".5px solid transparent";
  36.         fakeBody.appendChild(testElement);
  37.         docEl.appendChild(fakeBody);
  38.         if (testElement.offsetHeight === 1) { 
  39.             docEl.classList.add("hairlines");
  40.         }
  41.         docEl.removeChild(fakeBody);
  42.     }
  43. })(window, document);

页面基础

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/index.css">
  9.     <!-- 引入屏幕适配js -->
  10.     <script src="js/flexible.js"></script>
  11.     <script src="js/echarts.min.js"></script>
  12.     <script src="js/jquery.js"></script>
  13.     <script src="js/china.js"></script>
  14.     <script> var t = null; t = setTimeout(time, 1000); //開始运行 function time() { clearTimeout(t); //清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); //获取时 var m = dt.getMinutes(); //获取分 var s = dt.getSeconds(); //获取秒 document.querySelector(".showTime").innerHTML = "当前时间：" + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script>
  15. </head>
  17. <body>
  18.     <!-- 开始书写头文件 -->
  19.     <header>
  20.         <h1>数据可视化echarts</h1>
  21.         <div class="showTime"></div>
  22.     </header>
  24.     <!-- 页面主体部分 -->
  25.     <section class="minbox">
  26.         <div class="coloum">
  27.             <div class="panel bar">
  28.                 <h2>柱形图行列</h2>
  29.                 <div class="chart"></div>
  30.                 <div class="panel-footer"></div>
  31.             </div>
  32.             <div class="panel line">
  33.                 <h2>折线图行列</h2>
  34.                 <div class="chart"></div>
  35.                 <div class="panel-footer"></div>
  36.             </div>
  37.             <div class="panel pie">
  38.                 <h2>饼行列</h2>
  39.                 <div class="chart"></div>
  40.                 <div class="panel-footer"></div>
  41.             </div>
  43.         </div>
  44.         <div class="coloum">
  45.             <div class="no">
  46.                 <div class="no-hd">
  47.                     <ul>
  48.                         <li>12456</li>
  49.                         <li>10000</li>
  50.                     </ul>
  51.                 </div>
  52.                 <div class="no-bd">
  53.                     <ul>
  54.                         <li>前端需求人数</li>
  55.                         <li>市场供应人数</li>
  56.                     </ul>
  57.                 </div>
  58.             </div>
  60.             <!-- 地图模块 -->
  61.             <div class="map">
  62.                 <div class="map1"></div>
  63.                 <div class="map2"></div>
  64.                 <div class="map3"></div>
  65.                 <div class="chart"></div>
  67.             </div>
  68.         </div>
  69.         <div class="coloum">
  70.             <div class="panel bar2">
  71.                 <h2>柱形图行列</h2>
  72.                 <div class="chart">
  74.                 </div>
  75.                 <div class="panel-footer"></div>
  76.             </div>
  77.             <div class="panel line2">
  78.                 <h2>柱形图行列</h2>
  79.                 <div class="chart"></div>
  80.                 <div class="panel-footer"></div>
  81.             </div>
  82.             <div class="panel pie2">
  83.                 <h2>柱形图行列</h2>
  84.                 <div class="chart"></div>
  85.                 <div class="panel-footer"></div>
  86.             </div>
  87.         </div>
  88.     </section>
  89.     <script src="js/myindex.js"></script>
  91. </body>
  93. </html>

前端所需要的js

  1. * { 
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. li { 
  7.   list-style: none;
  8. }
  9. @font-face { 
  10.   font-family: electron;
  11.   src: url(../font/DS-DIGIT.TTF);
  12. }
  13. body { 
  14.   background: url(../images/bg.jpg) no-repeat top center;
  15.   line-height: 1.15;
  16. }
  17. header { 
  18.   height: 1.25rem;
  19.   position: relative;
  20.   background: url(../images/head_bg.png) no-repeat;
  21.   background-size: 100% 100%;
  22. }
  23. header h1 { 
  24.   font-size: 0.457rem;
  25.   color: white;
  26.   text-align: center;
  27.   line-height: 1rem;
  28. }
  29. header .showTime { 
  30.   position: absolute;
  31.   right: 0.375rem;
  32.   top: 0;
  33.   line-height: 0.9375rem;
  34.   font-size: 0.25rem;
  35.   color: rgba(255, 255, 255, 0.7);
  36. }
  37. .minbox { 
  38.   display: flex;
  39.   max-width: 1920px;
  40.   min-width: 1080px;
  41.   height: 7.5rem;
  42.   padding: 0.125rem 0.125rem 0;
  43.   margin: 0 auto;
  44. }
  45. .minbox .coloum { 
  46.   flex: 3;
  47. }
  48. .minbox .coloum:nth-child(2) { 
  49.   flex: 5;
  50.   margin: 0 0.1875rem 0.125rem;
  51. }
  52. .minbox .panel { 
  53.   position: relative;
  54.   height: 3.875rem;
  55.   padding: 0 0.1875rem 0.5rem;
  56.   margin-bottom: 0.1875rem;
  57.   border: 1px solid rgba(255, 186, 139, 0.17);
  58.   background: url(../images/line.png) rgba(255, 255, 255, 0.03);
  59. }
  60. .minbox .panel .chart { 
  61.   height: 3rem;
  62.   background-color: pink;
  63. }
  64. .minbox .panel h2 { 
  65.   height: 0.6rem;
  66.   line-height: 0.6rem;
  67.   font-size: 0.25rem;
  68.   color: #ffffff;
  69.   font-weight: 400;
  70. }
  71. .minbox .panel::before { 
  72.   position: absolute;
  73.   height: 0.125rem;
  74.   width: 0.125rem;
  75.   top: 0;
  76.   left: 0;
  77.   border-left: 2px solid #02a6b5;
  78.   border-top: 2px solid #02a6b5;
  79.   content: "";
  80. }
  81. .minbox .panel::after { 
  82.   position: absolute;
  83.   height: 0.125rem;
  84.   width: 0.125rem;
  85.   top: 0;
  86.   right: 0;
  87.   border-right: 2px solid #02a6b5;
  88.   border-top: 2px solid #02a6b5;
  89.   content: "";
  90. }
  91. .minbox .panel .panel-footer { 
  92.   position: absolute;
  93.   width: 100%;
  94.   bottom: 0;
  95.   left: 0;
  96. }
  97. .minbox .panel .panel-footer::before { 
  98.   position: absolute;
  99.   height: 0.125rem;
  100.   width: 0.125rem;
  101.   bottom: 0;
  102.   left: 0;
  103.   border-left: 2px solid #02a6b5;
  104.   border-bottom: 2px solid #02a6b5;
  105.   content: "";
  106. }
  107. .minbox .panel .panel-footer::after { 
  108.   position: absolute;
  109.   height: 0.125rem;
  110.   width: 0.125rem;
  111.   bottom: 0;
  112.   right: 0;
  113.   border-right: 2px solid #02a6b5;
  114.   border-bottom: 2px solid #02a6b5;
  115.   content: "";
  116. }
  117. .no { 
  118.   background-color: rgba(101, 132, 226, 0.1);
  119.   padding: 0.1875rem;
  120. }
  121. .no .no-bd ul { 
  122.   display: flex;
  123. }
  124. .no .no-bd ul li { 
  125.   flex: 1;
  126.   text-align: center;
  127.   color: rgba(255, 255, 255, 0.7);
  128.   font-size: 0.255rem;
  129.   height: 0.5rem;
  130.   line-height: 0.5rem;
  131.   margin-top: 0.125rem;
  132. }
  133. .no .no-hd { 
  134.   border: 1px solid rgba(25, 186, 139, 0.17);
  135.   position: relative;
  136. }
  137. .no .no-hd ul { 
  138.   display: flex;
  139. }
  140. .no .no-hd ul li { 
  141.   position: relative;
  142.   flex: 1;
  143.   line-height: 1rem;
  144.   font-size: 0.875rem;
  145.   color: #ffeb7b;
  146.   text-align: center;
  147.   font-family: electron;
  148. }
  149. .no .no-hd ul li:nth-child(1):after { 
  150.   content: "";
  151.   position: absolute;
  152.   top: 25%;
  153.   right: 0;
  154.   height: 50%;
  155.   width: 1px;
  156.   background-color: rgba(255, 255, 255, 0.2);
  157. }
  158. .no .no-hd::after { 
  159.   position: absolue;
  160.   height: 10px;
  161.   width: 30px;
  162.   right: 0;
  163.   bottom: 0;
  164.   border-right: 2px solid #02a6b5;
  165.   border-bottom: 2px solid #02a6b5;
  166.   content: " ";
  167. }
  168. .no .no-hd::before { 
  169.   position: absolue;
  170.   height: 10px;
  171.   width: 30px;
  172.   top: 0;
  173.   left: 0;
  174.   content: " ";
  175.   border-top: 2px solid #02a6b5;
  176.   border-left: 2px solid #02a6b5;
  177. }
  178. .map { 
  179.   height: 10.125rem;
  180.   position: relative;
  181. }
  182. .map .map1 { 
  183.   width: 6.475rem;
  184.   height: 6.475rem;
  185.   position: absolute;
  186.   top: 50%;
  187.   left: 50%;
  188.   transform: translate(-50%, -50%);
  189.   background: url(../images/map.png);
  190.   opacity: 0.3;
  191.   background-size: 100% 100%;
  192. }
  193. .map .map2 { 
  194.   position: absolute;
  195.   top: 50%;
  196.   left: 50%;
  197.   transform: translate(-50%, -50%);
  198.   width: 8.375rem;
  199.   height: 8.375rem;
  200.   background: url(../images/lbx.png);
  201.   background-size: 100% 100%;
  202.   animation: rotaltal1 15s linear infinite;
  203.   opacity: 0.3;
  204. }
  205. @keyframes rotaltal1 { 
  206.   from { 
  207.     transform: translate(-50%, -50%) rotate(0deg);
  208.   }
  209.   to { 
  210.     transform: translate(-50%, -50%) rotate(360deg);
  211.   }
  212. }
  213. .map .map3 { 
  214.   position: absolute;
  215.   top: 50%;
  216.   left: 50%;
  217.   transform: translate(-50%, -50%);
  218.   width: 7.075rem;
  219.   height: 7.075rem;
  220.   background: url(../images/jt.png);
  221.   background-size: 100% 100%;
  222.   animation: rotaltal2  10s linear infinite;
  223.   opacity: 0.3;
  224. }
  225. @keyframes rotaltal2 { 
  226.   from { 
  227.     transform: translate(-50%, -50%) rotate(0deg);
  228.   }
  229.   to { 
  230.     transform: translate(-50%, -50%) rotate(-360deg);
  231.   }
  232. }
  233. .map .chart { 
  234.   position: absolute;
  235.   top: 0;
  236.   left: 0;
  237.   width: 100%;
  238.   height: 10.125rem;
  239. }

效果如下

9ffd3b6f460de3a782edb5a84575c4c5.png

2.3 echarts 使用

常见的数据可视化库

  • D3.js 目前web 端评价最高的javascript 可视化工具
  • Echart.js 百度出品的一个开源的javascript 数据可视化库–以及收入到apache
  • HighCharts.js 是国外的前端数据可视化库，非商用免费，许多国外大公司所用
  • AntV 蚂蚁金服全新一代的数据可视化解决方案

实例提供

  1. https://echarts.apache.org/examples/zh/index.html#chart-type-bar

下载并引入echarts.js

页面下载

  1. https://echarts.apache.org/zh/download.html

npm 安装

  1. npm install echarts

引入js

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <!-- 引入 ECharts 文件 -->
  6.     <script src="echarts.min.js"></script>
  7. </head>
  8. </html>

准备一个具备大小的盒子

  1. <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  2. <div id="main" style="width: 600px;height:400px;"></div>

初始化echarts 实例对象

  1. var myChart = echarts.init(document.querySelector(".bar"));

制定配置项和数据

  1. // 指定图表的配置项和数据
  2.         var option = { 
  3.             title: { 
  4.                 text: 'ECharts 入门示例'
  5.             },
  6.             tooltip: { },
  7.             legend: { 
  8.                 data:['销量']
  9.             },
  10.             xAxis: { 
  11.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  12.             },
  13.             yAxis: { },
  14.             series: [{ 
  15.                 name: '销量',
  16.                 type: 'bar',
  17.                 data: [5, 20, 36, 10, 10, 20]
  18.             }]
  19.         };

将配置项设置给echarts 实例对象

  1. // 使用刚指定的配置项和数据显示图表。
  2. myChart.setOption(option);

完整的demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: { }, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
  13. </body>
  14. </html>

发表评论

表情：
评论列表 （有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读