0.2.7 • Published 3 years ago

pg-board v0.2.7

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

Introduce

一个使用Vue3.0轻度封装的图表组件库，其中包含基础的布局组件和图表组件

Install

npm install pg-board -S

Quick Start

import { createApp } from 'vue';
import App from './App.vue';
import board from 'pg-board'

const app = createApp(App)
app.use(board)

单文件引用

<script src="vue.min.js"></script>
<script src="echarts.min.js"></script>
<script src="board.umd.js"></script>

<script>
const app = createApp(App)
app.use(board)
</script>

Doc

PgLayout 看板布局

参数说明类型可选值默认值
gutter布局中每个小看板水平之间的间隔number0
yGutter布局中每个小看板垂直之间的间隔number0
theme看板主题number1/2/30（代表无）

PgBoard 小看板

参数说明类型可选值默认值
span水平方向占比number0=<x<=2424
ySpan垂直方向占比number0=<x<=2424
offset水平方向偏移number0=<x<=240
yOffset垂直方向偏移number0=<x<=240
Example：
<pg-layout:gutter="20" :y-gutter="20">
    <pg-board :span="8" :y-span="8"></pg-board>
    <pg-board :span="8" :y-span="8" :y-offset="8"></pg-board>
    <pg-board :span="8" :y-span="8" :y-offset="16"></pg-board>
    <pg-board :span="8" :y-span="8" :offset="8"></pg-board>
    <pg-board :span="8" :y-span="8" :offset="16"></pg-board>
</pg-layout>

PgRow 行布局

参数说明类型可选值默认值
span垂直方向行占比number一24
type布局模式，可选 flex，现代浏览器下有效stringflexflex
justifyflex 布局下的水平排列方式stringflex-end|center|space-around|space-between—
alignflex 布局下的垂直排列方式stringcenter|end一

PgCol 列布局

参数说明类型可选值默认值
span列水平方向占比number一24
yspan列垂直方向占比number一24
offset列水平方向便宜number一0
yoffset列垂直方向便宜number一0
Example：
<PgRow :span="24">
  <PgCol :span="12" :yspan="24"></PgCol>
  <PgCol :span="6" :offset="6"></PgCol>
</PgRow>

PgContainer 容器

参数说明类型可选值默认值
direction子元素的排列方向stringhorizontal|vertical子元素中有pg-header或pg-footer时为vertical，否则为horizontal

PgHeader 容器头部

参数说明类型可选值默认值
height头部高度string60px

PgMain 容器主体

参数说明类型可选值默认值
一一一一一

PgFooter 容器脚部

参数说明类型可选值默认值
height头部高度string60px
Example:
<PgContainer>
  <PgHeader>
    <h2>Header</h2>
  </PgHeader>
  <PgMain>
  	<h2>Main</h2>
  </PgMain>
  <PgFooter>
  	<h2>Footer</h2>
  </PgFooter>
</PgContainer>

PgBox 图表容器

参数说明类型可选值默认值
title标题内容string空
hasTitle是否有标题booleantrue|falsetrue

PgBox Slot 图表容器插槽

name说明
title容器标题插槽
Example:
<PgBox style="height: 100%;background-color: #666" title="折线图">
  <template v-slot:title>
    <h2>通过插槽自定义标题样式</h2>
  </template>
  <PgChart cid="chart" type="line" :option="lineOption"></PgChart>
</PgBox>

PgTable 表格组件

参数说明类型可选值默认值
head表头配置array空
data表格内容array空
headKey表头配置索引值stringkey
headName表头配置名称索引值stringname
rowHeight表格行高string40px
rowKey行的key值，用于优化表格渲染，应为每行数据唯一标识string空
<pg-table :head="head" :data="data" row-key="id"></pg-table>

<script>
	const head = [{
        key: 'name',
        name: '名称 '
    },{
        key: 'id',
        name: '标识'
    }]
    
    const data = [
        {
            id: 1,
            name: '张三'
        }
    ]
