Echarts项目实战——数据可视化（echarts+flexible.js）问题记录

目录

一.基础布局及样式

1.适配方案

2.时间效果

3.flex三栏布局

4.公共面板

5.主体数字模块

6.主体地图动画

二.Echarts 分析

1.使用步骤

2.基础配置

3.柱状图（纵向、横向进度条）

4.折线图（常规、填充区域）

5.饼状图（圆环、南丁格尔玫瑰）

三.最终效果图

---

一.基础布局及样式

1.适配方案

• 设计稿1920px
• flexible.js 屏幕分为 24 份
• cssrem 插件基准值是 80px（重启后生效）
• 约束屏幕尺寸：

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
}}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
}}

2.时间效果

• 把下面的 js代码 添加到 定位好的 时间盒子里

// 格式： 当前时间：2020年3月17-0时54分14秒

3.flex三栏布局

• column 列容器，分三列，占比 3：5：3

.mainbox {
  display: flex;
  .column {
    flex: 3;
  }
  &:nth-child(2) { // 这里的 & 相当于 父元素.mainbox
    flex: 5;
  }}

4.公共面板

• 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
• 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px

.mainbox .panel::after { // 上面的某个角
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer::before { // 下面的某个角
  // ...
}

5.主体数字模块

• 可以采取 ul li 布局的形式

.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  // ...
}

6.主体地图动画

1. 地图模块高度为 810px，包含4个盒子，chart 图表、球体盒子、旋转1、旋转2
2. 球体盒子 map1 大小为 518px，背景图片缩放100%，定位到中央，透明度 .3
3. 旋转1 map2 大小为 643px，背景图片缩放100%，定位到中央，透明度 .6，旋转动画，利用 z-index 压住球体
4. 旋转2 map3 大小为 566px，背景图片缩放100%， 定位到中央，旋转动，画逆时针

.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中效果 */
  width: 8.0375rem;
  height: 8.0375rem;
  background: url(../images/lbx.png);
  animation: rotate1 15s linear infinite;  /* 动画效果 */
  opacity: 0.6;
  background-size: 100% 100%; /* 背景缩放 */
}

@keyframes rotate2 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg); /* 逆时针旋转动画 */
  }}

 

二.Echarts 分析

1.使用步骤

1. 引入 echarts 插件文件
2. 准备一个指定宽高（必须）的 DOM 容器：
3. 初始化echarts实例对象：var myChart = echarts.init(document.getElementById('main'));
4. 指定配置项和数据（option）：var option = {...}
5. 将配置项设置给echarts实例对象：myChart.setOption(option);

2.基础配置

1. series：图表类型，图表本身的样式设置，可以多个图表叠加（比如多条折线）
2. xAxis / yAxis：直角坐标系 grid 中的 x 轴 / y 轴；（boundarGap：是否让线条和坐标轴有缝隙）
3. boundaryGap：坐标轴两边留白（轴内边距）
4. grid：直角坐标系内绘网格（线型图柱状图大小）（containLabel: true 是否显示刻度标签）
5. tooltip：提示框组件，存在触发方式（鼠标在点上出现提示框，还是在线上出现提示框等等）
6. legend：图例组件（如果 series 中有 name 属性，那么这里可以不写 data）
7. title：标题组件
8. color：调色盘颜色列表，后面跟着数组
9. stack：数据堆叠，后一个系列的值会在前一个系列的值上叠加

• 两大绘制图表步骤：

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

• 在 index.js 中书写立即执行函数（变量仅内部有效），用于包裹不同的 echarts实例，防止全局命名污染
• 图表跟随屏幕自适应：

  window.addEventListener("resize", function() {
    myChart.resize();
  });

3.柱状图（纵向、横向进度条）

• 轴设置（xAxis/yAxis）：

1. type：数值value、类目category
2. axisLabel：刻度标签文本设置（show、color、fontSize）
3. axisLine：轴线样式（show、lineStyle（color、width、type））
4. splitLine：轴分隔线样式（lineStyle（...））
5. axisTick：坐标轴刻度（show）
6. data：x/y轴上的数据

• 图表设置（series）：

1. name（图例名字）、type（图表类型（折线、柱状、饼状等等））、barWidth（柱子宽度）
2. itemStyle（barBorderRadius（圆角）)、data（数据）、
3. label（图表身上的文本设置）

 

• 进度条效果原理：两个柱状图叠加即可，一个柱状图是条状、一个柱状图是框状
• 条的样式：

name: "条",
barCategoryGap: 50, // 柱子间距
barWidth: 10, //柱宽
itemStyle: {
    normal: {
      barBorderRadius: 20, // 柱子圆角       
    }},
label: {
    normal: {
         show: true,
         position: "inside", // 图形内显示
         formatter: "{c}%" // 文字的显示格式 
     }},
        itemStyle: {
          color: function(params) { // 设置柱子不同颜色
            console.log(params); // params 传进来的是柱子对象
            return myColor[params.dataIndex]; // dataIndex 是当前柱子的索引号
          }},

• 框的样式：

  	    name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,  // 只留下框，所以边框粗一些
        itemStyle: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }

• y轴（yAxis）可以添加两组数据，series 也可以添加两组数据
• 设置两组柱子的层叠：yAxisIndex

yAxisIndex: 0, // 给series  第一个对象里面的 添加 
yAxisIndex: 1, // 给series  第二个对象里面的 添加 

4.折线图（常规、填充区域）

• smooth（折线图变为圆滑曲线）
• symbol（拐点类型）
• areaStyle（填充区域）
• labelLine（引导线长短）：length1，length2，引导线有两块

        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
              },{
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
              }],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)"
        },

• 2020年 2021年 数据发生变化 需求实现思路：点击 2020，需要把 series 第一个对象里面的 data 换成 2020年对象里面data[0]，把 series 第二个对象里面的data 换成 2020年对象里面data[1]
• data: yearData[0].data[1]
• 点击切换效果 jquery 如下：

 var yearData = [{
        year: '2020',  // 年份
        data: [  // 两个数组，因为有两条线
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]},
      {
        year: '2021',  // 年份
        // ...
      }];

  // 点击切换效果
  $(".line h2").on("click", "a", function() {
    // 点击 a 后，根据当前a的索引号$(this).index()，找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    myChart.setOption(option); // 需要重新渲染（重要！！！）
  });

5.饼状图（圆环、南丁格尔玫瑰）

• 带有直角坐标系的（折线、柱状）是 grid 修改图形大小，而饼形图是 radius 修改大小

series: [
      {
        name: "年龄分布",
        type: "pie",
        center: ["50%", "50%"], // 设置饼形图在容器中的位置 
        radius: ["40%", "60%"], //  修改内圆半径、外圆半径  百分比相对于容器宽
        label: { show: false }, // 不显示标签文字
        labelLine: { show: false }, // 不显示连接线
      }]

 

三.最终效果图