0.0.18 • Published 2 years ago

xyn-ui v0.0.18

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

写在前面

大家好，这里是小驯鹿LittleRangiferTarandus，就...这个是自己写的一个小小的组件库，请大家提个建议。

//该段为自动生成内容

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

开始

欢迎来到幸运鸟UI(Xyn-UI)组件库

//示例中的代码默认全局注册了组件

下载：

npm i xyn-ui

导入

import XynUI from 'xyn-ui'

按需导入：

import {XynButton} from 'xyn-ui'

样式

请全局导入CSS：

import 'xyn-ui/dist/style.css'
import 'xyn-ui/theme/theme.css'

按需导入transColor函数来切换主题：

import {transColor} from 'xyn-ui'

目前仅支持主题暖色调和冷色调，可传入"warm"或者"cold"进行设置

关于字体图标

本组件库字体图标依赖于remix icon开源图标库，请见：http://www.remixicon.cn/ 。 引入图标库：

import 'remixicon/fonts/remixicon.css'

提示组件

对话框dialog

参数：

namevaluedataTypedetaildefault
widthCSS属性string宽度15%
topCSS属性string距顶部距离default
title-/-string标题提示
visible-/-boolean是否显示false

事件： |name|parameter|detail| |-|-|-| |close|-/-|关闭事件|

举个例子

<template>
  <xyn-dialog v-model:visible="visible" ></xyn-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    let visible = ref(true)
    return{
      visible
    }
  },
})
</script>

输入组件

按钮Button

参数：

namevaluedataTypedetaildefault
shapedefault/round/circlestring按钮形状default
typeprimary/danger/info/success/warningstring类型default
plain-/-boolean是否为朴素按钮（空心按钮）false
disabled-/-boolean是否禁用false
icon-/-string图标类名""
sizemini/small/default尺寸middle

输入框input

namevaluedataTypedetaildefault
placeholder-/-string占位符""
typetext/passwordstring文本框类型""
disabled-/-boolean禁用false
clearable-/-boolean是否显示清空按钮false
show-password-/-boolean是否显示密码切换按钮false
name-/-stringneme属性""
modelValue-/-string值""
nameparameterdetail
blur-/-失去焦点事件
change现值cur内容改变事件
focus-/-获取的焦点事件

举个例子

<template>
  <xyn-input :showPassword="true" type="password" :clearable="true" v-model="input" ></xyn-input>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue' 

export default defineComponent({
  setup() {
    const input = ref("")
    return{
      input
    }
  },
})
</script>

切换按钮switch

namevaluedataTypedetaildefault
modelValue-/-boolean值false
activeColor颜色string选中颜色"",默认样式#409eff
inactiveColor颜色string非选中颜色"",默认样式#dcdfe6
name-/-stringneme属性""
nameparameterdetail
change前值pre,现值cur切换事件

举个例子

<template>
  <xyn-switch v-model="input"  ></xyn-switch>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue' 

export default defineComponent({
  setup() {
    const input = ref(true)
    return{
      input
    }
  },
})
</script>

单选按钮radio

radio |name|value|dataType|detail|default| |-|-|-|-|-| |modelValue|-/-|boolean|值|false| |label|-/-|string|选项标签,若插槽为空，则会显示label|""| |name|-/-|string|neme属性|""|

nameparameterdetail
change前值pre,现值cur切换事件

插槽 |name|detail| |-|-| |-/-|选项内容|

<template>
  <xyn-radio v-model="input"></xyn-radio>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue' 

export default defineComponent({
  setup() {
    const input = ref(true) 
    return{
      input
    }
  },
})
</script>

单选按钮组radioGroup

namevaluedataTypedetaildefault
modelValue子radio的labelstring值""
nameparameterdetail
change现值cur切换事件

插槽 |name|detail| |-|-| |-/-|子单选框|

举个例子

<template>
  <xyn-radio-group v-model="input">
    <xyn-radio label="1">喵呜</xyn-radio>
    <xyn-radio label="2">嗷呜</xyn-radio>
  </xyn-radio-group>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue' 