</script>

PgChart 图表组件

参数说明类型可选值默认值
cid图表id，必须唯一string一一
type图表类型stringline|bar|pie|gauge|smallGauge|scatter|candlestick|radar|tree|sunburst|parallel|sankey|funnel一
option图表配置,每个图表均有默认样式，如无需改变样式则传入图表内容即可，否则可传入图表样式配置。object类似如下配置:{}一

注：各图表的配置与echart配置相同，如果想定制特别的样式，可以根据echart官方文档的配置进行配置，传入配置会复写原有样式配置，下面列出比较常用的配置，如有复杂定制请参考echart官方文档。

let basicOption = {
  legend: {				//直角坐标系中的图例
    show: true,    //显示隐藏
    data: ['周一', '周二']     //图例内容
  },
  xAxis: { 				//直角坐标系中的 x 轴相关配置
    show: true,    //显示隐藏x轴
    type: 'category', //x轴数据类型 value|category|time|log 默认category
    data: ['周一', '周二'], //x轴数据内容
  },
  yAxis: { 				//直角坐标系中的 y 轴相关配置
    show: true, 
    type: 'value', //y轴数据类型 value|category|time|log 默认value
  },
  series: [				//坐标系主体内容配置
    {
      data: [1, 2, 3, 4, 5, 6] //坐标系数据内容数组，每种图表的数据内容格式不太相同，可参考下方各个图表的示例
    }
  ]
}

//更多配置参考 https://echarts.apache.org/zh/api.html#echarts
Example:

line 折线图:

npm.io

<template>
	<PgChart type="line" cid="line" :option="lineOption"></PgChart>
</template>

<script setup>
	let lineOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
      }
    ]
  }
</>

bar 柱状图：

npm.io

<template>
	<PgChart type="bar" cid="bar" :option="barOption"></PgChart>
</template>

<script setup>
	let barOption = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
      }
    ]
  }
</script>

pie 饼图:

npm.io

<template>
	<PgChart type="pie" cid="pie" :option="pieOption"></PgChart>
</template>

<script setup>
	let pieOption = {
    series: [
      {
        data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
        ],
      }
    ]
  }
</script>

gauge 仪表盘:

npm.io

<template>
	<PgChart type="gauge" cid="gauge" :option="gaugeOption"></PgChart>
</template>

<script setup>
	let gaugeOption = {
    series: [
      {
        data: [
            {
                value: 0.2,
                name: 'SCORE'
            }
        ],
      }
    ]
  }
</script>

smallGauge 小仪表盘:

npm.io

<template>
	<PgChart type="gauge" cid="gauge" :option="gaugeOption"></PgChart>
</template>

<script setup>
	let gaugeOption = {
    series: [
      {
        data: [
            {
                value: 0.2,
                name: 'SCORE'
            }
        ],
      }
    ]
  }
</script>

scatter 散点图:

npm.io

<template>
	<PgChart type="scatter" cid="scatter" :option="scatterOption"></PgChart>
</template>

<script setup>
	let scatterOption = {
    xAxis: {},
  	yAxis: {},
    series: [
      {
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ],
      }
    ]
  }
</script>

candlestick K线图:

npm.io

<template>
	<PgChart type="candlestick" cid="candlestick" :option="candlestickOption"></PgChart>
</template>

<script setup>
	let candlestickOption = {
    xAxis: {
      data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
    },
    yAxis: {},
    series: [
      {
        data: [
          [20, 34, 10, 38],
          [40, 35, 30, 50],
          [31, 38, 33, 44],
          [38, 15, 5, 42],
        ],
      },
    ],
  }
</script>

radar 雷达图:

npm.io

<template>
	<PgChart type="radar" cid="radar" :option="radarOption"></PgChart>
</template>

<script setup>
	let radarOption = {
     title: {
      text: '雷达图'
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 }
      ]
    },
    series: [
      {
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending'
          }
        ]
      }
    ]
  }
</script>

sunburst 旭日图:

