❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

gsta_threes

0.0.2-1 • Public • Published

GSTA_threes

说明

柱状图

该组件内置了6种常见图形便于快速切换效果

  • default 最基本的柱状图默认值
  • x 基于第一种效果的条形图
  • cell 电池图
  • xcell 条形电池图
  • stack 堆叠柱状图
  • xstack 条形堆叠柱状图

更新说明

  1. 在自定义合并配置上进行优化，在参数合并上得到了更好的支持
  2. 在动画效果上优化了部分错误
  3. 新增了大屏支持，当屏幕宽度大于1920时，图形画布大小可以按照设定的比列进行缩放

大屏支持

  • 比列换算：需暴露一个$d方法，并返回一个Number类型用于大小比列换算
  • 说明：比列换算中默认单位“px”，若你需要更换一个默认单位，请在全局中暴露一个$units
// 示列：定义一个比列换算方法，暴露$d()
app.config.globalProperties.$d = (参数) => 比列换算;
app.config.globalProperties.$d = (number) => (window.innerWidth * number) / 2840;
// 示列：定义一个默认单位
app.config.globalProperties.$units = 'rem'

基本信息

  • 全称：ColumnarGraph
  • 小写：columnar-graph

代码示列

<template>
    <columnar-graph
        :datas="source"
        :custom="custom"
        :config="config"
    ></columnar-graph>
</template>

<script setup>
import {reactive, toRefs} from 'vue';
const data = reactive({
    source: [
        [
            {
                title: '新能源',
                name: 'SUV',
                value: 150
            },
            {
                title: '新能源',
                name: '轿车',
                value: 135
            },
            {
                title: '新能源',
                name: '巴士',
                value: 59
            },
        ],
        [
            {
                title: '燃油车',
                name: 'SUV',
                value: 198
            },
            {
                title: '燃油车',
                name: '轿车',
                value: 208
            },
            {
                title: '燃油车',
                name: '巴士',
                value: 32
            },
        ]
    ],
    custom: {},
    config: {}
})

const { source, custom, config } = toRefs(data);
</script>

API

参数 说明 类型 默认值 必传
datas 数据数组 any[] 无 是
custom 快速配置 object 无 否
config 自定义配置 object 无 否

datas

  • 作用：数据数组
  • 类型：Array
  • 说明：注意的是datas分为二维数组和一维数组，当custom.type等于cell或xcell时为一维数组，其余均为二维数组
  • 包含：每项值应包含{title: '', name: '', value: ''}
// 二维数组和一维数组
// custom.type = 'cell' || custom.type = 'xcell'
const datas = [{}, {}, {}];
// custom.type != 'cell' || custom.type != 'xcell'
const dataArr = [[{}, {}, {}], [{}, {}, {}]];

custom

参数 说明 类型 默认值
wrap x轴文字换行 number 无
width 画布宽度，string时需携带单位，默认单位px number | string 800px
height 画布高度，string时需携带单位，默认单位px number | string 600px
print 在控制台打印配置项，便于调试 boolean false
filling 区域填充色，数组项值为false，颜色为透明
支持rgb,rgba, 颜色单词，十六进制		 []<string | boolean> 无
opacity 填充色透明度，0 - 1，启用渐变时无效 string | number 0.5
scroll 左右或上下拖动柱体 boolean false
gradient 渐变色，将随机生成的填充色改为渐变色，启用此效果，opacity无效 boolean false
type 图形效果 default | x | cell | xcell | stack | xstack default
fontColor x, y轴文字颜色 string #333
fontSize x, y轴文字大小, 字符串时需携带单位如15rem string | number 15px
animation 动画效果, 布尔值和数组，true时启用全部动画，数组指定启用的动画 true | highlight高亮 | select切换数据 | legend图列 | tooltip标题 无
animationTime 动画切换间隔时间 number 1500

config

  • 用途：自定义配置项
  • 权重：config > custom > 默认配置
  • 说明：修改已生成的任意配置，可以传递官方的任意属性配置
  • 在修改series时需特别注意,目前提过两种方式一种对象型，一种数组型
对象型
// 在修改serie时，传递的是对象，将会对serie数组内所有配置都进行修改
const options = {
	serie = [{name: 'x', ....}, {name: 'b', ....}]
}

// 定义配置
const config = {
	serie: {
		name: 'd',
		itemStyle: {color: 'red'}
	}
}

// 最后结果
[{name: 'd', itemStyle: {color: 'red'}},{name: 'd', itemStyle: {color: 'red'}}, ...]
数组型
// 根据数组下标对配置进行修改
const options = {
	serie = [{name: 'x', ....}, {name: 'b', ....}]
}

// 定义配置
const config = {
	serie: [{}, {itemStyle: {color: 'red'}}]
}

