gsta_threes v0.0.2-1

GSTA_threes

说明

• 说明：基于echarts和vue3封装的某些常用图表
• vue版本支持：V3
• vue2版本请点击我

柱状图

该组件内置了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

• 作用：数据数组
• 类型：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

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

• 作用：数据数组
• 类型：Array
• 说明：一维数组
• 包含：每项值应包含{title: '', name: '', value: ''}

const datas = [
    {title: '标题', name: '类型A', value: 123},
    {title: '标题', name: '类型B', value: 103},
    {title: '标题', name: '类型C', value: 113},
];

custom

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

• 作用：数据数组
• 类型：Array
• 说明：二维数组，datas长度代表有多少条折线
• 包含：每项值应包含{title: '', name: '', value: ''}

// 数据数组示列
const datas = [
    [{title: '标题', name: '类型a', value: '值'}, ....],
    [{title: '标题B', name: '类型a', value: '值'}, ....]
];

custom

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

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

const dataArr = [[{}, {}, {}], [{}, {}, {}]];

custom

config

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