支持拖拉拽的可视化图表解决方案

Bigger
VIP.5 如鱼得水
5,543 阅读15分钟

本文正在参加「金石计划」

支持拖拉拽的可视化图表解决方案

背景

《xxx-xxxx》需要做一个可视化图表模块：

1、支持表格、折线图、饼图、柱状图、数值图、横向柱状图、仪表盘等图表。
2、支持表单配置图表参数，以及数据筛选参数。
3、支持拖拽排序、支持伸缩调整图表大小。

了解到这需求其实之前就有，但是之前的小伙伴一直没有找到合适的解决方案，所以就耽搁了。

历程

拆解需求，按照重要的点拆分，一步一步实现：

1、图表的选型及组件封装
2、页面的布局及表单的配置实现
3、拖拽伸缩的功能实现

图表的选型及组件封装

图表库的选择

主流的 web 图表库有：ECharts、Highcharts、D3.js、antv（G2，G6，F2）...

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

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，HighCharts 支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。但非商业免费，商业需授权。

D3 的全称是（Data-Driven Documents）。D3.js是一个 JavaScript 库（是一个被数据驱动的文档），用于在浏览器中创建交互式可视化。

D3 js库允许我们在数据集的上下文中操作网页的元素。这些元素可以是 HTML，SVG，或画布元素，可以根据数据集的内容进行引入，删除或编辑.它是一个用于操作 DOM 对象的库. D3.js 可以成为数据探索的宝贵帮助，它可以让您控制数据的表示，并允许您添加交互性。

@antv/g2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

@antv/g2 是一个图形语法, 通过数据之间的关系, 来生成一张图. 所以 G2 的定制化确实更加强大, 但是我们做业务的, 一般就是需要一个特定的图然后填充数据, 和将数据和数据之间的关系描述出来再实现图表有点出入，还有 G2 的文档一般，上手难度。

其中最后的选择落在 echarts 和 G2，echart 使用就是一些配置项，G2 是图形语法，通过数据之间关系，来生成一张图，虽说这样 G2 定制化更加强大。但是我们的业务，一般就是需要一个特定的图然后再填充数据，还能支持配置，无疑 Echarts 更符合我们的业务场景。所以最终图表库选择 echarts 。

组件的封装

封装思路：

  1. 利用 echarts 的配置项，把固定的配置项内容设置为默认 defaultOptions，把需要改变的配置项当作参数传进组件，组件内部再进行合并。

  2. 图表渲染的数据，可以当作参数传给组件，组件去 deep watch， 触发 setOption 方法修改配置或者渲染数据。

  3. 由于我们的图表是可以拖拉拽移动伸缩的，所以特别注意 chart.resize，可以帮助图表自适应。

页面的布局及表单的配置实现

image.png

拖拽伸缩的功能实现

起初，我的理解是把拖拽（排序） + 伸缩（调整大小）分开去实现，先实现拖拽，因为拖拽这块我这边也熟悉，之前做低代码项目也使用过。所以也就有了第一版的拖拽版本。

起初我是使用了 JS 的原生拖拽属性（transition-group、draggable="true"、dragstart、drag、dragend）

<transition-group
  name="drag"
  class="list"
  tag="ul"
>
  <el-col
    v-for="(item, index) in chartList"
    :key="item.id"
    :span="12"
    :id="`${item.id}${index}`">
    <div
      draggable
      class="drag-box"
      @dragenter="dragenter($event, index)"
      @dragover="dragover($event, index)"
      @dragstart="dragstart(index)">
      <el-card>
        ....
        ....
        ....
      </el-card>
    </div>
  </el-col>
</transition-group>

上处代码实现了拖拽，整体效果还可以，但是有一个严重的兼容 bug，那就是拖拽表格的时候，表格 table 通过 overflow: hidden 隐藏的滚动不可见区域居然又展示出来了，经过各种尝试解决，都未能取得明显的效果，本着造轮子失败的心理去使用了 Vue.Draggable 插件库。

Vue.Draggable