export default defineComponent({
  setup() {
    const input = ref("1") 
    return{
      input
    }
  },
})
</script>

多选按钮checkbox

namevaluedataTypedetaildefault
modelValue-/-boolean值false
label-/-string选项标签,若插槽为空，则会显示label""
name-/-stringneme属性""
nameparameterdetail
change前值pre,现值cur切换事件

插槽 |name|detail| |-|-| |-/-|选项内容|

多选按钮组checkboxGroup

namevaluedataTypedetaildefault
modelValue子checkbox的label数组string[]值[]
nameparameterdetail
change现值cur切换事件

插槽 |name|detail| |-|-| |-/-|子单选框|

举个例子

<template>
<xyn-checkboxyn-group v-model="hobby">
  <xyn-checkbox label="1">吃饭</xyn-checkbox>
  <xyn-checkbox label="2">睡觉</xyn-checkbox>
  <xyn-checkbox label="3"> 撸猫猫</xyn-checkbox>
</xyn-checkboxyn-group>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue' 

export default defineComponent({
  
  setup() {
    const hobby = reactive([])
    return{
      hobby
    }
  },
})
</script>

表单form

表单form

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |formData|-/-|Object|表单内容|{}| |labelStyle|CSS样式对象|Object|label样式|{}| |rules|-/-|Object|表单校验规则，详情见下面示例|{}| 插槽 |name|detail| |-|-| |-/-|子表单项|

表单项formItem

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |label|-/-|string|label文本|""| |ruleKey|-/-|string|根据该项在formData和rules中进行表单校验|""|

插槽 |name|detail| |-|-| |-/-|子表单控件|

举个例子：

<template>
  <xyn-form :formData="formData">
    <xyn-form-item label="username">
      <xyn-input  v-model="formData.username"></xyn-input>
    </xyn-form-item>
    <xyn-form-item label="hobby">
      <xyn-checkboxyn-group v-model="formData.hobby">
        <xyn-checkbox label="1">吃饭</xyn-checkbox>
        <xyn-checkbox label="2">睡觉</xyn-checkbox>
        <xyn-checkbox label="3"> 撸猫猫</xyn-checkbox>
      </xyn-checkboxyn-group>
    </xyn-form-item>
  </xyn-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue' 

export default defineComponent({
  setup() {
    const formData = reactive({
      username:"",
      hobby:[]
    })
    return{
      formData
    }
  },
})
</script>

加入表单校验，校验的时机会在blur：

<template>
  <xyn-form :formData="formData" :rules="rules">
    <xyn-form-item label="username" ruleKey="username">
      <xyn-input  v-model="formData.username"></xyn-input>
    </xyn-form-item>
    <xyn-form-item label="hobby" ruleKey="hobby">
      <xyn-checkboxyn-group v-model="formData.hobby">
        <xyn-checkbox label="1">吃饭</xyn-checkbox>
        <xyn-checkbox label="2">睡觉</xyn-checkbox>
        <xyn-checkbox label="3"> 撸猫猫</xyn-checkbox>
      </xyn-checkboxyn-group>
    </xyn-form-item>
  </xyn-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue' 

export default defineComponent({
  setup() {
    const formData = reactive({
      username:"",
      hobby:[]
    })
    const rules = {
      username:[{
        verify:(data:string)=>data.length,error:"不可为空" 
      },{
        verify:/^\w+$/,error:"非法用户名" 
      }],
      hobby:[{
        verify:(data:Array<string>)=>data.length,error:"不可为空"
      }]
    }
    return{
      formData,rules
    }
  },
})
</script>

markdown

本组件的markdown语法高亮使用了highlight.js，请在恰当的地方（例如vue项目根目录的main.js）引入语法高亮样式

import 'highlight.js/styles/googlecode.css' //举个例子

本组件库使用了marked进行markdown解析

markdown样式使用了github的样式，请在恰当的地方（例如vue项目根目录的main.js）引入

import 'github-markdown-css';

组件库中，编辑器mdEditor和预览器mdPreviewer可同时作为mdGroup的子组件使用，也可以单独使用

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const text = ref("```javascript\nvar a=1\n```")
    return{
      text
    }
  },
})
</script>

