vue前端数据可视化echart实践经验（三）可视化功能封装

最新推荐文章于 2024-06-30 13:28:25 发布

juliotang

最新推荐文章于 2024-06-30 13:28:25 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签：可视化 vue

本文链接：https://blog.csdn.net/juliotang/article/details/107785983

版权

本文详细介绍了如何在Vue项目中封装ECharts的可视化功能，包括接父组件条件设置基础option、请求后端数据封装、数据对象绑定到option及实际画图四个步骤。文中以视频内容的可视化为例，探讨了在不同场景下如何灵活运用这些步骤，并提供了具体的代码示例。

摘要由CSDN通过智能技术生成

echart可视化的功能封装

前面部分论述了可视化初始化与刷新，主要关注的是父组件如何与子组件通信确定可视化时机。本节描述子组件中具体可视化的步骤：
1. 接父组件条件进行基础可视化option设置
2. 请求后端数据封装可视化数据对象
3. 根据局部条件将数据对象绑定到option
4. 实际画图

这里的option指的是echart里面的js对象，用过的都很熟悉了。下面将根据我们上一节所说的那个可视化例子来详述我们如何体现出这四步到方法级别，并且如何根据实际场景灵活运用的。以下是上节中的可视化案例：
在这里插入图片描述
重新描述一下场景（复制黏贴>_<）。这是关于一个视频内容的可视化，最上面是可视化筛选条件，包括定价、端选择、时间选择，下面有若干可视化组成部分，我这里截图只截到了两个（分端流量走势、剧集分视频数据），滚动条下拉还有几个。对于这个可视化，顶部筛选条件对于所有可视化区域是通用的。
同样只针对第一个可视化分端流量走势来讨论，如下代码展示了我如何将四个步骤封装为方法的，这里1、2、3、4对应上面提到的那四步

async init(video, isNew) {
   
  this.video = video
  this.initTerminalTrend(isNew)	// step 1
  // this.fakeData()
  await this.getData()	// step 2
  if (this.hasData) {
   
    this.switchInd()	// step 3
    this.draw()	// step 4
  }
},

echart option设置样式与数据绑定解耦
在展开讨论之前，先说下echart中option的代码习惯，我个人习惯是每一个可视化一个option js文件，里面只存储静态的内容，这些内容是跟业务逻辑完全无关的，然后在可视化组件vue文件中，再根据逻辑不断丰富option对象，最后进行echart渲染。
也有的小伙伴喜欢在option js文件中也写入数据绑定逻辑，这样也可以。我个人还是习惯业务逻辑都放在vue文件中，这样好处是实现了echart样式和逻辑分离，有点类似css和js的关系。像设置颜色，或者grid移动几个像素这种本身样式的事，就改option文件就行了，而数据绑定的逻辑就在vue的方法中处理。

1. 接父组件条件进行基础可视化option设置
initTerminalTrend方法中，需要根据父组件条件进行基础设置，这些设置是每次父组件切换筛选项和其他业务逻辑决定的参数告知我们的，这些设置，在子组件内部是不变的，结合本例主要下面几个

子组件的内容类型选择项根据业务逻辑会不同，这个根据参数this.video.contentType和是否有isNew参数不同，具体不详述
可视化横坐标轴的时间通过参数this.video.time拿到，同时更新后续后端请求参数
可视化legend是所有筛选条件里面的端，通过参数this.video.terminals拿到，同时更新后端请求参数

完整的initTerminalTrend代码如下：

initTerminalTrend(isNew) {
   
  if (!isNew && this.video.contentType !== '全部') {
   
    this.contentTypes[0].check = false
    this.contentTypes[0].children.forEach(contentType => {
   
      contentType.check = (contentType.label === this.video.contentType) ? true : false
    })
  }

  this.optionBar.xAxis.data = []
  this.allDates = adddateTLJ(this.video.time)

  this.dt = []
  this.allDates.forEach(d => {
   
    this.dt.push(switchDate(d))
  })
  this.dt.forEach(d => {
   
    this.optionBar.xAxis.data.push(d)
  })