可视化面板介绍

  1. 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

01-使用技术

完成该项目需要具备以下知识：

  • div + css 布局
  • flex 布局
  • Less
  • 原生js + jquery 使用
  • rem适配
  • echarts基础

02- 案例适配方案

  • 设计稿是1920px
    1. flexible.js 把屏幕分为 24 等份
    2. cssrem 插件的基准值是 80px
      插件-配置按钮—-配置扩展设置—Root Font Size 里面 设置。
      但是别忘记重启vscode软件保证生效

03-基础设置

  • body 设置背景图 ，缩放为 100% ， 行高1.15
  • css初始化

04-header 布局

  • 高度为100px
  • 背景图，在容器内显示
  • 缩放比例为 100%
  • h1 标题部分 白色 38像素 居中显示 行高为 80像素
  • 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素
  1. // 格式： 当前时间：2020年3月17-0时54分14秒
  2. <script>
  3.             var t = null;
  4.             t = setTimeout(time, 1000);//開始运行
  5.             function time() {
  6.                 clearTimeout(t);//清除定时器
  7.                 dt = new Date();
  8.                 var y = dt.getFullYear();
  9.                 var mt = dt.getMonth() + 1;
  10.                 var day = dt.getDate();
  11.                 var h = dt.getHours();//获取时
  12.                 var m = dt.getMinutes();//获取分
  13.                 var s = dt.getSeconds();//获取秒
  14.                 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
  15.                 t = setTimeout(time, 1000); //设定定时器，循环运行     
  16.             }
  17.  </script>
  • header部分css样式
  1. header {
  2.   position: relative;
  3.   height: 1.25rem;
  4.   background: url(../images/head_bg.png) no-repeat top center;
  5.   background-size: 100% 100%;
  6.   h1 {
  7.     font-size: 0.475rem;
  8.     color: #fff;
  9.     text-align: center;
  10.     line-height: 1rem;
  11.   }
  12.   .showTime {
  13.     position: absolute;
  14.     top: 0;
  15.     right: 0.375rem;
  16.     line-height: 0.9375rem;
  17.     font-size: 0.25rem;
  18.     color: rgba(255, 255, 255, 0.7);
  19.   }
  20. }

05-mainbox 主体模块

  • 需要一个上左右的10px 的内边距
  • column 列容器，分三列，占比 3：5：3

css样式：

  1. .mainbox {
  2.   padding: 0.125rem 0.125rem 0;
  3.   display: flex;
  4.   .column {
  5.     flex: 3;
  6.   }
  7.   &:nth-child(2) {
  8.     flex: 5;
  9.   }
  10. }

06-公共面板模块 panel

  • 高度为 310px
  • 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
  • 有line.jpg 背景图片
  • padding为 上为 0 左右 15px 下为 40px
  • 下外边距是 15px
  • 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
  • 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
  1. .panel {
  2.   position: relative;
  3.   height: 3.875rem;
  4.   border: 1px solid rgba(25, 186, 139, 0.17);
  5.   background: url(../images/line\(1\).png);
  6.   padding: 0 0.1875rem 0.5rem;
  7.   margin-bottom: 0.1875rem;
  8.   &::before {
  9.     position: absolute;
  10.     top: 0;
  11.     left: 0;
  12.     content: "";
  13.     width: 10px;
  14.     height: 10px;
  15.     border-top: 2px solid #02a6b5;
  16.     border-left: 2px solid #02a6b5;
  17.   }
  18.   &::after {
  19.     position: absolute;
  20.     top: 0;
  21.     right: 0;
  22.     content: "";
  23.     width: 10px;
  24.     height: 10px;
  25.     border-top: 2px solid #02a6b5;
  26.     border-right: 2px solid #02a6b5;
  27.   }
  28.   .panel-footer {
  29.     position: absolute;
  30.     left: 0;
  31.     bottom: 0;
  32.     width: 100%;
  33.     &::before {
  34.       position: absolute;
  35.       bottom: 0;
  36.       left: 0;
  37.       content: "";
  38.       width: 10px;
  39.       height: 10px;
  40.       border-bottom: 2px solid #02a6b5;
  41.       border-left: 2px solid #02a6b5;
  42.     }
  43.     &::after {
  44.       position: absolute;
  45.       bottom: 0;
  46.       right: 0;
  47.       content: "";
  48.       width: 10px;
  49.       height: 10px;
  50.       border-bottom: 2px solid #02a6b5;
  51.       border-right: 2px solid #02a6b5;
  52.     }
  53.   }
  54. }

07-柱形图 bar 模块(布局)

  • 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
  • 图标内容模块 chart 高度 240px
  • 以上可以作为panel公共样式部分
  1.   h2 {
  2.     height: 0.6rem;
  3.     line-height: 0.6rem;
  4.     text-align: center;
  5.     color: #fff;
  6.     font-size: 20px;
  7.     font-weight: 400;
  8.   }
  9.   .chart {
  10.     height: 3rem;
  11.     background-color: pink;
  12.   }

