echarts-json
v1.1.6
Published
Make ehcart easier to debug
Downloads
25
Readme
echarts-json是什么?
echarts-json有哪些功能或特点?
非常方便的在项目中引入
npm install -D echarts-json
需要用的地方内引入然后就可以调用啦
import echartsJson from 'echarts-json'
echartJsons.init(container,eChart,option,cssOption)
1.编辑和预览同步滚动
,所见即所得,再也不需要等待构建过程啦(尤其是项目文件多时)
2.无需重复编译
,方便效率党们快速的查看修改后的效果
3.增加编辑后复制
功能,方便在代码中直接粘贴修改后的option
4.支持重置
,任君发挥
5.点击确认后无痕删除新增容器,对原代码结构不产生副作用
6.依赖仅作用开发环境,程序员对打包体积的梗,你我都懂
有问题反馈
在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流 邮件([email protected]) 微信:esxhdcom 博客:@永远在追求 github:@woshiitdaniu
备注下
由于这是在兴趣的驱动以及自己在项目开发中对echart调式后的思考,觉得有必要写一个好用
的东西让咱们程序猿们不再因为调试echart而在浏览器和编辑器切来切去,由于该插件是初版,只实现了基本的实时编辑等功能,有非常多不完善的地方,比如样式丑陋,功能简单粗暴,但希望你能喜欢我的作品,同时也能支持一下。
感激
下一版计划更新内容
- [x] 将丑陋的样式---->华丽转身成高大上小清新
- [x] 对生成的echart Canvas增加鼠标hover事件,同时将hover对应的json位置高亮,方便直观的知道编辑所在位置
- [x] 增加容器最小化与可拖拽,更加方便用户调试
- [x] 使用lerna将公共包提取出来,方便复用
使用说明
1.npm install -D echarts-json
2.入口文件 main.js
import echartsJson from 'echarts-json'
Vue.prototype.$echartsJson = echartsJson
3.xxx.vue 需要调试echart的组件中
/*
* @params container:htmlObject 承载canvas的dom容器
* @params eChart eChart实例
* @params option eChart实例的配置对象
* @params cssOption 用于调节json容器宽高定位top/left的 参数示例{width:'xxpx',heigth:xxx,top:xx,left:xxx,fontSize:xx,lineHeight:xxx}
*/
this.$echartsJson.init(container,eChart,option,cssOption)