npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

echarts-json

v1.1.6

Published

Make ehcart easier to debug

Downloads

25

Readme

echarts-json

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)