@xbcx/chart

数据可视化图表挂件整合

解决问题

• 重复的图表样式，ctrl C+V低效且大量option配置文件影响开发
• UI更新了设计风格之后，老旧项目更新起来十分困难

使用

安装

npm install @xbcx/chart

更新

npm install @xbcx/chart

调用

    import chartInit from "@xbcx/chart"

    let xb_chartObj = new chartInit();

    xb_chartObj.barlineChart({
        "dom":'',
        "textColor":"#a2bd90",
        "lineColor":"#3bbd1e",
        "barColor":"#312fbd",
        "xAxisData":["2016","","","","2017","","","","2018"],
        "lineData":[40,28,35,80,70,60,70,60,30],
        "barData":[25,15,17,5,12,15,10,12,14],
        "callback":[{
            "event":"click"
            }
        ]}
    );

使用思路

• new chartInit()的时候可以传入一个对象覆盖工程的默认样式，这样再后续的具体方法使用的过程中可以尽可能少的传参就能达到风格不突兀的效果
• new chartInit()可以在项目入口new一次即可（后期考虑写install函数）。也可以在分页面重新new一次以达到这个分页面独有的风格（说的就是党建，这个页面普遍需要红色主题）
• 项目没有uglify,可以点进去看注释，比较简单，不需要文档

开发

• npm install
• 全局工具在src/tools.js
• 图表函数集合在src/chartSet.js
• 图表构造函数在src/chartInit.js
• 丰富功能、编写方法注释
• npm run ver做版本
• npm run pub上传
• 通过另外一个项目调用查看效果

规范

• 尊重已有的编码风格[命名|es版本|注释方法]

ps:后续的项目会更新npm install @xbcx/chart,要注意迭代兼容

ps2:通过另外一个项目调用和查看效果很麻烦，可以rollup.config.js配置打包直接打包到另外一个项目的assest目录去，另外一个项目import chartInit from "../assets/xb_chart.bundle.js"来使用。build完之后如果另外一个项目支持热更新则可以返回浏览器直接查看效果了

FAQ

• 如果效果图和插件提供的效果有差距该怎么办
  • 如果该效果是进步的，修改插件（增加参数or增加方法）,所有项目可以考虑同步更新
  • 如果该效果只是和效果图有小差距，协商不修改
  • 如果协商失败，通过增加参数来进行判断
  • 如果该效果只是和效果图有大差距，判断是否是有特征的效果
  • 如果是具有特征的效果，为此新写一个方法
  • 如果是没什么特征，以后的项目很可能不用这个效果，通过传orginOption来临时覆盖样式规则
  • 如果传orginOption要传很多，那还不如不调用该插件了。