08-中间布局

  • 上面是no 数字模块
  • 下面是map 地图模块
  1. 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
  2. 注意中间列 column 有个 左右 10px 下 15px 的外边距
  3. no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd)
  4. no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
  5. no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
  6. no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
  7. 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
  8. no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
  1. /* 声明字体*/
  2. @font-face {
  3.   font-family: electronicFont;
  4.   src: url(../font/DS-DIGIT.TTF);
  5. }

地图模块制作：

  1. 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
  2. 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
  3. 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
  4. 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
  1.  <div class="no">
  2.                 <div class="no-hd">
  3.                     <ul>
  4.                         <li>125811</li>
  5.                         <li>104563</li>
  6.                     </ul>
  7.                 </div>
  8.                 <div class="no-bd">
  9.                     <ul>
  10.                         <li>前端需求人数</li>
  11.                         <li>市场供应人数</li>
  12.                     </ul>
  13.                 </div>
  14.             </div>
  15.             <div class="map">
  16.                 <div class="chart"></div>
  17.                 <div class="map1"></div>
  18.                 <div class="map2"></div>
  19.                 <div class="map3"></div>
  20.             </div>

中间样式

  1. /* 声明字体*/
  2. @font-face {
  3.   font-family: electronicFont;
  4.   src: url(../font/DS-DIGIT.TTF);
  5. }
  6. .no {
  7.   background: rgba(101, 132, 226, 0.1);
  8.   padding: 0.1875rem;
  9.   .no-hd {
  10.     position: relative;
  11.     border: 1px solid rgba(25, 186, 139, 0.17);
  12.     &::before {
  13.       content: "";
  14.       position: absolute;
  15.       width: 30px;
  16.       height: 10px;
  17.       border-top: 2px solid #02a6b5;
  18.       border-left: 2px solid #02a6b5;
  19.       top: 0;
  20.       left: 0;
  21.     }
  22.     &::after {
  23.       content: "";
  24.       position: absolute;
  25.       width: 30px;
  26.       height: 10px;
  27.       border-bottom: 2px solid #02a6b5;
  28.       border-right: 2px solid #02a6b5;
  29.       right: 0;
  30.       bottom: 0;
  31.     }
  32.     ul {
  33.       display: flex;
  34.       li {
  35.         position: relative;
  36.         flex: 1;
  37.         text-align: center;
  38.         height: 1rem;
  39.         line-height: 1rem;
  40.         font-size: 0.875rem;
  41.         color: #ffeb7b;
  42.         padding: 0.05rem 0;
  43.         font-family: electronicFont;
  44.         font-weight: bold;
  45.         &:first-child::after {
  46.           content: "";
  47.           position: absolute;
  48.           height: 50%;
  49.           width: 1px;
  50.           background: rgba(255, 255, 255, 0.2);
  51.           right: 0;
  52.           top: 25%;
  53.         }
  54.       }
  55.     }
  56.   }
  57.   .no-bd ul {
  58.     display: flex;
  59.     li {
  60.       flex: 1;
  61.       height: 0.5rem;
  62.       line-height: 0.5rem;
  63.       text-align: center;
  64.       font-size: 0.225rem;
  65.       color: rgba(255, 255, 255, 0.7);
  66.       padding-top: 0.125rem;
  67.     }
  68.   }
  69. }
  70. .map {
  71.   position: relative;
  72.   height: 10.125rem;
  73.   .chart {
  74.     position: absolute;
  75.     top: 0;
  76.     left: 0;
  77.     z-index: 5;
  78.     height: 10.125rem;
  79.     width: 100%;
  80.   }
  81.   .map1,
  82.   .map2,
  83.   .map3 {
  84.     position: absolute;
  85.     top: 50%;
  86.     left: 50%;
  87.     transform: translate(-50%, -50%);
  88.     width: 6.475rem;
  89.     height: 6.475rem;
  90.     background: url(../images/map.png) no-repeat;
  91.     background-size: 100% 100%;
  92.     opacity: 0.3;
  93.   }
  94.   .map2 {
  95.     width: 8.0375rem;
  96.     height: 8.0375rem;
  97.     background-image: url(../images/lbx.png);
  98.     opacity: 0.6;
  99.     animation: rotate 15s linear infinite;
  100.     z-index: 2;
  101.   }
  102.   .map3 {
  103.     width: 7.075rem;
  104.     height: 7.075rem;
  105.     background-image: url(../images/jt.png);
  106.     animation: rotate1 10s linear infinite;
  107.   }
  109.   @keyframes rotate {
  110.     from {
  111.       transform: translate(-50%, -50%) rotate(0deg);
  112.     }
  113.     to {
  114.       transform: translate(-50%, -50%) rotate(360deg);
  115.     }
  116.   }
  117.   @keyframes rotate1 {
  118.     from {
  119.       transform: translate(-50%, -50%) rotate(0deg);
  120.     }
  121.     to {
  122.       transform: translate(-50%, -50%) rotate(-360deg);
  123.     }
  124.   }
  125. }

09-Echarts-介绍

常见的数据可视化库：

  • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
  • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
  • Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  • AntV 蚂蚁金服全新一代数据可视化解决方案 等等
  • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

大白话：