<draggable
  v-model="chartList"
  chosen-class="chosen"
  force-fallback="true"
  group="people"
  animation="1000"
  class="drag-box"
  @start="onStart"
  @end="onEnd">
  <transition-group
    name="drag"
    class="list"
    tag="ul"
  >
    <el-col
      v-for="(item, index) in chartList"
      :key="item.id"
      :span="12"
      :id="`${item.id}${index}`"
    >
      <el-card>
        ....
        ....
        ....
      </el-card>
    </el-col>
  </transition-group>
</draggable>

果不其然，使用第三方插件确实没有上述 bug 了，还是经过多年、多人开发的 Vue.Draggable 强。真的很好奇，那个 table 问题，它是怎么兼容过去的。

带着好奇心，大致去了解了一下其原理：Vue.Draggable 插件本质上是基于 Sortable.js 用以实现拖拽功能实现了一个全局组件 vue-draggable。

首先，它是在 mounted 生命周期中：

  1. 配置了 sortablejs 相关的回调函数、属性等
  2. 合并配置选项，实例化 sortablejs
  3. 计算列表项 vnode 在真实 dom 对象中的位置，并保存一个 index 数组做映射

接着，在真实的拖拽中，触发拖拽事件：

  1. 通过 sortablejs 返回的 domIndex 来找到真实数据中对应的位置，这样就可以找到数据在列表数据里的位置。
  2. 通过数据更新通知 vue 视图更新，也就是数据和视图双向绑定。

基本大致就是以上的一个流程，如有感兴趣的，可以去看源码，也就 400 多行。

用 Vue.Draggable 虽然实现了拖拽排序的功能，但是，别忘了，我们还有一个伸缩的功能，就找到了 vue-draggable-resizable 插件。

vue-draggable-resizable

vue-draggable-resizable 是一个 Vue2 的组件，用于可拖动和可调整大小的元素。

使用 Vue.Draggable 的拖拽位置能力 和 vue-draggable-resizable 的伸缩调整大小的能力，调试了一下，发现它和 Vue.Draggable 不兼容不能一起使用。其实 vue-draggable-resizable 自身就是可支持拖动和调整大小的两个功能，但是如果单独只使用它，也是不满足于我们的场景，它更像是支持那种可视化编辑拖拉拽的场景，也就是低代码的场景。

无奈，又去开始查阅各种资料，以及重新整理对需求的思考。

思考后，感觉自己走了弯路，看问题片面化了，其实重新理解一下，该需求类似于一种瀑布流的效果，但是增加了可视化调整大小的能力。这么理解的话，这算是一种布局，就是一个大盒子也就是父组件里边，有很多子组件列表，子组件可以随意调整排列顺序，而且可以支持伸缩调整大小，重新更新受影响组件布局。

按照这种思路，我找到了 React-Grid-Layout （适应于 React）和 vue-grid-layout （适用于 Vue）。由于我们的技术栈对应 Vue，所以我们选择 Vue Grid Layout。

Vue Grid Layout

一个类似于 Gridster 的栅格布局系统, 适用于 Vue.js。

github 地址 文档地址

<grid-layout
  :layout.sync="positions"
  :col-num="12"
  :row-height="50"..
  :is-draggable="true"
  :is-resizable="true"
  :is-mirrored="false"
  :vertical-compact="true"
  :margin="[10, 10]"
  :use-css-transforms="true"
>
  <grid-item
    v-for="(item, index) in positions"
    :x="item.x"
    :y="item.y"
    :w="item.w"
    :h="item.h"
    :i="item.i"
    :min-w="2"
    :min-h="1"
    :key="item.i"
    style="touch-action: none"
    @resized="resizedEvent"
    @moved="movedEvent"
  >
    <el-card
      v-loading="chartList[index]?false:true"
      :body-style="{ padding: 0, margin: '0 0 20px', height: bodyHeight }"
      :id="`${item.i}${index}`"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.6)"
      class="box-card"
    >
      <template v-if="chartList[index]">
        ....
        ....
        ....
      </template>
    </el-card>
  </grid-item>
