Vue.js 2.6

Pyz-Charts

• pyz-charts will stay with Vue 2.x

Install

1npm install pyz-charts

1<version: 1.2.3+>
2新增 Npm Shell 强大命令处理
3自动创建ChartsOption的 Cli 工具链.
4自动创建VueComponents组件，自动封装props,watch等等.
5无需一行代码即可创建漂亮的VueCharts.
6帮助您急速开发项目.
7模板集合并不完善，暂时更新了一部分!
8觉得不错点个github Stat
9谢谢你们的支持！我们让代码愈来愈额简单！ 
10使用如下：

1{
2  "scripts": {
3    "serve": "vue-cli-service serve",
4    "build": "vue-cli-service build",
5    "lint": "vue-cli-service lint",
6    "pco": "pyz-charts"
7  }
8}

1在"script"中添加"pco",这个可以任意写，值必须是"pyz-charts"
2执行：npm run pco

1npm run pco

1version: 1.1.1+
21、解决了resize冲突问题，加入句柄对象
32、解决了Vue动态绑定渲染层!DOCTYPE标准的高度不能加载的问题
43、释放句柄对象、提升性能
54、依赖echarts所以项目文件不用在npm i echarts这个过程，
6防止main.js导入过多依赖影响首次加载性能。
75、兼容TS版本
81. Solved the resize conflict problem and added the handle object
9
102. Solved Vue dynamic binding render layer! The height of the DOCTYPE Standard cannot be loaded
11
123. Release handle object and improve performance
13
144. The project file does not need to be in the NPM I echars process because it depends on echars,
15
16Prevent the main.js from importing too many dependencies and affecting the first load performance.
17
185. Compatible TS version
19version: 1.1.5+
201、新增了geoJSON自定义echarts图形绘制,可绘制任意图形
211. Added geojson custom ecarts graphics drawing, which can draw any graphics

Vue import use

1// main.js 
2import Vue from 'vue';
3import PyzCharts from "pyz-charts";
4
5Vue.use(PyzCharts)

Quick Start

1<!-- a.template -->
2<template>
3  <pyz-charts @init="callbackEchartsInstance" :option="youEhartsOption"/>
4</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:

1<!-- a.template -->
2<template>
3  <pyz-charts @click="clickMethod" 
4  @mousemove="mousemoveMethod" 
5  @mouseover="mouseoverMethod" 
6  @keydown="keydownMethod" 
7  @keyup="keyupMethod" 
8  ...
9  :option="youEhartsOption"/>
10</template>
11

• 绘制自定义各种图形的Echarts使用方法
• How to use echorts to draw and customize various graphics

1jsonMap: object //geoJSON产生的绘制数据对象
2mapName: string //自定义绘制地图的名称与charts series map 名称一致默认PYZ
3/*
4**  A地图绘制的属性名称 与 B=>series 中的 data: {name: 123}, 
5**  A是B的属性名称的父级，B中的name必须包含在A中范围
6*/

1<!-- a.template -->
2<template>
3  <pyz-charts
4  mapJSON
5  :json-map="jsonMap"
6  map-name="map"
7  ...
8  :option="youEhartsOption"/>
9</template>
10

Option建议写法

1  'use strict'
2  class CarOption {
3      public option: any;
4      constructor(props){
5         this.option = {};
6      }
7  }

1<script>
2// a.vue
3  export default {
4      ...
5     methods: {
6         callbackEchartsInstance(ecInstance) {
7            ?ecInstance.setOption(option)
8            or
9            ?ecInstance?....
10         }
11     }
12  }
13</script>

Browser Support

• 支持Vue
• ES6 module

Development

• Vue Cli

作者

• 彭一真

LICENSE

MIT