官网地址：https://www.echartsjs.com/zh/index.html

10-Echarts-体验

官方教程：五分钟上手ECharts 分钟上手 ECharts)

使用步骤：

  1. 引入echarts 插件文件到html页面中
  2. 准备一个具备大小的DOM容器
  1. <div id="main" style="width: 600px;height:400px;"></div>
  1. 初始化echarts实例对象
  1. var myChart = echarts.init(document.getElementById('main'));
  1. 指定配置项和数据(option)
  1. var option = {
  2.     xAxis: {
  3.         type: 'category',
  4.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  5.     },
  6.     yAxis: {
  7.         type: 'value'
  8.     },
  9.     series: [{
  10.         data: [820, 932, 901, 934, 1290, 1330, 1320],
  11.         type: 'line'
  12.     }]
  13. };
  1. 将配置项设置给echarts实例对象
  1. myChart.setOption(option);

11-Echarts-基础配置

这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

  • series
    • 系列列表。每个系列通过 type 决定自己的图表类型
    • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
  • xAxis：直角坐标系 grid 中的 x 轴
    • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
  • yAxis：直角坐标系 grid 中的 y 轴
  • grid：直角坐标系内绘图网格。
  • title：标题组件
  • tooltip：提示框组件
  • legend：图例组件
  • color：调色盘颜色列表
    数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
  1. option = {
  2.     // color设置我们线条的颜色 注意后面是个数组
  3.     color: ['pink', 'red', 'green', 'skyblue'],
  4.     // 设置图表的标题
  5.     title: {
  6.         text: '折线图堆叠123'
  7.     },
  8.     // 图表的提示框组件 
  9.     tooltip: {
  10.         // 触发方式
  11.         trigger: 'axis'
  12.     },
  13.     // 图例组件
  14.     legend: {
  15.        // series里面有了 name值则 legend里面的data可以删掉
  16.     },
  17.     // 网格配置  grid可以控制线形图 柱状图 图表大小
  18.     grid: {
  19.         left: '3%',
  20.         right: '4%',
  21.         bottom: '3%',
  22.         // 是否显示刻度标签 如果是true 就显示 否则反之
  23.         containLabel: true
  24.     },
  25.     // 工具箱组件  可以另存为图片等功能
  26.     toolbox: {
  27.         feature: {
  28.             saveAsImage: {}
  29.         }
  30.     },
  31.     // 设置x轴的相关配置
  32.     xAxis: {
  33.         type: 'category',
  34.         // 是否让我们的线条和坐标轴有缝隙
  35.         boundaryGap: false,
  36.         data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
  37.     },
  38.      // 设置y轴的相关配置
  39.     yAxis: {
  40.         type: 'value'
  41.     },
  42.     // 系列图表配置 它决定着显示那种类型的图表
  43.     series: [
  44.         {
  45.             name: '邮件营销',
  46.             type: 'line',
  48.             data: [120, 132, 101, 134, 90, 230, 210]
  49.         },
  50.         {
  51.             name: '联盟广告',
  52.             type: 'line',
  54.             data: [220, 182, 191, 234, 290, 330, 310]
  55.         },
  56.         {
  57.             name: '视频广告',
  58.             type: 'line',
  60.             data: [150, 232, 201, 154, 190, 330, 410]
  61.         },
  62.         {
  63.             name: '直接访问',
  64.             type: 'line',
  66.             data: [320, 332, 301, 334, 390, 330, 320]
  67.         }
  68.     ]
  69. };

12- 柱状图图表（两大步骤）

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表
  1. 引入到html页面中
  1. // 柱状图1模块
  2. (function() {
  3.   // 实例化对象
  4.   let myChart = echarts.init(document.querySelector(".bar .chart"));
  5.   // 指定配置和数据
  6.   let option = {
  7.     color: ["#3398DB"],
  8.     tooltip: {
  9.       trigger: "axis",
  10.       axisPointer: {
  11.         // 坐标轴指示器，坐标轴触发有效
  12.         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  13.       }
  14.     },
  15.     grid: {
  16.       left: "3%",
  17.       right: "4%",
  18.       bottom: "3%",
  19.       containLabel: true
  20.     },
  21.     xAxis: [
  22.       {
  23.         type: "category",
  24.         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  25.         axisTick: {
  26.           alignWithLabel: true
  27.         }
  28.       }
  29.     ],
  30.     yAxis: [
  31.       {
  32.         type: "value"
  33.       }
  34.     ],
  35.     series: [
  36.       {
  37.         name: "直接访问",
  38.         type: "bar",
  39.         barWidth: "60%",
  40.         data: [10, 52, 200, 334, 390, 330, 220]
  41.       }
  42.     ]
  43.   };
  45.   // 把配置给实例对象
  46.   myChart.setOption(option);
  47. })();

  1. 根据需求定制

    • 修改图表柱形颜色 #2f89cf

    • 修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小

      1. color: ["#2f89cf"],
      2. grid: {
      3. left: "0%",
      4. top: "10px",
      5. right: "0%",
      6. bottom: "4%",
      7. containLabel: true
      8. },

    • X轴相关设置 xAxis

      • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
      • X轴线的样式 不显示
        1. // 设置x轴标签文字样式