<template>
  <xyn-md-group v-model="text">
    <xyn-md-editor></xyn-md-editor>
    <xyn-md-previewer></xyn-md-previewer>
  </xyn-md-group>
</template>

mdGroup

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |modelValue|-/-|string|markdown文本|""|

插槽 |name|detail| |-|-| |-/-|子markdown组件|

mdEditor

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |modelValue|-/-|string|markdown文本|""|

当父（或祖先）组件mdGroup存在时，modelValue将被mdGroup的modelValue覆盖

mdPreviewer

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |mdValue|-/-|string|markdown文本|""|

同理，当父（或祖先）组件mdGroup存在时，mdValue将被mdGroup的modelValue覆盖

上传upload

举个栗子：

<script lang="ts">
import { defineComponent, ref  } from 'vue'
import axios from 'axios'
export default defineComponent({
  setup() {
    const func = (fileFormData:FormData)=>{
      disabled.value=true
      loading.value=true
      axios.post("http://xxxx",fileFormData,{
        headers:{
          'Content-Type':'mutipart/form-data'
        }
      }).then(res=>{
        loading.value=false
        disabled.value=false
      },err=>{
        loading.value=false
        disabled.value=false
      })
    }
    const disabled = ref(false)
    const loading=ref(false)
    return{
      func,disabled,loading
    }
  },
})
</script>

<template>
  <xyn-upload 
    :submit-function="func" 
    v-model:disabled="disabled"  v-model:pushLoading="loading"
    fileName="avatar" 
    :multiple="true"
  ></xyn-upload>
</template>

单个按钮的自动上传模式

<script lang="ts">
import { defineComponent, ref  } from 'vue'
import axios from 'axios'
export default defineComponent({
  setup() {
    const func = (fileFormData:FormData)=>{
      axios.post("http://xxxx",fileFormData,{
        headers:{
          'Content-Type':'mutipart/form-data'
        }
      }).then(res=>{
        loading.value=false
        disabled.value=false
      },err=>{
        loading.value=false
        disabled.value=false
      })
    }
    const disabled = ref(false)
    const loading=ref(false)
    return{
      func,disabled,loading
    }
  },
})
</script>

<template>
  <xyn-upload 
    :submit-function="func" 
    v-model:disabled="disabled"  
    v-model:pushLoading="loading"
    fileName="avatar" 
    :auto-upload="true"
  ></xyn-upload>
</template>

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |isDisabled|-/-|boolean|组件是否禁用|false| |pushIsLoading|-/-|boolean|上传组件是否加载中|false| |verifyFunction|-/-|Function,undefined|选择文件后进行校验，输入参数为File类型的数据|undefined| |submitFunction|-/-|Function,undefined|上传文件触发的函数，请在此定义上传行为，输入参数为FormData类型的数据，文件位于字段名为fileName字段|undefined| |fileName|-/-|string|上传的文件名，即submitFunction输入参数FormData，文件所在字段|""| |fileMIMEType|-/-|string|上传的文件的MIME类型，可不填，默认为空|""| |multiple|-/-|boolean|是否为多文件上传|false| |showFileList|-/-|boolean|是否显示文件列表|true| |autoUpload|-/-|boolean|是否自动上传，若为是则multiple项无效，并且只呈现一个选择文件的按钮|false|

展示组件

轮播图Carousel

举个栗子：

<script lang="ts">
import { defineComponent, reactive  } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([{url:'https://images.unsplash.com/photo-1572197491557-5b1a2c767c7b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000',id:1},
      {url:'https://images.unsplash.com/photo-1572197491557-5b1a2c767c7b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000',id:2}
      
    ])

    return{
      dataSource
    }
  },
})
</script>

<template>
  <xyn-carousel :sliders="dataSource">
  </xyn-carousel>
</template>

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |sliders|-/-|{url:string,id:string|number}[]|轮播图的图片|[]| |autoplay|-/-|boolean|是否开启自动播放|true| |playDelay|-/-|number|轮播延迟，单位：ms|2000| |arrowVisible|-/-|boolean|是否显示左右切换按钮|true| |indicatorVisible|-/-|boolean|是否显示底部切换按钮|true|