</grid-layout>

遇到问题

首次加载页面时，echarts 图表并不显示

echarts 图形需要在 vue-grid-layout 加载完成后才能进行初始化，所以需要在 echarts 加载加上异步，刚好我们的图表数据需要一个个从后台接口异步获取。

新建的图表模块怎么增加进去？

deal_unsorted_list() {
  const len = this.old_unsorted_list.length
  const num = Math.ceil(len / 2)
  this.positions.map(item => {
    item.y += 6 * num // 每行默认 50，默认是 6 行
    return item
  })
  const list = []
  let num_y = 0
  this.old_unsorted_list.map(item => {
    if (list.length % 2 === 0) {
      list.push({ x: 0, y: num_y, w: 6, h: 6, i: item.id })
    } else {
      list.push({ x: 6, y: num_y, w: 6, h: 6, i: item.id })
      num_y++
    }
  })
  this.positions = list.concat(this.positions)
  this.onEnd()
},

思路就是：判断是否有新增的图表，如果有，就计算出 新的需要占的总高度，把老的图表重新计算 y 轴上的位置，统一往下赶一赶，这样就给新的在顶部（倒序）留出出空的位置了。然后再把新的没有拍过位置的计算排一下位置。

上述是算是倒叙在增加新的图表，但是我们有的场景也是正序加载新的图标，新的图表直接加载最后。接下来我们也实现一下，正序加载图表。

deal_unsorted_list_zheng() {
  let start_x = 0
  let start_y = 0
  if (this.positions.length > 0) {
    const last_p = this.positions[this.positions.length - 1]
    if (12 - last_p.x - last_p.w >= 6) {
      start_x = last_p.x + last_p.w
      start_y = last_p.y
    } else {
      start_y = last_p.y + 6
    }
  }
  const list = []
  this.old_unsorted_list.map(item => {
    list.push({ x: start_x, y: start_y, w: 6, h: 6, i: item.id })
    start_x = start_x + 6 >= 12 ? 0 : start_x + 6
    start_y = start_x === 0 ? start_y + 6 : start_y
  })
  this.positions = this.positions.concat(list)
  this.onEnd()
}

更新位置图表响应式

// ...
watch: {
  position: {
    deep: true,
    handler() {
      this.chart && this.chart.resize()
    }
  }
}

给图表设置响应式。

每次拖拽后，前端需要给出正确的排序

每次拖拽后，前端需要给出正确的排序传给后端保存起来，保证下次进来是按照顺序懒加载的，也就是从上到下一个个去加载图表数据。这样用户体验会好一点。那么怎么排序呢？

比如：如下坐标系，要求先按照 y 的大小从小排序，再按照 x 的大小从小排序，排 x 的时候不能影响之前 y 排好的顺序。

"pxy": [
    {"x": 0, "y": 16,}, 
    {"x": 3, "y": 0,}, 
    {"x": 6, "y": 0,}, 
    {"x": 9, "y": 10,}, 
    {"x": 4, "y": 16,}, 
    {"x": 8, "y": 5,}, 
    {"x": 0, "y": 10,}, 
    {"x": 0, "y": 0,}, 
    {"x": 9, "y": 0,}, 
    {"x": 0, "y": 5,}, 
    {"x": 4,"y": 5,}, 
    {"x": 3,"y": 10,}
]

答案也就如下操作：

onEnd() {
  this.sort_id = []
  this.positions.sort((a, b) => a.y === b.y ? a.x - b.x : a.y - b.y)
  this.positions.map(item => {
    this.sort_id.push(item.i)
  })
  this.editDashboard()
}

图表加载体验

上部分也提到了按照顺序从上向下加载，因为我们的这个仪表盘列表可能会有很多图表，如果一次性去请求一个接口加载数据，后端接口就会很吃力，前端的页面用户体验也不好。

