1.0.0 • Published 3 years ago

echartjson v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

echart-json ##echart-json是什么?

##echart-json有哪些功能或特点?

  • 非常方便的在项目中引入
    • npm install -D echart-json
    • main.js中使用Vue.use()
    • 需要用的组件内直接调用就可以了 this.$echart_json(container,eChart,option)

  • 编辑和预览同步滚动,所见即所得
  • 无需重复编译,方便效率党们快速的查看修改后的效果
  • 增加编辑后复制功能,方便在代码中直接粘贴修改后的option
  • 支持重置,任君发挥
  • 点击确认后无痕删除新增容器,程序员对打包体积的梗,你我都懂

##有问题反馈 在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流

##备注下 由于这是在兴趣的驱动以及自己在项目开发中对echart调式后的思考,觉得有必要写一个好用的东西让咱们程序猿们不再因为调试echart而在浏览器和编辑器切来切去,由于该插件是初版,只实现了基本的实时编辑等功能,有非常多不完善的地方,比如样式丑陋,功能简单粗暴,但希望你能喜欢我的作品,同时也能支持一下。 ##感激

##下一版计划更新内容 1.将丑陋的样式---->华丽转身成高大上小清新 2.将textare改成html标签显示 思路:将json对象字符串根据一定的正则抽离出key,value,{},;,等特殊符号,同时用span标签包裹 对key和value增加不同的样式显示 3.对生成的echart Canvas增加鼠标hover事件,同时将hover对应的json位置高亮,方便直观的知道编辑所在位置

##使用说明

1.npm install -D echart-json
2.//main.js
  import EchartJson from 'echart-json'
  Vue.use(EchartJson)
3.//xxx.vue 需要调试echart的组件中
/*
 * @params container:htmlObject  承载canvas的dom容器
 * @params eChart  eChart实例
 * @params option  eChart实例的配置对象
 */
this.$echart_json(container,eChart,option)