大屏数据可视化实践

不吃西红柿w
1,260 阅读5分钟

大数据时代，以大屏为载体的数据可视化需求日渐增多，数据大屏成为越来越多企业绩效展示，报表展示，业务监控等等的一种形式。决定用 React + Echarts 实现一个大屏数据展示系统。记录一些自己用到的知识点：

使用 rem 单位适配各种屏幕

为了适配屏幕又使整体画面不变形，通过使用 rem 单位可以使页面根据浏览器的大小进行调整。

适配算法如下： 假设设计稿的宽高比为 16：9。

image.png

其中 h设备 为显示设备的高度，w设备为显示设备的宽度，Wp 为页面有效宽度， Hp为页面有效高度。当 设备的宽高比大于 16:9 时，左右留白，小于 16:9 时，则上下留白。计算出 Wp 后，在 JS 中设置:

1 rem = Wp / 100

image.png

根据以上推理，便可以计算中设计稿中某个元素的大小对应的实际以 rem 为单位的大小值。

使用 grid 布局

Grid 网格布局是一种强大的二维网格布局系统。对于规则或不规则的分块显示数据图表的大屏项目，使用 Grid 布局是一种很适合的方案。以下总结一些常用的 Grid 布局的知识点。

  • 网格容器和网格元素： 我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。

  • 网格轨道： 我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。

  • fr 单位： 轨道可以使用任何长度单位进行定义。 网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。新的fr单位代表网格容器中可用空间的一等份。下一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

image.png

  • 在轨道清单中使用repeat()：

有着多轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。如下方的网格定义：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

也可写成：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Repeat 语句可以用于重复轨道列表中的一部分。

  • 网格线： 应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素. 例如下面这个三列两行的网格中，就拥有四条纵向的网格线。

image.png

网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。 网格线也可以被命名，我们将在稍后的教程中看到如何完成这一操作。

  • 使用网格线定位元素： 使用grid-column-start, grid-column-end，grid-row-start，grid-row-end属性来对子元素进行定位，对应的值就是该元素位置的行列起始和终止的网格线编号。

image.png

  • 网格间距： 在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用 grid-column-gap 和 grid-row-gap属性来创建，或者直接使用两个合并的缩写形式 grid-gap。

image.png

  • 使用 grid-area 确定区域：  grid-area 属性指定项目放在哪一个区域， 一般这个属性跟网格元素的grid-template-areas 属性一起使用，grid-template-areas  用于定义区域，一个区域由一个或者多个单元格组成。

在用网格线定义网格区域时，我们是通过指定围绕网格区域的四条线来定义的。我们也可以先给一个区域命名，然后在 grid-template-areas属性值中指定这个区域的位置。你可以随意为区域命名。通过 grid-area属性为这些区域各分配一个名字，这不会影响布局。

image.png

以上就是 grid 布局的基本用法。更多查阅 网格布局MDN文档

使用 echarts

使用 Echarts 可视化图表库来展示数据。根据官网教程：

  1. 安装
npm install echarts --save  //(或者用 yarn 下载)
  1. 引入 ECharts
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
  1. 根据不同需求，从示例中选定所需样式对 option 选项进行更改即可实现自定义图表。

在此主要记录如何实现 地图 并且简单标注。

① 引入地图文件

import china from './china.json';

② 注册可用的地图

echarts.registerMap('CN', china);

③ 通过geo地理坐标系组件绘制地图。

geo: {
  map:'CN',
},

④ 根据需求对默认样式修改

geo: {
  map:'CN',
  itemStyle: {   // 地图区域的多边形 图形样式。
    color: '#010D3D',   
    borderColor: '#01A7F7',
  },
  emphasis: {  // 高亮状态下的多边形和标签样式。
    label: {color: 'white'},
    itemStyle: {
      areaColor: '#5470C6',
    }
  },
},

⑤ 选用带涟漪效果的散点图(effectScatter)在地图上进行标注。添加 series 数组。

const colors = {'青海省': '#1cedd8', '甘肃省': '#bb2ff5', '新疆维吾尔自治区': '#17b1fd'};

series: [
  {
    type: 'effectScatter',  // 指明图表类型：带涟漪效果的散点图
    coordinateSystem: 'geo',  // 指明绘制在geo坐标系上
    color: colors['新疆维吾尔自治区'],
    data:[
      {
        name: '新疆',
        value: [84.9023,42.148]  // 显示城市的经纬度坐标
      }
    ]
  },
  {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    color: colors['甘肃省'],
    data:[
      {
        name: '甘肃',
        value: [103.73,36.03],
      }
    ]
  },
  {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    color: colors['青海省'],
    data:[
      {
        name: '青海',
        value: [95.2402,35.4199]
      },
    ]
  }
]

最终效果：

动画2.gif

ECharts 更多用法参考 Apache ECharts文档。

本文参考：

avatar
文章
阅读
粉丝