v3-echarts v1.3.7

V3 Echarts

官方文档

https://v3.noxussj.top/

介绍

开箱即用的图表组件库

无需关心图表实现，只需专注于数据和业务

特性

• 使用简单：直接引入组件，传入数据即可渲染图表，无需关心图表实现。

• 无门槛：即使不懂 Echarts 也可以做出来炫酷的图表

• 丰富图表：满足大部分图表需求，后续会持续更新

• 开源透明：源代码公开，如有需要可拷贝源代码到项目中进行二次开发

快速上手

安装

建议 Node.js 版本 18 或以上。

npm install v3-echarts

yarn add v3-echarts

使用

<template>
    <echarts-barx height="300px" :data="data" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { EchartsBarx } from 'v3-echarts';

const data = ref({
    axis: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    series: [
        {
            name: '销量',
            data: [5, 20, 36, 10, 10, 20],
        },
    ],
});
</script>

🎉🎉🎉 到此，恭喜你，你的第一个图表已经完成啦！

所有组件

• echarts-barx

• echarts-barx-multiple

• echarts-barx-stack

• echarts-barx-radius

• echarts-barx-color

• echarts-barx-gradient

• echarts-barx-background

• echarts-bary

• echarts-bary-multiple

• echarts-bary-stack

• echarts-bary-radius

• echarts-bary-color

• echarts-bary-gradient

• echarts-bary-background

• echarts-bary-label

• echarts-line-multiple

• echarts-line-smooth

• echarts-line-gradient

• echarts-pictorial

• echarts-pictorial-gradient

• echarts-pictorial-battery

• echarts-pictorial-spirit

• echarts-pie

• echarts-pie-annular

• echarts-pie-legend

props

当我们渲染了一个图表之后，并不是所有的图表都能够满足我们的需求，有时候我们需要对图表进行一些优化，比如修改图表的颜色、修改图表的大小等等。

echarts-barx

echarts-bary

echarts-line

echarts-pie

echarts-pictorial

全局配置文件

配置文件 echarts.config.ts 中的属性名称都是固定好的，不可随意修改。只需要修改属性值即可。

引入配置文件

首先在项目根目录中创建 echarts.config.ts 文件，然后在 main.ts 中引入该文件即可。

:::code-group

import '../echarts.config.ts';

创建配置文件

请手动复制配置文件内容到 echarts.config.ts 中。

import { loadStyle } from 'v3-echarts';

const $color = {
    /**
     * 主题色-深色模式
     */
    theme: ['#B392F0', '#85E89D', '#9ECBFF', '#F97583', '#E1E4E8'],

    /**
     * 标题/副标题颜色
     */
    title: 'rgba(12, 139, 255, 1)',

    /**
     * 图例标签颜色
     */
    legendLabel: 'rgba(255, 255, 255, 1)',

    /**
     * X轴标签颜色
     */
    xAxisLabel: 'rgba(255, 255, 255, 1)',

    /**
     * Y轴标签颜色
     */
    yAxisLabel: 'rgba(255, 255, 255, 1)',

    /**
     * X轴分割线颜色
     */
    xSplitLine: 'rgba(255, 255, 255, 0.05)',

    /**
     * X轴轴线颜色
     */
    xAxisLine: 'rgba(142, 245, 254, 0.15)',

    /**
     * Y轴分割线颜色
     */
    ySplitLine: 'rgba(255, 255, 255, 0.05)',

    /**
     * Y轴轴线颜色
     */
    yAxisLine: 'rgba(142, 245, 254, 0.1)',
};

const $fontSize = {
    /**
     * 标题/副标题
     */
    title: 12,

    /**
     * x轴刻度标签
     */
    xAxisLabel: 12,

    /**
     * x轴名称
     */
    xAxisName: 12,

    /**
     * y轴刻度标签
     */
    yAxisLabel: 12,

    /**
     * y轴名称
     */
    yAxisName: 12,

    /**
     * 图例标签
     */
    legendLabel: 12,
};

/**
 * 容器内边距
 */
const $grid = {
    /**
     * 上
     */
    top: 50,

    /**
     * 右
     */
    right: 0,

    /**
     * 下
     */
    bottom: 15,

    /**
     * 左
     */
    left: 0,

    /**
     * grid 区域是否包含坐标轴的刻度标签
     */
    containLabel: true,
};

/**
 * 提示框风格
 */
const $tooltip = {
    /**
     * 背景色
     */
    backgroundColor: 'rgba(255, 255, 255, 1)',

    /**
     * 边框颜色
     */
    borderColor: 'rgba(255, 255, 255, 1)',

    /**
     * 边框宽度
     */
    borderWidth: 1,

    /**
     * 文字样式
     */
    textStyle: {
        color: 'rgba(48, 49, 51, 1)',
    },
};

/**
 * 图例风格
 */
const $legend = {
    /**
     * 控制图例默认是否显示
     */
    show: true,

    /**
     * 图例形状
     */
    icon: 'rect',

    /**
     * 距离容器上边界的距离
     */
    top: 10,

    /**
     * 距离容器右边界的距离
     */
    right: 10,

    /**
     * 图形宽度
     */
    itemWidth: 10,

    /**
     * 图形高度
     */
    itemHeight: 3,

    /**
     * 图例之间的间距
     */
    itemGap: 15,

    /**
     * 文字样式
     */
    textStyle: {
        color: '#fff',
        fontSize: $fontSize.legendLabel,
    },
};

/**
 * 纵向坐标轴风格
 */
const $vertical = {
    xAxis: {
        type: 'category',
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: $color.xAxisLabel,
            fontSize: $fontSize.xAxisLabel,
        },
        axisLine: {
            lineStyle: {
                color: $color.xAxisLine,
            },
        },
        splitLine: {
            lineStyle: {
                color: $color.xSplitLine,
            },
        },
        boundaryGap: true,
    },
    yAxis: {
        type: 'value',
        nameTextStyle: {
            color: $color.yAxisLabel,
            fontSize: $fontSize.yAxisName,
        },
        axisLabel: {
            color: $color.yAxisLabel,
            fontSize: $fontSize.yAxisLabel,
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: $color.yAxisLine,
            },
        },
        splitLine: {
            lineStyle: {
                color: $color.ySplitLine,
            },
        },
    },
};

/**
 * 横向坐标轴风格
 */
const $horizontal = {
    xAxis: {
        type: 'value',
        axisLabel: {
            color: $color.xAxisLabel,
            fontSize: $fontSize.xAxisLabel,
        },
        splitLine: {
            show: false,
        },
    },
    yAxis: {
        type: 'category',
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: $color.yAxisLabel,
            fontSize: $fontSize.yAxisLabel,
        },
        axisLine: {
            show: false,
        },
    },
};

loadStyle({
    $color,
    $grid,
    $tooltip,
    $horizontal,
    $vertical,
    $legend,
});