所以我们就把接口拆分为两部分，第一部分是图表的位置数据及每个图表的对应id，第二部分就是每个图表的详情数据。也就是先把列表大概渲染出来，每个位置对应的加载出来，再按照顺序遍历 id 串联的去加载每个图表的数据。

效果就是用户先看到所有的图表从上到下的依次加载，也适应用户喜欢从上向下浏览的体验。

图表使用说明

日志服务平台提供多种图表类型，支持用户使用 聚合函数 灵活统计日志内的系统及业务指标，并通过图表进行展示。用户还可以将图表分析结果保存到仪表盘，进行长期监控。

图表类型使用场景
表格表格是最常见的数据展示类型，通过对数据结构化的整理，实现数据的对比与统计。大多数场景均适用。
折线图时序图需要统计数据具备时序字段，依据时间顺序组织与聚合指标。可直观反映指标随时间的变化趋势。统计近一周，每天404错误出现的次数等趋势分析场景适用。
饼图饼图描述的是不同分类的占比情况，通过扇区大小来衡量各分类项的占比情况。错误码占比情况分析等占比统计场景适用。
柱状图柱状图描述的是分类数据，直观表现每一个分类项的大小对比关系。统计近一天各错误码类型出现的次数等分类统计场景适用。
数值数值描述的是单个指标，一般选择具备有业务价值的关键性指标。统计天、周、月 PV、UV 等单指标场景适用。
横向柱状图横向柱状图与柱状图一样，描述的是分类数据，直观表现每一个分类项的大小对比关系。统计近一天各错误码类型出现的次数等分类统计场景适用。
仪表盘仪表盘描述的是单个指标，与单值图不同的是，仪表盘一般搭配阈值使用，用来衡量该指标的状态。系统健康度监控等有分级标准的场景适用。
指标聚合(Metrics Aggregations) 参数说明
count计数 聚合返回所选索引模式中元素的原始计数。
average该聚合返回数字字段的​平均值 。
sum总和 聚合返回数字字段的总和。
min最小值 聚合返回数字字段的最小值。
max最大值 聚合返回数字字段的最大值。
standard deviation扩展统计 聚合返回数字字段中数据的标准偏差。
unique count基数 聚合返回字段中唯一值的数量。
median (50th percentile)中位数 聚合将数字字段中的中值。
percentiles百分数 聚合将数字字段中的值分成您指定的百分数区间。从下拉列表中选择一个字段，然后在 Percentiles 输入域中指定一个或多个范围。点击 X 删除百分数字段。点击 + Add 添加百分数字段。
percentile ranks百分位等级 聚合返回指定的数值字段中的值的百分位等级。从下拉菜单中选择一个数字字段，然后在 Values 输入域中指定一个或多个百分比等级值。点击 X 删除值字段。点击 + Add 添加值字段。
聚合函数(BUckets)说明
date histogram日期直方图 是从数值字段构建并按时序、时间进线数据聚合
terms词条 分组聚合使您可以指定要显示的给定字段的顶部或底部 n 个元素，按数量或自定义指标进行排序。

表格

image.png

折线图

image.png

饼图

image.png

柱状图

image.png

数值

image.png

横向柱状图

image.png

仪表盘

image.png

优化体验

增加水印

图表一般都是数据类相关的，所以针对数据的保密性、安全性也是需要考虑的，所以就加上水印。

水印这块，我是使用的 github 开源的 watermark，在其基础上进行了二次开发，修改了其中一些 bug，增加了一些个人需求。同时也是支持防控制台删除功能。因为是原生 js 写的，所以不分前端框架，不管 Vue、还是 React 都支持。

mounted() {
    watermark.init({ 
        watermark_txt: ['xxx-xxxx', username], // 数组有几项，就代表几行
        watermark_parent_node: 'LookChart' 
    })
},

beforeDestroy() {
    watermark.remove()
},

增加了全屏切换体验

全屏切换我这快使用了 github 上的一个开源方案 screenfull，整体使用感觉还不错，也推荐大家使用。

做这个全屏 screenfull，还特意去了解了一下 top-layout，感兴趣的也可以去看一下。

