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

pyz-charts

v1.3.2

Published

vue-charts option

Downloads

253

Readme

Vue.js 2.6

Pyz-Charts

  • pyz-charts will stay with Vue 2.x

完整实例: 仓库Demo地址:github

1.27 版本以上 优化一个清除画布Canvas缓存,防止柱状图和折线图切换按钮时,导致阴影残留

1.3.2优化模板--新增树状图Tree

Install

Build Status NPM Version NPM Downloads Install Size

npm install pyz-charts
<version: 1.2.3+>
新增 Npm Shell 强大命令处理
自动创建ChartsOption的 Cli 工具链.
自动创建VueComponents组件,自动封装props,watch等等.
无需一行代码即可创建漂亮的VueCharts.
帮助您急速开发项目.
模板集合并不完善,暂时更新了一部分!
觉得不错点个github Stat
谢谢你们的支持!我们让代码愈来愈额简单! 
使用如下:
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "pco": "pyz-charts"
  }
}
在"script"中添加"pco",这个可以任意写,值必须是"pyz-charts"
执行:npm run pco
npm run pco
version: 1.1.1+
1、解决了resize冲突问题,加入句柄对象
2、解决了Vue动态绑定渲染层!DOCTYPE标准的高度不能加载的问题
3、释放句柄对象、提升性能
4、依赖echarts所以项目文件不用在npm i echarts这个过程,
防止main.js导入过多依赖影响首次加载性能。
5、兼容TS版本
1. Solved the resize conflict problem and added the handle object

2. Solved Vue dynamic binding render layer! The height of the DOCTYPE Standard cannot be loaded

3. Release handle object and improve performance

4. The project file does not need to be in the NPM I echars process because it depends on echars,

Prevent the main.js from importing too many dependencies and affecting the first load performance.

5. Compatible TS version
version: 1.1.5+
1、新增了geoJSON自定义echarts图形绘制,可绘制任意图形
1. Added geojson custom ecarts graphics drawing, which can draw any graphics

image

alt text

Vue import use

// main.js 
import Vue from 'vue';
import PyzCharts from "pyz-charts";

Vue.use(PyzCharts)

Quick Start

<!-- a.template -->
<template>
  <pyz-charts @init="callbackEchartsInstance" :option="youEhartsOption"/>
</template>
  • 1、封装了所有的echarts事件,支持所有事件@click等
  • 2、@init事件回调(instance)实例,可以做深度检测,和扩展。
  • 3、option绑定v-bind是echarts的option配置文件,可以写成Option类的实例
  • 例如:

-1. Encapsulates all ecarts events and supports all events @ click, etc

-2. The @ init event callback (instance) instance can be used for deep detection and extension.

-3. Option binding v-bind is the option configuration file of ecarts, which can be written as an instance of the option class

-For example:

<!-- a.template -->
<template>
  <pyz-charts @click="clickMethod" 
  @mousemove="mousemoveMethod" 
  @mouseover="mouseoverMethod" 
  @keydown="keydownMethod" 
  @keyup="keyupMethod" 
  ...
  :option="youEhartsOption"/>
</template>
  • 绘制自定义各种图形的Echarts使用方法
  • How to use echorts to draw and customize various graphics
jsonMap: object //geoJSON产生的绘制数据对象
mapName: string //自定义绘制地图的名称与charts series map 名称一致默认PYZ
/*
**  A地图绘制的属性名称 与 B=>series 中的 data: {name: 123}, 
**  A是B的属性名称的父级,B中的name必须包含在A中范围
*/
<!-- a.template -->
<template>
  <pyz-charts
  mapJSON
  :json-map="jsonMap"
  map-name="map"
  ...
  :option="youEhartsOption"/>
</template>

Option建议写法

  'use strict'
  class CarOption {
      public option: any;
      constructor(props){
         this.option = {};
      }
  }
<script>
// a.vue
  export default {
      ...
     methods: {
         callbackEchartsInstance(ecInstance) {
            ?ecInstance.setOption(option)
            or
            ?ecInstance?....
         }
     }
  }
</script>

Browser Support

  • 支持Vue
  • ES6 module

Development

  • Vue Cli

作者

  • 彭一真

LICENSE

MIT