sutpc-charts-utils

安装

npm install sutpc-charts-utils

全量引入组件

import { createApp } from "vue";
import SutpcChartsUtils from 'sutpc-charts-utils'
import 'sutpc-charts-utils/dist/style.css'
SutpcChartsUtils.setBaseURL('https://www.baidu.com') // 设置api基础地址，不设置默认为当前域名根目录

createApp().use(SutpcChartsUtils).mount("#app");

// 在.vue文件去使用组件
<template>
  <gantt-chart />
  <network-chart />
  <matrix />
  <invest-chart />
  <payment-chart />
  <complete-rate-chart />
  <base-info />
  <env-pic />
</template>

在全局按需引入某个组件， 如矩阵图

import { createApp } from "vue";
import Matrix from 'sutpc-charts-utils/dist/matrix/index'
import 'sutpc-charts-utils/dist/matrix/style.css'

Matrix.setBaseURL('https://www.baidu.com') // 设置api基础地址，不设置默认为当前域名根目录

createApp().use(Matrix).mount("#app");

或者在某个组件内按需引入, 如about.vue

<template>
  <div>
    <div>这是about.vue</div>
    <Matrix />
  </div>
</template>
<script setup lang="ts">
import { Matrix, setBaseURL } from 'sutpc-charts-utils/dist/matrix/index'
import 'sutpc-charts-utils/dist/matrix/style.css'
setBaseURL('https://www.baidu.com') // 设置api基础地址，不设置默认为当前域名根目录
</script>

支付曲线、形象进度曲线需要额外设置字体，echarts浮窗需要

@font-face {
  font-family: "DINCondensed-Bold";
  src: url("sutpc-charts-utils/dist/fonts/DINCondensed-Bold.ttf");
  font-weight: normal;
  font-style: normal;
}