导航组件

菜单

举个栗子

<template>
 <xyn-menu 
  class="menu" 
  :defaultActivated="'1'" 
  :rowDirection="false" 
  :stretch="false"
  v-model="menuAct"
 >
  <xyn-menu-item label="1">HOME</xyn-menu-item>
  <xyn-menu-item label="2">INFO</xyn-menu-item>
  <xyn-menu-item-group label="3" :name="'SETTING'">
    <xyn-menu-item label="4">View</xyn-menu-item>
    <xyn-menu-item label="5">Data</xyn-menu-item>
  </xyn-menu-item-group>
  <xyn-menu-item label="6">OTHER</xyn-menu-item>
 </xyn-menu>
 
</template>
<script lang="ts">
import { defineComponent, ref} from 'vue'

export default defineComponent({
  setup(){
    const menuAct = ref("")
    return{
      menuAct
    }
  }
})
</script>

<style lang="less" scoped>
.menu{
  width: 200px;
}
</style>

Menu 属性 |name|value|dataType|detail|default| |-|-|-|-|-| |modelValue|-/-|string|当前被选中的MenuItem的label，用于双向绑定|""| |defaultActivated|-/-|string|默认选中的菜单项MenuItem的label|""| |rowDirection|-/-|boolean|是否横向排列|true| |stretch|-/-|boolean|MenuItem/MenuItemGroup是否延申以填充空白区域|false| |center|-/-|boolean|MenuItem/MenuItemGroup是否居中排列|false|

插槽 |name|detail| |-|-| |-/-|菜单子组件|

事件： |name|parameter|detail| |-|-|-| |change|前值pre，现值cur|菜单项点击事件|

MenuItem

建议仅作为Menu或MenuItemGroup的子组件

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |label|-/-|string|用于识别不同的菜单项|""| |name|-/-|string|菜单项MenuItem名称，插槽为空则显示|""|

插槽 |name|detail| |-|-| |-/-|菜单项MenuItem内容|

MenuItemGroup

建议仅作为Menu的子组件

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |name|-/-|string|菜单项组MenuItemGroup名称|""|

插槽 |name|detail| |-|-| |-/-|菜单项MenuItem|

数据组件

表格Table

举个例子

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([{name:"orangeCat",weight:"100kg",miao:"miao~~~"},{name:"bigOrangeCat",weight:"200kg",miao:"miao~~~wu"}])
    return{
      dataSource
    }
  },
})
</script>

<template>
  <xyn-table :data-source="dataSource">
    <xyn-table-column prop="name" label="name" ></xyn-table-column>
    <xyn-table-column prop="weight" label="weight"></xyn-table-column>
    <xyn-table-column prop="miao" label="sound">
      <template v-slot='sui_bian'>
        {{"叫声："+sui_bian.miao}}
      </template>
    </xyn-table-column>
  </xyn-table>
</template>

建议只在table中使用tableColumn组件

可展开的表格：

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([{name:"orangeCat",weight:"100kg",miao:"miao~~~"},{name:"bigOrangeCat",weight:"200kg",miao:"miao~~~wu"}])
    return{
      dataSource
    }
  },
})
</script>

<template>
  <xyn-table :data-source="dataSource">
    <xyn-table-column prop="name" label="name" ></xyn-table-column>
    <xyn-table-column prop="weight" label="weight"></xyn-table-column>
    <xyn-table-column type="expand">
      <template v-slot='sui_bian'>
        {{"叫声："+sui_bian.miao}}
      </template>
    </xyn-table-column>
  </xyn-table>
</template>

带有合计栏的表格

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([{name:"orangeCat",weight:5},{name:"bigOrangeCat",weight:10},{name:"bigOrangeCat",weight:15}])

    return{
      dataSource
    }
  },
})
</script>

<template>
  <xyn-table :data-source="dataSource" :summary="true" >
    <xyn-table-column prop="name" label="name"  ></xyn-table-column>
    <xyn-table-column prop="weight" label="weight" :sortable="true"></xyn-table-column>
  </xyn-table>