npm.io

<template>
	<PgChart type="sunburst" cid="sunburst" :option="sunburstOption"></PgChart>
</template>

<script setup>
	let sunburstOption = {
    series: [
      {
        data: [
          {
            name: "Grandpa",
            children: [
              {
                name: "Uncle Leo",
                value: 15,
                children: [
                  {
                    name: "Cousin Jack",
                    value: 2,
                  },
                  {
                    name: "Cousin Mary",
                    value: 5,
                    children: [
                      {
                        name: "Jackson",
                        value: 2,
                      },
                    ],
                  },
                  {
                    name: "Cousin Ben",
                    value: 4,
                  },
                ],
              },
              {
                name: "Father",
                value: 10,
                children: [
                  {
                    name: "Me",
                    value: 5,
                  },
                  {
                    name: "Brother Peter",
                    value: 1,
                  },
                ],
              },
            ],
          },
          {
            name: "Nancy",
            children: [
              {
                name: "Uncle Nike",
                children: [
                  {
                    name: "Cousin Betty",
                    value: 1,
                  },
                  {
                    name: "Cousin Jenny",
                    value: 2,
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  }
</script>

parallel 平行坐标系:

npm.io

<template>
	<PgChart type="parallel" cid="parallel" :option="parallelOption"></PgChart>
</template>

<script setup>
	let parallelOption = {
    parallelAxis: [
      { dim: 0, name: 'Price' },
      { dim: 1, name: 'Net Weight' },
      { dim: 2, name: 'Amount' },
      {
        dim: 3,
        name: 'Score',
        type: 'category',
        data: ['Excellent', 'Good', 'OK', 'Bad']
      }
    ],
    series: [
      {
        data: [
          [12.99, 100, 82, 'Good'],
          [9.99, 80, 77, 'OK'],
          [20, 120, 60, 'Excellent']
        ]
      }
    }]
  }
</script>

sankey 桑基图:

npm.io

<template>
	<PgChart type="sankey" cid="sankey" :option="sankeyOption"></PgChart>
</template>

<script setup>
	let sankeyOption = {
    series: [
      {
        data: [
          {
            name: 'a'
          },
          {
            name: 'b'
          },
          {
            name: 'a1'
          },
          {
            name: 'a2'
          },
          {
            name: 'b1'
          },
          {
            name: 'c'
          }
        ],
        links: [
          {
            source: 'a',
            target: 'a1',
            value: 5
          },
          {
            source: 'a',
            target: 'a2',
            value: 3
          },
          {
            source: 'b',
            target: 'b1',
            value: 8
          },
          {
            source: 'a',
            target: 'b1',
            value: 3
          },
          {
            source: 'b1',
            target: 'a1',
            value: 1
          },
          {
            source: 'b1',
            target: 'c',
            value: 2
          }
        ]
      }
    ]
  }
</script>

funnel 漏斗图:

npm.io

<template>
	<PgChart type="funnel" cid="funnel" :option="funnelOption"></PgChart>
</template>

<script setup>
	let funnelOption = {
    legend: {
      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
    },
    series: [
      {
        data: [
          { value: 60, name: 'Visit' },
          { value: 40, name: 'Inquiry' },
          { value: 20, name: 'Order' },
          { value: 80, name: 'Click' },
          { value: 100, name: 'Show' }
        ]
      }
    ]
  }
</script>
c-scrollbarcore-jslodashvue
@everything-registry/sub-chunk-2429@infinitebrahmanuniverse/nolb-pg
0.2.1

3 years ago

0.2.0

3 years ago

0.2.7

3 years ago

0.1.8

3 years ago

0.2.6

3 years ago

0.1.7

3 years ago

0.1.9

3 years ago

0.2.3

3 years ago

0.1.4

3 years ago

0.2.2

3 years ago

0.1.3

3 years ago

0.2.5

3 years ago

0.1.6

3 years ago

0.2.4

3 years ago

0.1.5

3 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago