dgCharts

作者：鹤酒、hejiu45

官方文档

介绍：

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

安装与卸载：

# 安装
npm i dg-charts

# 卸载
npm uninstall dg-charts

引用方式：

注意：支持vue3

全局 引用：

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

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

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

局部 引用

<template>
  <dg-body :imgUrl="bg">
    <dg-header :imgUrl="header" :height="'164px'" color="#369efe" textAlign="center" lineHeight="74px"></dg-header>
    <dg-content :height="'164px'">
      <dg-left paddingLeft="20px">
        <dg-chart flex="1" chartsh="20px" tcolor="#01d2e6" :txtbg="charts02" marginBottom="20px" width="100%"
          :imgUrl="charts01" :chartsOption="chartOptions"></dg-chart>
        <dg-chart flex="1" chartsh="20px" tcolor="#01d2e6" :txtbg="charts02" marginBottom="20px" width="100%"
          :imgUrl="charts01" :chartsOption="chartOptions"></dg-chart>
        <dg-chart flex="1" chartsh="20px" tcolor="#01d2e6" :txtbg="charts02" marginBottom="20px" width="100%"
          :imgUrl="charts01" :chartsOption="chartOptions"></dg-chart>
      </dg-left>
      <dg-center class="imgs">
        <img src="./assets/bg02.png" alt="">
      </dg-center>
      <dg-right paddingRight="20px">
        <dg-chart flex="1" chartsh="20px" tcolor="#01d2e6" :txtbg="charts02" marginBottom="20px" width="100%"
          :imgUrl="charts01" :chartsOption="chartOptions"></dg-chart>
        <dg-chart flex="1" chartsh="20px" tcolor="#01d2e6" :txtbg="charts02" marginBottom="20px" width="100%"
          :imgUrl="charts01" :chartsOption="chartOptions"></dg-chart>
        <dg-chart flex="1" chartsh="20px" tcolor="#01d2e6" :txtbg="charts02" marginBottom="20px" width="100%"
          :imgUrl="charts01" :chartsOption="chartOptions"></dg-chart>
      </dg-right>
    </dg-content>
  </dg-body>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 资源导入
import bg from "@/assets/bg00.png"
import header from "@/assets/header.png"
import charts01 from "@/assets/charts01.png"
import charts02 from "@/assets/charts02.png"
// 按需导入
import { dgBody, dgHeader, dgContent, dgLeft, dgRight, dgCenter, dgCharts } from "dg-charts"

// echarts 配置
let chartOptions = ref({
  color: '#f40',
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [250, 130, 124, 318, 435, 247, 160],
      type: 'line'
    }
  ]
})
</script> 

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

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