1图表实现思考如下,起初我是搜官网,然后画图表,每次画,每次搜,后来记住了echart4 5版本 3就有点老了 没敢用,后面社区有很多案例网站,各种效果,我经常就是去找 然后使用。
2刚刚开始是哪里需要画图表就在哪里配置option,然后接口交互,然后复制然后写一堆配置,这样图完成任务
3后来感觉系列的图表内容都差不多,折线,柱状图,饼图,渐变,水滴,玫瑰图等等,思考是不是可以封装组件,做数据驱动,后来去开源找,有v-echart 封装的,根据不同的图表给不同的组件,然后下载下来用过一段时间,感觉也不是很好用,因为改的多,然后没怎么维护就放弃了。
4使用的灵感看了他的源码,发现每个组件都是引入了echart里面系列图表的代码来使用,后面我就想把通用的option抽离变成一个js函数,接受一个dom,返回一个实例,然后一个参数接受数据,里面使用一个默认的主题配置,
5我会在项目的入口js注册一个图表的主题,通过主题echarts的配置来导入js或者json,这样就可以控制图表的颜色,方便修改,在函数里面使用,独立的比如柱状图 有柱状图函数,一个项目里面大概有十几种图表,几种不同的主题,也就有几种不同的配置,和十几种函数图表,因为是函数,然后接受一个数据格式,然后返回一个实例,通常一个特定的图表就提供一个函数,不会给到option绝对的自由改变,复用也是复用特定的图表来使用。
6因为是函数,所以不管是什么框架引用起来都是塞数据,然后给dom节点,然后安装echarts,就可以完成使用,每个项目里面都要几个图表的沉淀,然后多个项目下来就有不少的函数,可以提出来打包一个组件库,虽然我没这样做,因为感觉一个人顾不过来。基本每个项目都要这样的代码。
7如果要打包组件库,通常要有文档,案例,配置,然后效果展示,然后迭代升级,其实是可以搞的,但没弄。
8使用框架有react也有vue,因为是函数,然后特定的拓展,有一定的项目局限性,打包估计也是只能适应一个项目,多个有差异的,还得自己写主题,然后使用,也是比较复杂的。