// x轴的文字颜色和大小
axisLabel: {
color: “rgba(255,255,255,.6)”,
fontSize: “12”
},
// x轴样式不显示
axisLine: {
show: false
// 如果想要设置单独的线条样式
// lineStyle: {
// color: “rgba(255,255,255,.1)”,
// width: 1,
// type: “solid”
}
}

  2. - Y 轴相关定制
  3.   - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px
  4.   - Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框
  5.   - 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)   
  7. ~~~JavaScript
  8. // y 轴文字标签样式
  9. axisLabel: {
  10.       color: "rgba(255,255,255,.6)",
  11.        fontSize: "12"
  12. },
  13.  // y轴线条样式
  14.  axisLine: {
  15.       lineStyle: {
  16.          color: "rgba(255,255,255,.1)",
  17.          // width: 1,
  18.          // type: "solid"
  19.       }
  20. 5232},
  21.  // y 轴分隔线样式
  22. splitLine: {
  23.     lineStyle: {
  24.        color: "rgba(255,255,255,.1)"
  25.      }
  26. }
  • 修改柱形为圆角以及柱子宽度 series 里面设置
  1. series: [
  2.       {
  3.         name: "直接访问",
  4.         type: "bar",
  5.         // 修改柱子宽度
  6.         barWidth: "35%",
  7.         data: [10, 52, 200, 334, 390, 330, 220],
  8.         itemStyle: {
  9.           // 修改柱子圆角
  10.           barBorderRadius: 5
  11.         }
  12.       }
  13.     ]
  14.   };
  • 更换对应数据
  1. // x轴中更换data数据
  2.  data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
  3. // series 更换数据
  4.  data: [200, 300, 300, 900, 1500, 1200, 600]
  • 让图表跟随屏幕自适应
  1.   window.addEventListener("resize", function() {
  2.     myChart.resize();
  3.   });

13-柱状图2定制

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

需求1： 修改图形大小 grid

  1.   // 图标位置
  2.     grid: {
  3.       top: "10%",
  4.       left: "22%",
  5.       bottom: "10%"
  6.     },

需求2： 不显示x轴

  1.    xAxis: {
  2.       show: false
  3.     },

需求3： y轴相关定制

  • 不显示y轴线和相关刻度
  1. //不显示y轴线条
  2. axisLine: {
  3.     show: false
  4.         },
  5. // 不显示刻度
  6. axisTick: {
  7.    show: false
  8. },
  • y轴文字的颜色设置为白色
  1.    axisLabel: {
  2.           color: "#fff"
  3.    },

需求4： 修改第一组柱子相关样式（条状）

  1. name: "条",
  2. // 柱子之间的距离
  3. barCategoryGap: 50,
  4. //柱子的宽度
  5. barWidth: 10,
  6. // 柱子设为圆角
  7. itemStyle: {
  8.     normal: {
  9.       barBorderRadius: 20,       
  10.     }
  11. },
  • 设置第一组柱子内百分比显示数据
  1. // 图形上的文本标签
  2. label: {
  3.     normal: {
  4.          show: true,
  5.          // 图形内显示
  6.          position: "inside",
  7.          // 文字的显示格式
  8.          formatter: "{c}%"
  9.      }
  10. },
  • 设置第一组柱子不同颜色
  1. // 声明颜色数组
  2. var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  3. // 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  4.   itemStyle: {
  5.           normal: {
  6.             barBorderRadius: 20,  
  7.             // params 传进来的是柱子对象
  8.             console.log(params);
  9.             // dataIndex 是当前柱子的索引号
  10.             return myColor[params.dataIndex];
  11.           }
  13. },

需求5： 修改第二组柱子的相关配置（框状）

  1.           name: "框",
  2.         type: "bar",
  3.         barCategoryGap: 50,
  4.         barWidth: 15,
  5.         itemStyle: {
  6.             color: "none",
  7.             borderColor: "#00c1de",
  8.             borderWidth: 3,
  9.             barBorderRadius: 15
  10.         },
  11.         data: [19325, 23438, 31000, 121594, 134141, 681807]
  12.       }

需求6： 给y轴添加第二组数据

  1. yAxis: [
  2.       {
  3.       type: "category",
  4.       data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
  5.       // 不显示y轴的线
  6.       axisLine: {
  7.         show: false
  8.       },
  9.       // 不显示刻度
  10.       axisTick: {
  11.         show: false
  12.       },
  13.       // 把刻度标签里面的文字颜色设置为白色
  14.       axisLabel: {
  15.         color: "#fff"
  16.       }
  17.     },
  18.       {
  19.         show: true,
  20.         data: [702, 350, 610, 793, 664],
  21.            // 不显示y轴的线
  22.       axisLine: {
  23.         show: false
  24.       },
  25.       // 不显示刻度
  26.       axisTick: {
  27.         show: false
  28.       },
  29.         axisLabel: {
  30.           textStyle: {
  31.             fontSize: 12,
  32.             color: "#fff"
  33.           }
  34.         }
  35.       }
  36.     ],

