dg-charts

dgCharts

作者：鹤酒、hejiu45

官方文档

介绍：

dgCharts是一个基于Vite 与 Vue3 开发的可视化组件库，由鹤酒（hejiu45）独立开发，如果大家感兴趣也可以加入我们一起开发和完善我们组件库，这是一个简约、简单、易上手的组件库。

安装与卸载：

# 安装
npm i dg-charts

# 卸载
npm uninstall dg-charts

引用方式：

注意：支持vue3

依赖要求（重要）

vue、echarts、@vueuse/core 均为 peerDependencies， 需要在你自己的工程中安装，不会随组件库自动安装：

npm i vue echarts @vueuse/core

echarts-gl 是可选依赖，仅 3D 图表需要：

npm i echarts-gl    # 需要 globe / bar3D / scatter3D 时才装

从 0.1.x 升级请注意两件事：

1. echarts 等依赖已从 dependencies 移入 peerDependencies。 这样可避免与业务自己安装的 echarts 产生两份实例（会导致图表报错、内存翻倍）。
2. echarts 已升级到 ^6.1.0（修复 XSS 漏洞）。 从 5.x 升级到 6.x 是大版本变更，请留意见「安全说明」中的兼容性提示。

全局 引用：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 手动引用样式
import dgCharts from 'dg-charts'
import 'dg-charts/dist/dg-charts.css'

createApp(App).use(dgCharts).mount('#app')

局部 引用

推荐把图表配置集中放到 src/options/index.js，页面里只关心「用哪个配置 + 什么数据」：

// src/options/index.js
export const lineTop10 = (payload = {}) => ({
  color: ['#01d2e6', '#3f8cff'],
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: payload.categories || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  // 注意：series 里不写 data，由组件的 :data 注入
  series: [{ name: '数量', type: 'line', smooth: true, areaStyle: { opacity: 0.12 } }]
})

<template>
  <dg-body :imgUrl="bg">
    <dg-header :imgUrl="header" height="164px" color="#369efe" textAlign="center"></dg-header>
    <dg-content height="164px">
      <dg-left rowGap="10px">
        <!-- 配置来自 options，数据单独传入 -->
        <dg-chart :imgUrl="charts01" :option="options.lineTop10" :data="numList"></dg-chart>
      </dg-left>
      <dg-center class="imgs">
        
      </dg-center>
      <dg-right>
        <dg-chart :imgUrl="charts01" :option="options.barCompare" :data="barData"></dg-chart>
      </dg-right>
    </dg-content>
  </dg-body>
</template>

<script setup>
import { ref, computed } from 'vue'
// 资源导入
import bg from "@/assets/bg00.png"
import header from "@/assets/header.png"
import charts01 from "@/assets/charts01.png"
// 按需导入组件
import { dgBody, dgHeader, dgContent, dgLeft, dgRight, dgCenter, dgChart } from "dg-charts"
// 图表配置集中管理
import * as options from "@/options/index.js"

// 页面只维护数据
const numList = ref([120, 200, 150, 80, 70, 110, 130])
const numList2 = ref([90, 160, 120, 140, 60, 90, 100])

// 多系列按 series.name 注入
const barData = computed(() => ({
  今年: numList.value,
  去年: numList2.value
}))
</script>

<style scoped>
.imgs {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgs img {
  height: 254px;
}
</style>

安全说明

关于 echarts 的 XSS 漏洞（已通过升级修复）

⚠️ echarts 6 与 echarts-gl 的兼容性

本库已移除对 echarts-gl 的强依赖，改为可选（peerDependenciesMeta.optional）， 因为 echarts-gl@2.x 声明的 peer 依赖是 echarts: ^5.1.2，不包含 6.x。

好消息：本库源码中没有导入 echarts-gl（全部图表逻辑只依赖 echarts 核心）， 因此常规 2D 图表完全不受影响。

如果你需要 3D 图表（globe / bar3D / scatter3D 等），请自行安装并评估兼容性：

npm i echarts-gl
# 若出现 peer 冲突警告，可临时使用：
npm i echarts-gl --legacy-peer-deps

通用建议

组件库的 option 是直接透传给 ECharts 的。当图表数据来自用户输入或 不可信来源时，请自行对文本做转义，或使用 tooltip.formatter 显式处理。