</template>

自定义合计函数

<script lang="ts">
import { defineComponent, reactive  } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([{name:"orangeCat",weight:5},{name:"bigOrangeCat",weight:10},{name:"bigOrangeCat",weight:15}])
    const summaryFunction = (prop:string,data:any[])=>{
      if(prop==="name"){
        return "总和"
      }
      if(prop==="weight"){
        return data.reduce(function(prev, curr){
            return prev + curr;
        });
      }
      
    }
    return{
      dataSource,summaryFunction
    }
  },
})
</script>

<template>
  <xyn-table :data-source="dataSource" :summary="true" :summaryFunction="summaryFunction">
    <xyn-table-column prop="name" label="name"  ></xyn-table-column>
    <xyn-table-column prop="weight" label="weight" :sortable="true"></xyn-table-column>
  </xyn-table>
</template>

添加行点击事件

<script lang="ts">
import { defineComponent, reactive  } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([{name:"orangeCat",weight:5},{name:"bigOrangeCat",weight:10},{name:"bigOrangeCat",weight:15}])
    const rowClick=(v:any,i:number)=>{
        console.log(v,i);
        
    }
    return{
      dataSource,rowClick
    }
  },
})
</script>

<template>
  <xyn-table :data-source="dataSource"  @rowClick="rowClick">
    <xyn-table-column prop="name" label="name"  ></xyn-table-column>
    <xyn-table-column prop="weight" label="weight" :sortable="true"></xyn-table-column>
  </xyn-table>
</template>

table

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |dataSource|-/-|array|表格的全部数据|[]| |border|-/-|boolean|表格是否有边框|false| |stripe|-/-|boolean|表格行是否为斑马纹|false| |selectType|""/radio/checkbox|string|表格是否可选，radio则是单选模式，checkbox则是多选模式|""| |selectBoxShow|-/-|boolean|表格是否显示展示框|false| |summary|-/-|boolean|表格是否显示合计栏|false| |summaryFunction|-/-|function,undefined|(prop:string,data:any[])=>any，参数：合计栏的列名和该列的数据，返回在合计栏展示的内容|undefined|

插槽 |name|detail| |-|-| |-/-|表格子组件|

事件： |name|parameter|detail| |-|-|-| |rowClick|该行dataSourcs的数组和行号|tableBody的点击行事件|

tableColumn

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |prop|-/-|string|该列对应的table组件中，dataSource中元素的字段|""| |label|-/-|string|该列的表题|""| |sortable|-/-|boolean|该列的是否可排序，数字类型则按数字大小排序，其他则按原生的sort方法默认的方式排序|false| |type|expand|string|expand：表示表格是否可扩张，插槽的内容作为扩张的内容，此时prop、label、sortable的属性会被忽略；|""|

插槽 |name|detail| |-|-| |-/-|作用域插槽，可以在v-slot="xxx"（xxx为任意值）中取到对应的行元素所有值，即dataSource数组元素。要注意的是，该插槽不是响应式的，可能在热更新中不能观察到变化，修改插槽的模板后请刷新页面|

虚拟列表VirtualList

虚拟列表通常用于长数据“按需加载”，仅仅渲染可视区域的数据，减少性能消耗.

举个栗子：

<script lang="ts">
import { defineComponent, reactive  } from 'vue'

export default defineComponent({
  setup() {
    const dataSource = reactive([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26])

    return{
      dataSource
    }
  },
})
</script>

<template>
  <xyn-virtual-list :estimateItemHeight="50" :resource="dataSource" :showHeight="500">
    <template v-slot="data" >
      <div :style='{height:data*10+"px"}'>
      {{data}}
      </div>
    </template>
  </xyn-virtual-list>
</template>

estimateItemHeight指的是虚拟列表每一项的默认高度，当渲染行元素的默认插槽存在时，渲染后，再读取行元素实际高度

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |getData|-/-|function,undefined|虚拟列表当前已有数据渲染到底部（滚动到底部）时，加载数据的回调函数|undefined| |estimateItemHeight|-/-|number|虚拟列表每一项的默认高度，单位px|50| |resource|-/-|array|虚拟列表的数据|[]| |showHeight|-/-|number|可视区域高度，单位px|400| |updateDelay|-/-|number|滚动列表后，更新所渲染数据的函数为节流函数，此项为节流延迟，单位ms|250| |isEnd|-/-|boolean|虚拟列表是否到末尾，isEnd和isLoading为排斥或关系，不满足则不渲染虚拟列表底部元素|false| |isLoading|-/-|boolean|虚拟列表是否正在加载，isEnd和isLoading为排斥或关系，不满足则不渲染虚拟列表底部元素|false|

插槽 |name|detail| |-|-| |-/-|作用域插槽，可以在v-slot="xxx"（xxx为任意值）中取到对应的行元素的值，即resource数组元素。要注意的是，该插槽不是响应式的，可能在热更新中不能观察到变化，修改插槽的模板后请刷新页面| |end|虚拟列表底部元素的作用域插槽，可以在v-slot:end="xxx"（xxx为任意值）中取到{isEnd,isLoading}对象。要注意的是，该插槽不是响应式的，可能在热更新中不能观察到变化，修改插槽的模板后请刷新页面|

统计图组件StatisticGraph

Beta测试内容

SstatisticGraph

beta-xyn-statistic-graph是统计图的parent组件，beta-xyn-chart-label（图例）、beta-xyn-bar-chart（条形图）等必须作为beta-xyn-statistic-graph的子组件而存在。

beta-xyn-statistic-graph实例对象的clear方法可用于清空图像，downloadGraph可以用于下载图像（png格式）

下载图像是基于html2canvas的

npm i html2canvas

ChartLegend

该组件用于绘制图例，默认的排列方式是同一个绘图组件的从左到右排列，不同的绘图组件（例如beta-xyn-statistic-graph插槽中存在两个beta-xyn-bar-chart）的图例进行分行

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |scale|-/-|number|图例尺寸缩放百分比|100| |column|-/-|boolean|图例是否纵向排列|false| |font|-/-|font|font={size?:number,family?:string}，字体大小和字型|{}| |plain|-/-|boolean|水平排列时，不同绘图组件的图例是否不分行|false|

ChartTitle

该组件用于绘制左、下边的标题

CategoryContinueBaseChart 分类-连续类型数据统计图的“基组件”，即为beta-xyn-category-continue-base-chart

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |dataX|-/-|any[]|x轴变量|[]| |dataY|-/-|any[]|y轴变量|[]| |optionSet|-/-|见下| |symbol|-/-|string|该图表的唯一标识，会自动生成|""|

optionSet属性

optionSet属性默认为空，被监听到变化后会合并到组件option的data中，下面的默认值都是指option，下同略过

attributetypedefaultdetail
classAxisAxisAxis.x类别轴，Axis：枚举类型，值为字符串"x"或"y"
drawAxisbooleantrue是否绘制坐标轴
outerAxisbooleanfalse坐标轴是否位于统计图左、下边
showAxisLabelboolean,booleantrue, true是否显示坐标轴刻度，分别为x轴、y轴，如果不绘制坐标轴，也不会绘制刻度
showLegendbooleantrue是否显示图例
unitstring""数值轴单位，如果不绘制坐标轴，也不会绘制单位
arrowAixsbooleantrue是否使用箭头线绘制坐标轴
labelFontfont{}, {}坐标轴刻度字体，分别为x轴、y轴，font={size?:number,family?:string}，字体大小和字型
valueRangenumber,number|undefinedundefined数值轴范围，不指定将根据输入数据计算
defaultColorrgbColor随机默认绘图颜色，rgbColor=[number,number,number]，RGB颜色

一个beta-xyn-statistic-graph下面可以含有多个beta-xyn-base-chart（含派生组件），行为表现为，在同一个画布上画出重叠的图

beta-xyn-base-chart实例对象（含派生组件）的update方法可用于数据变更后的异步更新，但是新的图像如果没有恰好覆盖原图像的现象（原图为空不会出现这种现象），会影响展示，如有需要请先用beta-xyn-statistic-graph实例对象的clear方法清空图像。

