Vue +Element UI (饿了么UI) +Echarts 实现图表自适应配置

接到一个需求,让用户能够通过配置, 配置出自己想要的统计图, 填入数据

分析需求:

• 需要客户配置的数据项有哪些?

• 客户配置数据的存储

      JSON转String 存数据库就行.....

一.可配置的项

1. 主标题(带颜色),副标题(带颜色)
2. 图表种类(分为  坐标系,非坐标系图, 差别在于 有无 xAxis, yAxis 属性)
3. 图表背景色
4. 是否需要开启类目
5. 是否需要开启工具(左上角下载图片等工具)
6. 类目的位置
7. 图表的类型 暂时有   柱状图 bar ,折线图 line, 饼图 pie, 雷达图 radar
8. 坐标系图 位置大小, 非坐标系 位置, 大小
9. 饼图 是否开启南丁格尔图, 雷达图是否开启透明度

二.基本效果图

---

三.代码

四.总结

还存在的小bug

1. 非options的直接属性， 借用subConfig 来实现的数据 渲染不同步， 需要点击刷新重新渲染，右侧的图才会渲染成功
2. 类目位置调整， 应该是 有了 left有了值， right 就不能有值， 一样， top有值bottom 就不能有值，否则后者渲染失效
3. 数据源码的源码刷新不及时
4. 在选中饼图 调整位置的时候  会保存Xcenter ，Ycenter 俩个 无用参数
5. 等

代码存在的缺陷

1. 多次判断坐标种类  及 subConfig.tbzl 和 图表类型  options.type  是否可以统一处理，方便扩展
2. 每次切换坐标系图和非坐标系图的时候， 重置 this.options 是否可以事项保存一个值， 而不是用重新赋值的方法
3. 由于JS功力有限....多次借助其他对象来操作数据，造成Xcenter 等这样不需要的参数  参杂在option里面
4. 提供的可选功能有限
5. 等

可改进

1. 在非坐标系图多项数据的时候， 例如 俩个饼图， 是否可以初始化 位置，大小， 进行默认排位置
2. 需要提供， 主副标题及颜色的话， 加俩个属性就行了
3. 最主要的是 数据不能及时同步和渲染.功力太差
4. 等