做全屏这块，需要注意的点有：整体页面全屏 和 单个图表全屏之间切换问题，所以这块最好去判断是哪种情况的全屏，全屏最好绑定在指定元素上。

// 页面全屏
fullScreenClick() {
  if (!screenfull.enabled) {
    this.$message({
      message: 'you browser can not work',
      type: 'warning'
    })
    return false
  }
  if (screenfull.isFullscreen) {
    screenfull.exit()
  } else {
    const element = document.getElementById('LookChart')
    screenfull.request(element)
  }
},

// 单个图表全屏
chartScreenClick(item, index) {
  if (!screenfull.enabled) {
    this.$message({
      message: 'you browser can not work',
      type: 'warning'
    })
    return false
  }

  const elementLookChart = document.getElementById('LookChart')
  // 判断是否是页面全屏状态
  if (screenfull.isFullscreen && screenfull.element !== elementLookChart) {
    screenfull.exit()
  } else {
    this.bodyHeight =
    this.bodyHeight === 'calc(100% - 40px)' ? '95vh' : 'calc(100% - 40px)'
    const element = document.getElementById(`${item.id}${index}`)
    screenfull.request(element)
  }
},

增加了暗黑模式切换体验

做图表，配上暗黑模式，瞬间科技感就提升了很多，高大上了许多。目前包括系统、浏览器、各种技术文档等都几乎提供了暗黑模式，可见这是一种趋势。也是一种现代审美。

那简单的基本做法就是：

// 加载本页面、本模块设置暗黑模式切换
mounted() {
    window.document.documentElement.setAttribute('data-theme', 'normal')
},
  
// 暗黑模式切换
switchChange() {
    if (this.switchValue) {
        window.document.documentElement.setAttribute('data-theme', 'normal')
    } else {
        window.document.documentElement.setAttribute('data-theme', 'dark')
    }
},

光改 js 逻辑肯定不行啊，肯定 需要 改 css 来支持：

[data-theme="normal"] & {
    .Look{
      height: 100%;
      background-color: #f0f2f5;
    }
    // ....
}

[data-theme="dark"] & {
    .Look{
      height: 100%;
      background-color: rgba(0, 21, 41, 0.9);
      color: #fff;
    }
    // ....
}

增加了颜色主题切换体验

每个用户的喜好不同，对色彩的喜好也不同，为了能满足更多的用户，增加以下几个主题的切换。

image.png

秋日橙主题

以橙色调为主的主题色板，整体基调是秋日的丰收色，同时适应深浅模式，可按需替换默认主题。

image.png

1605580842997-9b92adc4-f786-4b01-8948-3b9b65137266.gif

马卡龙主题

以粉紫色调为主的主题色板，整体基调是马卡龙糖果色，同时适应深浅模式，风格活泼明快，可按需替换默认主题。

image.png

1605580855576-8e823c86-0992-48fd-bcd0-1e0a3a715438.gif

强对比主题

强对比分类主题，颜色饱和度较高，强对比度，在投屏场景等降对比场景使用。

image.png

1605580864671-02473b66-3913-48df-949e-837baa570f69.gif

小结

整体的效果：

image.png

整体的历程和遇到问题，不仅仅局限于上处所列的。只是提到一些典型而已。如果大家有类似需求，或者文中有不当之处，再或者有更优解，都可留言评论或者私信沟通互相学习。

感谢大家支持！

avatar
文章
阅读
粉丝
相关推荐
一起来做一个数据可视化，可拖拽的， 高度自定义的图表看板吧
3.9k阅读
 · 
20点赞
Echarts动态生成图表，图表类型进行切换，长数据区域展示
2.9k阅读
 · 
15点赞
【前端可视化探索-01】浏览器中实现可视化的几种方式
1.4k阅读
 · 
1点赞
# Vue 2 封装 ECharts 通用组件
60阅读
 · 
0点赞
echarts在vue2项目中的使用（引入vue-echarts库）
1.5k阅读
 · 
2点赞