beta-xyn-bar-chart组件继承自beta-xyn-base-chart组件，如果需要个性化的统计图，笔给你，你可以自己画。默认导入beta-xyn-statistic-graph，drawTool属性可以获得一些画图工具。beta-xyn-base-chart源码见GitHub。具体说明施工中......。

BarChart

该组件为CategoryContinueBaseChart的派生组件，用于绘制条形图，举个例子

<template>
  <beta-xyn-statistic-graph class="graph">
    <beta-xyn-chart-legend></beta-xyn-chart-legend>
    <beta-xyn-bar-chart :dataX="[-10,324,-54]" :dataY="['a','b','c']"  ></beta-xyn-bar-chart>
  </beta-xyn-statistic-graph>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
})
</script>
<style lang="less" scoped>
.graph{
  width: 700px;
  height: 700px;
}
</style>

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |dataX|-/-|string[],string,number[],number|x轴变量，二维数组则为多组数据|[]| |dataY|-/-|string[],string,number[],number|y轴变量，二维数组则为多组数据|[]| |dataError|-/-|number[],number|误差线，二维数组则为多组数据|[]| |optionSet|见下|

（*）如果要绘制分组的数据，请开启分类绘制，此时，分类轴只可以为1维数组，数值轴和dataError数据只能是2维数组。请把相应的dataX/dataY设置为3维数组，例如dataY为[[1,2],[3,4],[5,6]]，其中，1,3,5为同一组数据，绘制时颜色为groupColor[0]，图例名称为groupLegend[0]。dataX、dataY、dataError在不开启分类绘制时，维度要一致

optionSet属性

继承自CategoryContinueBaseChart的option，继承的字段略去

attributetypedefaultdetail
drawTrendLinebooleanfalse是否绘制趋势线
groupColorrgbColor[][]当按组绘图时，每组颜色
groupLegendstring[][]当按组绘图时，每组图例
groupBoundbooleanfalse开启分组画图
drawErrorBarbooleanfalse绘制误差线
errorBarWidthnumber0误差线宽度
eachColorrgbColor[]|undefinedundefined每个柱的颜色，优于defaultColor，但在分组绘图时groupColor最为优先

ScatterBinChart

该组件为BarChart的派生组件，用于绘制散点箱型图

举个例子：

<template>
    <beta-xyn-statistic-graph class="graph" ref="graph" title="TITLE">
    <beta-xyn-chart-legend></beta-xyn-chart-legend>
    <beta-xyn-chart-title 
      titleX="XXX"
      titleY="YYY"
    ></beta-xyn-chart-title>
    <beta-xyn-scatter-bin-chart 
    :dataY="[
      [[35,22,-47,55],
      [-51,-53.4011397,-5,20],
      [38,55,37,10],
    ],
    
    [
      [-10.50243747,17,60.30036601,59],
      [41.51499867,7,30.75770385,34.01836427],
      [-41.26532478,-6,-38,98.56478512],
    ],
    
    [
      [127,-1,54.89233982,48.1717766],
      [-10.46341803,-43,8,50.03504831],
      [34.94366247,-24.5078009,16.83234926,117.2118747]
    ]]"

    :dataX="['A','B','C']"  

    :dataError="[
      [[7,8,10],[10,20,10]],
      [[7,8,10],[10,20,10]],
      [[7,8,10],[10,20,10]]
    ]"

    :optionSet="{
      outerAxis:true,
      drawAxis:true,
      showAxisLabel:[true,true],
      showLegend:true,
      offsetRate:0.3,
      errorBarWidth:15,
      unit:'单位',
      drawTrendLine:true,
      groupColor:[[224, 165, 130],[155, 201, 186],[129,37, 205]],
      groupLegend:['A','B','C'],
      groupBound:true
    }"
    ></beta-xyn-scatter-bin-chart>
  </beta-xyn-statistic-graph>
  <xyn-button @click.stop="download">下载</xyn-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(){
    const graph = ref()
    const download = ()=>{
      graph.value.downloadGraph()
      
    }
    return{
      graph,download
    }
  }
})
</script>

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |dataX|-/-|string[],string,number,number[]|x轴变量，三维数组则为多组数据（）|[]| |dataY|-/-|string[],string,number,number[]|y轴变量，三维数组则为多组数据（）|[]| |dataError|-/-|[number[],number[]],[number[],number[]][]|误差线（**） |optionSet|见下|