需求7： 设置两组柱子层叠以及更换数据

  1. // 给series  第一个对象里面的 添加 
  2. yAxisIndex: 0,
  3. // 给series  第二个对象里面的 添加 
  4. yAxisIndex: 1,
  5. // series 第一个对象里面的data
  6. data: [70, 34, 60, 78, 69],
  7. // series 第二个对象里面的data
  8. data: [100, 100, 100, 100, 100],
  9. // y轴更换第一个对象更换data数据
  10. data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
  11. // y轴更换第二个对象更换data数据
  12. data:[702, 350, 610, 793, 664],

完整代码：

  1. // 柱状图2
  2. (function() {
  3.   var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  4.   // 1. 实例化对象
  5.   var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  6.   // 2. 指定配置和数据
  7.   var option = {
  8.     grid: {
  9.       top: "10%",
  10.       left: "22%",
  11.       bottom: "10%"
  12.       // containLabel: true
  13.     },
  14.     // 不显示x轴的相关信息
  15.     xAxis: {
  16.       show: false
  17.     },
  18.     yAxis: [
  19.       {
  20.         type: "category",
  21.         inverse: true,
  22.         data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
  23.         // 不显示y轴的线
  24.         axisLine: {
  25.           show: false
  26.         },
  27.         // 不显示刻度
  28.         axisTick: {
  29.           show: false
  30.         },
  31.         // 把刻度标签里面的文字颜色设置为白色
  32.         axisLabel: {
  33.           color: "#fff"
  34.         }
  35.       },
  36.       {
  37.         data: [702, 350, 610, 793, 664],
  38.         inverse: true,
  39.         // 不显示y轴的线
  40.         axisLine: {
  41.           show: false
  42.         },
  43.         // 不显示刻度
  44.         axisTick: {
  45.           show: false
  46.         },
  47.         // 把刻度标签里面的文字颜色设置为白色
  48.         axisLabel: {
  49.           color: "#fff"
  50.         }
  51.       }
  52.     ],
  53.     series: [
  54.       {
  55.         name: "条",
  56.         type: "bar",
  57.         data: [70, 34, 60, 78, 69],
  58.         yAxisIndex: 0,
  59.         // 修改第一组柱子的圆角
  60.         itemStyle: {
  61.           barBorderRadius: 20,
  62.           // 此时的color 可以修改柱子的颜色
  63.           color: function(params) {
  64.             // params 传进来的是柱子对象
  65.             console.log(params);
  66.             // dataIndex 是当前柱子的索引号
  67.             return myColor[params.dataIndex];
  68.           }
  69.         },
  70.         // 柱子之间的距离
  71.         barCategoryGap: 50,
  72.         //柱子的宽度
  73.         barWidth: 10,
  74.         // 显示柱子内的文字
  75.         label: {
  76.           show: true,
  77.           position: "inside",
  78.           // {c} 会自动的解析为 数据  data里面的数据
  79.           formatter: "{c}%"
  80.         }
  81.       },
  82.       {
  83.         name: "框",
  84.         type: "bar",
  85.         barCategoryGap: 50,
  86.         barWidth: 15,
  87.         yAxisIndex: 1,
  88.         data: [100, 100, 100, 100, 100],
  89.         itemStyle: {
  90.           color: "none",
  91.           borderColor: "#00c1de",
  92.           borderWidth: 3,
  93.           barBorderRadius: 15
  94.         }
  95.       }
  96.     ]
  97.   };
  99.   // 3. 把配置给实例对象
  100.   myChart.setOption(option);
  101. })();

14-折线图1 人员变化模块制作

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

需求1： 修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。

  1.     // 设置网格样式
  2.     grid: { 
  3.       top: '20%',
  4.       left: '3%',
  5.       right: '4%',
  6.       bottom: '3%',
  7.       show: true,// 显示边框
  8.       borderColor: '#012f4a',// 边框颜色
  9.       containLabel: true // 包含刻度文字在内
  10.     },

需求2： 修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10%

  1.  // 图例组件
  2.     legend: {
  3.       textStyle: {
  4.         color: '#4c9bfd' // 图例文字颜色
  5.       },
  6.       right: '10%' // 距离右边10%
  7.     },

需求3： x轴相关配置

  • 刻度去除
  • x轴刻度标签字体颜色：#4c9bfd
  • 剔除x坐标轴线颜色（将来使用Y轴分割线)
  • 轴两端是不需要内间距 boundaryGap
  1.     xAxis: {
  2.       type: 'category',
  3.       data: ["周一", "周二"],
  4.       axisTick: {
  5.          show: false // 去除刻度线
  6.        },
  7.        axisLabel: {
  8.          color: '#4c9bfd' // 文本颜色
  9.        },
  10.        axisLine: {
  11.          show: false // 去除轴线
  12.        },
  13.        boundaryGap: false  // 去除轴内间距
  14.     },