// 最后结果
[{name: 'x', ....},{name: 'b', itemStyle: {color: 'red'}}, ....]
代码示列：在柱状图上新增折线
<template>
    <columnar-graph
        :datas="source"
        :custom="custom"
        :config="config"
    ></columnar-graph>
</template>

<script>
	export default {
        data() {
            return {
                source: [new Array(6).fill().map((r, index) => ({
                        	title: "燃油车",
                        	name: `类型${index}`,
                        	value: parseInt(Math.random() * 100),
                      	})), new Array(6).fill().map((r, index) => ({
                        	title: "新能源",
                        	name: `类型${index}`,
                        	value: parseInt(Math.random() * 100),
                      }))],
                custom: {},
                config: {
                    series: [{}, {}, {
                        type: 'line',
                        name: '节点对比',
                        data: new Array(6).fill().map(() => parseInt(Math.random() * 100))
                    }]
                }
            }
        }
    }
</script>

饼图

该组件内置了五种常见图形便于快速切换效果

  • ring 环形图默认值
  • basis基础饼图
  • gapRing 圆角环形
  • basisRing 基础圆角
  • rose 玫瑰图

基本信息

  • 全称：PieGraph
  • 小写：pie-graph

代码示列

<template>
    <pie-graph
        :datas="source"
        :custom="custom"
        :config="config"
     ></pie-graph>
</template>

<script setup>
import {reactive, toRefs} from 'vue';
const data = reactive({
    source:[
        {
            title: '新能源',
            name: 'SUV',
            value: 150
        },
        {
            title: '新能源',
            name: '轿车',
            value: 135
        },
        {
            title: '新能源',
            name: '巴士',
            value: 59
        }
    ],
    custom: {},
    config: {}
})

const { source, custom, config } = toRefs(data);
</script>

API

参数 说明 类型 默认值 必传
datas 数据数组 any[] 无 是
custom 快速配置 object 无 否
config 自定义配置 object 无 否

datas

  • 作用：数据数组
  • 类型：Array
  • 说明：一维数组
  • 包含：每项值应包含{title: '', name: '', value: ''}
const datas = [
    {title: '标题', name: '类型A', value: 123},
    {title: '标题', name: '类型B', value: 103},
    {title: '标题', name: '类型C', value: 113},
];

custom

参数 说明 类型 默认值
width 画布宽度，string时需携带单位，默认单位px number | string 800px
height 画布高度，string时需携带单位，默认单位px number | string 600px
print 在控制台打印配置项，便于调试 boolean false
filling 区域填充色，数组项值为false，颜色为透明，支持rgb,rgba, 颜色单词，十六进制 []<string | boolean> 无
opacity 填充色透明度，0 - 1，启用渐变时无效 string | number 0.5
gradient 渐变色，将随机生成的填充色改为渐变色，启用此效果，opacity无效 boolean false
type 图形效果 ring | basis | gapRing | basisRing | rose ring
fontColor 文字颜色 string #333
title 标题，布尔值代表显示与隐藏，字符串表示标题文字 string | boolean 统计
center 饼图位置 string[] ['35%', '50%']
radius 饼图大小 string[] | string ['40%', '65%']
fontSize 文字大小, 字符串时需携带单位如15rem string | number 15px
animation 动画效果, 布尔值和数组，true时启用全部动画，数组指定启用的动画 true | highlight高亮 | select切换数据 | legend图列 | tooltip标题 无
animationTime 动画切换间隔时间 number 1500

config

  • 自定义配置
  • 说明：修改已生成的任意配置
  • 权重：config > custom > 默认配置
  • 修改方法参考柱状图config使用

折线图

基本信息

  • 全称：LineGraph
  • 小写：line-graph

代码示列

<template>
    <line-graph
        :datas="source"
        :custom="custom"
        :config="config"
    ></line-graph>
</template>

<script setup>
import {reactive, toRefs} from 'vue';
const data = reactive({
    source:[
        [
            {
                title: '新能源',
                name: 'SUV',
                value: 150
            },
            {
                title: '新能源',
                name: '轿车',
                value: 135
            },
            {
                title: '新能源',
                name: '巴士',
                value: 59
            },
        ],
        [
            {
                title: '燃油车',
                name: 'SUV',
                value: 198
            },
            {
                title: '燃油车',
                name: '轿车',
                value: 208
            },
            {
                title: '燃油车',
                name: '巴士',
                value: 32
            },
        ]
    ],
    custom: {},
    config: {}
})

const { source, custom, config } = toRefs(data);
</script>

API

参数 说明 类型 默认值 必传
datas 数据数组 any[] 无 是
custom 快速配置 object 无 否
config 自定义配置 object 无 否

datas

  • 作用：数据数组
  • 类型：Array
  • 说明：二维数组，datas长度代表有多少条折线
  • 包含：每项值应包含{title: '', name: '', value: ''}