（*）如果要绘制分组的数据，请开启分类绘制，此时，分类轴只可以为1维数组，数值轴数据和dataError只能是3维数组。请把相应的dataX/dataY设置为3维数组，例如dataY为[[[1,2],[3,4]],[[5,6],[7,8]],[[9,10],[11,12]]]，其中，[1,2]、[5,6]、[9,10]为同一组数据，绘制时颜色为groupColor[0]，图例名称为groupLabel[0]。

（**）[number[],number[]]这两个数组都表示误差，用于绘制箱形图，例如第一个数组表示SEM，第二个数组表示SD。dataError如为[number[],number[]][]表示多组数据，此时dataError[0]对应dataY[0]的误差（不妨假设dataY表示值）。

optionSet属性

继承自BarChart的option，继承的字段略去

attributetypedefaultdetail
offsetRatenumber0散点偏离程度，越接近0越不偏离
dotRadiumnumber1散点半径

ContinueContinueBaseChart 连续-连续类型数据统计图的“基组件”，即为beta-xyn-continue-continue-base-chart

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |dataX|-/-|number[],number|x轴变量，二维数组则为多组数据（）|[]| |dataY|-/-|number[],number|y轴变量，二维数组则为多组数据（）|[]| |optionSet|见下|

optionSet属性

attributetypedefaultdetail
classAxisAxisAxis.x类别轴，Axis：枚举类型，值为字符串"x"或"y"
drawAxisbooleantrue是否绘制坐标轴
outerAxisbooleanfalse坐标轴是否位于统计图左、下边
showAxisLabelboolean,booleantrue, true是否显示坐标轴刻度，分别为x轴、y轴，如果不绘制坐标轴，也不会绘制刻度
showLegendbooleantrue是否显示图例
unitstring""数值轴单位，如果不绘制坐标轴，也不会绘制单位
arrowAixsbooleantrue是否使用箭头线绘制坐标轴
labelFontfont{}, {}坐标轴刻度字体，分别为x轴、y轴，font={size:number,family:string}，字体大小和字型
range[number,number,number,number]|undefinedundefined数值轴范围，分别为x轴、y轴，不指定将根据输入数据计算
colorrgbColor|rgbColor[]随机绘图颜色，若为rgbColor数组则为多组数据时每组颜色，rgbColor=[number,number,number]，RGB颜色
scalenumber,number|undefinedundefined坐标轴刻度大小，分别为x轴、y轴，不填则自动计算刻度
legendstring[]|string""图例，为字符串数组则为多组数据每组图例

ScatterChart 继承自ContinueContinueBaseChart，绘制散点图

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |optionSet|见下|

optionSet属性

继承自ContinueContinueBaseChart的option

attributetypedefaultdetail
dotRadiumnumber1散点半径
drawTrendLinebooleanfalse是否绘制趋势线

LineChart 继承自ScatterChart，绘制线型图

属性 |name|value|dataType|detail|default| |-|-|-|-|-| |dataError|-/-|number[],number|误差变量，二维数组则为多组数据|[]| |optionSet|见下|

optionSet属性

继承自LineChart的option

attributetypedefaultdetail
drawErrorRangebooleanfalse是否绘制误差范围（尚未实装）
@vue/babel-helper-vue-jsx-merge-props@vue/babel-preset-jsxaxiosgithub-markdown-cssgithub-syntax-lighthighlight.jshtml2canvaslessmarkednormalize.cssremixiconternvuexyn-ui
@infinitebrahmanuniverse/nolb-xy@everything-registry/sub-chunk-3193xyn-ui
0.0.10

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.9

2 years ago

0.0.16

2 years ago

0.0.8

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago