数据可视化封装开发经验

一.技术栈

vue3+element-plus+echarts 制作的可视化封装

二.项目难点

        项目介绍 这是一个纯前端项目 开始获取后端传输的数据源之后 随着点击图形 选择x轴 y轴 z轴 着色依据 或者点大小以及其他 自动生成echarts图 并可操作

        来吧 展示 先上项目的最终样子

 

 

 

 1.监视视口宽  当视口宽发生改变时  重新渲染echarts图  使其完成自适应

 实现效果:

 2.散点图 着色依据  通过每条数据的类型去分类  从而达到颜色不同做区分的效果

        下方为数据处理的过程  Object.values处理是因为后台传数据的方式类似于对象{'cell':[0:'a',1:'b',...],...}这样的数据  我只需要['a', 'b', ...]这样的

 

最终结果

 3.echarts右上角的缩放,还原,下载

echarts里的toolbox属性就是生成右上角功能的  但是缩放一定要加上dataZoom下type: 'inside'

 4.直方图着色依据

这也是我觉得最难的地方  开始本来要使用echarts-stat这个插件的  结果他里面的filter并不适合我现在的数据用法  我就自己手写处理数据（Ps: 头发嘎嘎掉）

直方图 是可以直接选择y轴就能生成的  所以我做了一下判断 下方只有y轴数据时的数据处理

 

 

 下方是有x轴y轴数据时的处理

 

 5.历史数据处理

 每次渲染echarts图时 就把渲染参数添加到列表里  然后循环列表显示出历史数据

历史数据可以点击  点击可以跳转到当时渲染的图形  index为点击下标 这里取他的作用是当前渲染为历史那一个  那一个字体样式会变粗  上方的撤销  重做 点击时也会带动字体加粗动  虽然点击重新加载echarts图   也算是渲染  但是这个地方添加一个条件isBu 当他为false就会添加到历史  默认为false

 

 

6.动态添加参考线

这里我是添加了一个弹框 让其自己添加参考线  取色器 用的是element自带的取色器

 三.项目总结

        1.大厂代码规范  能不用var就不用var   基本都是let  const

        2.开始开发觉得难的地方  多查查文献 多看看文档还是可以解决的

        3.往往看起来很简单的东西   可能才是最恶心你的