// 数据数组示列
const datas = [
    [{title: '标题', name: '类型a', value: '值'}, ....],
    [{title: '标题B', name: '类型a', value: '值'}, ....]
];

custom

参数 说明 类型 默认值
wrap x轴文字换行 number 无
width 画布宽度，string时需携带单位，默认单位px number | string 800px
height 画布高度，string时需携带单位，默认单位px number | string 600px
print 在控制台打印配置项，便于调试 boolean false
filling 区域填充色，数组项值为false，颜色为透明支持rgb,rgba, 颜色单词，十六进制 []<string | boolean> 随机生成
lineFilling 线条颜色，数组项值为false，颜色为透明，支持rgb,rgba, 颜色单词，十六进制 []<string | boolean> 随机生成
opacity 填充色透明度，0 - 1，启用渐变时无效 string | number 0.5
scroll 左右或上下拖动柱体 boolean false
gradient 渐变色，将随机生成的填充色改为渐变色，启用此效果，opacity无效 boolean false
smooth 决定折线是平滑的曲线还是直线 boolean default
fontColor x, y轴文字颜色 string #333
fontSize x, y轴文字大小, 字符串时需携带单位如15rem string | number 15px
animation 动画效果, 布尔值和数组，true时启用全部动画，数组指定启用的动画 true | highlight高亮 | select切换数据 | legend图列 | tooltip标题 无
animationTime 动画切换间隔时间 number 1500

config

  • 用途：自定义配置项
  • 权重：config > custom > 默认配置
  • 说明：修改已生成的任意配置，可以传递官方的任意属性配置
  • 备注：在修改serie时配置请参考柱状图的config配置

雷达图

基本信息

  • 全称：RandarGraph
  • 小写：randar-graph

代码示列

<template>
    <randar-graph
        :datas="source"
        :custom="custom"
        :config="config"
    ></randar-graph>
</template>

<script setup>
import {reactive, toRefs} from 'vue';
const data = reactive({
    source:[
        [
            {
                title: '新能源',
                name: 'SUV',
                value: 150
            },
            {
                title: '新能源',
                name: '轿车',
                value: 135
            },
            {
                title: '新能源',
                name: '巴士',
                value: 59
            },
        ],
        [
            {
                title: '燃油车',
                name: 'SUV',
                value: 198
            },
            {
                title: '燃油车',
                name: '轿车',
                value: 208
            },
            {
                title: '燃油车',
                name: '巴士',
                value: 32
            },
        ]
    ],
    custom: {},
    config: {}
})

const { source, custom, config } = toRefs(data);
</script>

API

参数 说明 类型 默认值 必传
datas 数据数组 any[] 无 是
custom 快速配置 object 无 否
config 自定义配置 object 无 否

datas

  • 作用：数据数组
  • 类型：Array
  • 说明：数据数组为二维数组
  • 包含：每项值应包含{title: '', name: '', value: ''}
const dataArr = [[{}, {}, {}], [{}, {}, {}]];

custom

参数 说明 类型 默认值
width 画布宽度，string时需携带单位，默认单位px number | string 800px
height 画布高度，string时需携带单位，默认单位px number | string 600px
print 在控制台打印配置项，便于调试 boolean false
filling 区域填充色，数组项值为false颜色为透明，支持rgb,rgba, 颜色单词，十六进制 []<string | boolean> 无
lineFilling 边框颜色，数组项值为false颜色为透明，支持rgb,rgba, 颜色单词，十六进制 []<string |boolean> 无
opacity 填充色透明度，0 - 1，启用渐变时无效 string | number 0.5
center 图形位置 []<string | number> 无
radius 图形大小 string | number | []<string | number> 无
gradient 渐变色，将随机生成的填充色改为渐变色，启用此效果，opacity无效 boolean false
shape 星盘类型 polygon 多边形 | circle 圆形 polygon
symbol 拐点类型 rect, roundRect, triangle, diamond, pin, arrow, none，circle circle
fontColor x, y轴文字颜色 string #333
fontSize x, y轴文字大小, 字符串时需携带单位如15rem string | number 15px
animation 动画效果, 布尔值和数组，true时启用全部动画，数组指定启用的动画 true | highlight高亮 | select切换数据 | legend图列 | tooltip标题 无
animationTime 动画切换间隔时间 number 1500

config

  • 用途：自定义配置项
  • 权重：config > custom > 默认配置
  • 说明：修改已生成的任意配置，参考柱状图config
  • 备注：雷达图使用自定义修改需谨慎，在自定义配置上尚有未修正的bug

Readme

Keywords

Package Sidebar

Install

npm i gsta_threes

Weekly Downloads

0

Version

0.0.2-1

License

ISC

Unpacked Size

1.09 MB

Total Files

3

Last publish

Collaborators

  • huohudie
Try on RunKit
Report malware