需求4： y轴的定制

  • 刻度去除
  • 字体颜色：#4c9bfd
  • 分割线颜色：#012f4a
  1.     yAxis: {
  2.       type: 'value',
  3.       axisTick: {
  4.         show: false  // 去除刻度
  5.       },
  6.       axisLabel: {
  7.         color: '#4c9bfd' // 文字颜色
  8.       },
  9.       splitLine: {
  10.         lineStyle: {
  11.           color: '#012f4a' // 分割线颜色
  12.         }
  13.       }
  14.     },

需求5： 两条线形图定制

  • 颜色分别：#00f2f1 #ed3f35
  • 把折线修饰为圆滑 series 数据中添加 smooth 为 true
  1.     color: ['#00f2f1', '#ed3f35'],
  2.     series: [{
  3.       name:'新增粉丝',
  4.       data: [820, 932, 901, 934, 1290, 1330, 1320],
  5.       type: 'line',
  6.       // 折线修饰为圆滑
  7.       smooth: true,
  8.       },{
  9.       name:'新增游客',
  10.       data: [100, 331, 200, 123, 233, 543, 400],
  11.       type: 'line',
  12.       smooth: true,
  13.     }]

需求6： 配置数据

  1. // x轴的文字
  2. xAxis: {
  3.   type: 'category',
  4.   data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  1. // 图标数据
  2.     series: [{
  3.       name:'新增粉丝',
  4.       data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  5.       type: 'line',
  6.       smooth: true
  7.     },{
  8.       name:'新增游客',
  9.       data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
  10.       type: 'line',
  11.       smooth: true
  12.       }
  13.     }]

需求7： 新增需求 点击 2020年 2021年 数据发生变化

以下是后台送过来数据（ajax请求过来的）

  1.  var yearData = [
  2.       {
  3.         year: '2020',  // 年份
  4.         data: [  // 两个数组是因为有两条线
  5.              [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  6.              [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
  7.           ]
  8.       },
  9.       {
  10.         year: '2021',  // 年份
  11.         data: [  // 两个数组是因为有两条线
  12.              [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
  13.              [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
  14.           ]
  15.       }
  16.      ];
  • tab栏切换事件
  • 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
  • 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
  • 2021 按钮同样道理

完整代码：

  1. // 折线图1模块制作
  2. (function() {
  3.   var yearData = [
  4.     {
  5.       year: "2020", // 年份
  6.       data: [
  7.         // 两个数组是因为有两条线
  8.         [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  9.         [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
  10.       ]
  11.     },
  12.     {
  13.       year: "2021", // 年份
  14.       data: [
  15.         // 两个数组是因为有两条线
  16.         [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
  17.         [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
  18.       ]
  19.     }
  20.   ];
  21.   // 1. 实例化对象
  22.   var myChart = echarts.init(document.querySelector(".line .chart"));
  23.   // 2.指定配置
  24.   var option = {
  25.     // 通过这个color修改两条线的颜色
  26.     color: ["#00f2f1", "#ed3f35"],
  27.     tooltip: {
  28.       trigger: "axis"
  29.     },
  30.     legend: {
  31.       // 如果series 对象有name 值，则 legend可以不用写data
  32.       // 修改图例组件 文字颜色
  33.       textStyle: {
  34.         color: "#4c9bfd"
  35.       },
  36.       // 这个10% 必须加引号
  37.       right: "10%"
  38.     },
  39.     grid: {
  40.       top: "20%",
  41.       left: "3%",
  42.       right: "4%",
  43.       bottom: "3%",
  44.       show: true, // 显示边框
  45.       borderColor: "#012f4a", // 边框颜色
  46.       containLabel: true // 包含刻度文字在内
  47.     },
  49.     xAxis: {
  50.       type: "category",
  51.       boundaryGap: false,
  52.       data: [
  53.         "1月",
  54.         "2月",
  55.         "3月",
  56.         "4月",
  57.         "5月",
  58.         "6月",
  59.         "7月",
  60.         "8月",
  61.         "9月",
  62.         "10月",
  63.         "11月",
  64.         "12月"
  65.       ],
  66.       axisTick: {
  67.         show: false // 去除刻度线
  68.       },
  69.       axisLabel: {
  70.         color: "#4c9bfd" // 文本颜色
  71.       },
  72.       axisLine: {
  73.         show: false // 去除轴线
  74.       }
  75.     },
  76.     yAxis: {
  77.       type: "value",
  78.       axisTick: {
  79.         show: false // 去除刻度线
  80.       },
  81.       axisLabel: {
  82.         color: "#4c9bfd" // 文本颜色
  83.       },
  84.       axisLine: {
  85.         show: false // 去除轴线
  86.       },
  87.       splitLine: {
  88.         lineStyle: {
  89.           color: "#012f4a" // 分割线颜色
  90.         }
  91.       }
  92.     },
  93.     series: [
  94.       {
  95.         name: "新增粉丝",
  96.         type: "line",
  97.         // true 可以让我们的折线显示带有弧度
  98.         smooth: true,
  99.         data: yearData[0].data[0]
  100.       },
  101.       {
  102.         name: "新增游客",
  103.         type: "line",
  104.         smooth: true,
  105.         data: yearData[0].data[1]
  106.       }
  107.     ]
  108.   };
  110.   // 3. 把配置给实例对象
  111.   myChart.setOption(option);
  112.   // 4. 让图表跟随屏幕自动的去适应
  113.   window.addEventListener("resize", function() {
  114.     myChart.resize();
  115.   });
  117.   // 5.点击切换效果
  118.   $(".line h2").on("click", "a", function() {
  119.     // alert(1);
  120.     // console.log($(this).index());
  121.     // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
  122.     // console.log(yearData[$(this).index()]);
  123.     var obj = yearData[$(this).index()];
  124.     option.series[0].data = obj.data[0];
  125.     option.series[1].data = obj.data[1];
  126.     // 需要重新渲染
  127.     myChart.setOption(option);
  128.   });
  129. })();

15-折线图2 播放量模块制作

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

需求1： 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

  1.  legend: {
  2.       top: "0%",
  3.       textStyle: {
  4.         color: "rgba(255,255,255,.5)",
  5.         fontSize: "12"
  6.       }
  7. },

需求2： 修改图表大小

  1. grid: {
  2.       left: "10",
  3.       top: "30",
  4.       right: "10",
  5.       bottom: "10",
  6.       containLabel: true
  7.     },

需求3： 修改x轴相关配置

  • 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
  • x轴线的颜色为 rgba(255,255,255,.2)
  1.      // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
  2.      axisLabel: {
  3.           textStyle: {
  4.             color: "rgba(255,255,255,.6)",
  5.             fontSize: 12
  6.           }
  7.         },
  8.          // x轴线的颜色为   rgba(255,255,255,.2)
  9.         axisLine: {
  10.           lineStyle: {
  11.             color: "rgba(255,255,255,.2)"
  12.           }
  13.         },

需求4： 修改y轴的相关配置

  1.         axisTick: { show: false },
  2.         axisLine: {
  3.           lineStyle: {
  4.             color: "rgba(255,255,255,.1)"
  5.           }
  6.         },
  7.         axisLabel: {
  8.           textStyle: {
  9.             color: "rgba(255,255,255,.6)",
  10.             fontSize: 12
  11.           }
  12.         },
  13.        // 修改分割线的颜色
  14.         splitLine: {
  15.           lineStyle: {
  16.             color: "rgba(255,255,255,.1)"
  17.           }
  18.         }

需求5： 修改两个线模块配置(注意在series 里面定制)

  1.        //第一条 线是圆滑
  2.        smooth: true,
  3.         // 单独修改线的样式
  4.         lineStyle: {
  5.             color: "#0184d5",
  6.             width: 2 
  7.         },
  8.          // 填充区域
  9.         areaStyle: {
  10.               // 渐变色，只需要复制即可
  11.             color: new echarts.graphic.LinearGradient(
  12.               0,
  13.               0,
  14.               0,
  15.               1,
  16.               [
  17.                 {
  18.                   offset: 0,
  19.                   color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
  20.                 },
  21.                 {
  22.                   offset: 0.8,
  23.                   color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
  24.                 }
  25.               ],
  26.               false
  27.             ),
  28.             shadowColor: "rgba(0, 0, 0, 0.1)"
  29.         },
  30.         // 设置拐点 小圆点
  31.         symbol: "circle",
  32.         // 拐点大小
  33.         symbolSize: 8,
  34.         // 设置拐点颜色以及边框
  35.        itemStyle: {
  36.             color: "#0184d5",
  37.             borderColor: "rgba(221, 220, 107, .1)",
  38.             borderWidth: 12
  39.         },
  40.         // 开始不显示拐点， 鼠标经过显示
  41.         showSymbol: false,
  1.        name: "转发量",
  2.         type: "line",
  3.         smooth: true,
  4.         lineStyle: {
  5.           normal: {
  6.             color: "#00d887",
  7.             width: 2
  8.           }
  9.          },
  10.          areaStyle: {
  11.           normal: {
  12.             color: new echarts.graphic.LinearGradient(
  13.               0,
  14.               0,
  15.               0,
  16.               1,
  17.               [
  18.                 {
  19.                   offset: 0,
  20.                   color: "rgba(0, 216, 135, 0.4)"
  21.                 },
  22.                 {
  23.                   offset: 0.8,
  24.                   color: "rgba(0, 216, 135, 0.1)"
  25.                 }
  26.               ],
  27.               false
  28.             ),
  29.             shadowColor: "rgba(0, 0, 0, 0.1)"
  30.           }
  31.         },
  32.         // 设置拐点 小圆点
  33.         symbol: "circle",
  34.         // 拐点大小
  35.         symbolSize: 5,
  36.         // 设置拐点颜色以及边框
  37.          itemStyle: {
  38.             color: "#00d887",
  39.             borderColor: "rgba(221, 220, 107, .1)",
  40.             borderWidth: 12
  41.         },
  42.         // 开始不显示拐点， 鼠标经过显示
  43.         showSymbol: false,

需求6： 更换数据

  1. // x轴更换数据
  2. data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
  3. // series  第一个对象data数据
  4.  data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
  5. // series  第二个对象data数据
  6.  data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],

16-饼形图 1年龄分布模块制作

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

定制图表需求1：

  • 修改图例组件在底部并且居中显示。
  • 每个小图标的宽度和高度修改为 10px
  • 文字大小为12 颜色 rgba(255,255,255,.5)
  1.  legend: {
  2.       // 距离底部为0%
  3.       bottom: "0%",
  4.       // 小图标的宽度和高度
  5.       itemWidth: 10,
  6.       itemHeight: 10,
  7.       data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  8.       // 修改图例组件的文字为 12px
  9.       textStyle: {
  10.         color: "rgba(255,255,255,.5)",
  11.         fontSize: "12"
  12.       }
  13.  },

定制需求2：

  • 修改水平居中 垂直居中
  • 修改内圆半径和外圆半径为 [“40%”, “60%”] pink老师友情提示，带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而我们饼形图是通过 radius 修改大小
  1. series: [
  2.       {
  3.         name: "年龄分布",
  4.         type: "pie",
  5.         // 设置饼形图在容器中的位置
  6.         center: ["50%", "50%"],
  7.         //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
  8.         radius: ["40%", "60%"],
  9.         // 不显示标签文字
  10.         label: { show: false },
  11.         // 不显示连接线
  12.         labelLine: { show: false },
  13.       }
  14.     ]

定制需求3：更换数据

  1. // legend 中的data  可省略
  2. data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
  3. //  series 中的数据
  4.  data: [
  5.           { value: 1, name: "0岁以下" },
  6.           { value: 4, name: "20-29岁" },
  7.           { value: 2, name: "30-39岁" },
  8.           { value: 2, name: "40-49岁" },
  9.           { value: 1, name: "50岁以上" }
  10.  ] ,

定制需求4： 更换颜色

  1. color: [
  2.           "#065aab",
  3.           "#066eab",
  4.           "#0682ab",
  5.           "#0696ab",
  6.           "#06a0ab",
  7.         ],
  1.  // 4. 让图表跟随屏幕自动的去适应
  2.   window.addEventListener("resize", function() {
  3.     myChart.resize();
  4.   });

17-饼形图2 地区分布模块制作（南丁格尔玫瑰图）

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

第二步：按照需求定制

  • 需求1：颜色设置
  1. color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
  • 需求2：修改饼形图大小 ( series对象)
  1. radius: ['10%', '70%'],
  • 需求3： 把饼形图的显示模式改为 半径模式
  1.  roseType: "radius",
  • 需求4：数据使用更换（series对象 里面 data对象）
  1.           { value: 20, name: '云南' },
  2.           { value: 26, name: '北京' },
  3.           { value: 24, name: '山东' },
  4.           { value: 25, name: '河北' },
  5.           { value: 20, name: '江苏' },
  6.           { value: 25, name: '浙江' },
  7.           { value: 30, name: '四川' },
  8.           { value: 42, name: '湖北' }
  • 需求5：字体略小些 10 px ( series对象里面设置 )
    饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置
  1. series: [
  2.       {
  3.         name: "面积模式",
  4.         type: "pie",
  5.         radius: [30, 110],
  6.         center: ["50%", "50%"],
  7.         roseType: "radius",
  8.         // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
  9.         label: {
  10.           fontSize: 10
  11.         },
  12.       }
  13.     ]
  14.   };
  • 需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
    • 连接图表 6 px
    • 连接文字 8 px
  1. +        // 文字调整
  2. +        label:{
  3. +          fontSize: 10
  4. +        },
  5. +        // 引导线调整
  6. +        labelLine: {
  7. +          // 连接扇形图线长
  8. +          length: 6,
  9. +          // 连接文字线长
  10. +          length2: 8
  11. +        } 
  12. +      }
  13. +    ],
  • 需求6：浏览器缩放的时候，图表跟着自动适配。
  1. // 监听浏览器缩放，图表对象调用缩放resize函数
  2. window.addEventListener("resize", function() {
  3.     myChart.resize();
  4.   });

18-Echarts-社区介绍

社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

ECharts - 图1

  • 在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

19-Echarts-map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

实现步骤：

  • 第一需要下载china.js提供中国地图的js文件
  • 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
  • 使用社区提供的配置即可。

需要修改：

  • 去掉标题组件
  • 去掉背景颜色
  • 修改地图省份背景 #142957 areaColor 里面做修改
  • 地图放大通过 zoom 设置为1.2即可
  1.     geo: {
  2.       map: 'china',
  3.       zoom: 1.2,
  4.       label: {
  5.         emphasis: {
  6.           show: false
  7.         }
  8.       },
  9.       roam: false,
  10.       itemStyle: {
  11.         normal: {
  12.           areaColor: '#142957',
  13.           borderColor: '#0692a4'
  14.         },
  15.         emphasis: {
  16.           areaColor: '#0b1c2d'
  17.         }
  18.       }
  19.     },

总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。

20- 最后约束缩放

  1. /* 约束屏幕尺寸 */
  2. @media screen and (max-width: 1024px) {
  3.   html {
  4.     font-size: 42px !important;
  5.   }
  6. }
  7. @media screen and (min-width: 1920px) {
  8.   html {
  9.     font-size: 80px !important;
  10.   }
  11. }