# @jianghao_gdufs/smart-charts
> ```sh npm install echarts smart-charts --save --registry http://172.16.11.21:4873 ```
Latest version **3.0.0-alpha-7** (published 2022-09-28) · ISC license · 0 weekly downloads
## Install
```sh
npm install @jianghao_gdufs/smart-charts
pnpm add @jianghao_gdufs/smart-charts
yarn add @jianghao_gdufs/smart-charts
bun add @jianghao_gdufs/smart-charts
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.0-alpha-7 |
| Published | 2022-09-28 |
| First published | 2022-09-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 10.7 MB |
| Known vulnerabilities | 0 (+27 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | jianghao_gdufs |
## Links
- npm: https://www.npmjs.com/package/@jianghao_gdufs/smart-charts
- Repository: git@172.16.11.133:SmartMap/CloudRenderer/smart-charts
- npm.io page: https://npm.io/package/@jianghao_gdufs/smart-charts
## Dependencies (8)
- [vue](https://npm.io/package/vue.md) ^3.2.31
- [axios](https://npm.io/package/axios.md) ^0.27.2
- [lodash](https://npm.io/package/lodash.md) ~4.17.21
- [vue-i18n](https://npm.io/package/vue-i18n.md) 9.1.10
- [screenfull](https://npm.io/package/screenfull.md) ^6.0.1
- [animate.css](https://npm.io/package/animate.css.md) ^4.1.1
- [vue-echarts](https://npm.io/package/vue-echarts.md) ^6.0.2
- [echarts-stat](https://npm.io/package/echarts-stat.md) ^1.2.0
## Recent versions
- 3.0.0-alpha-7 (latest) — 2022-09-28
- 3.0.0-alpha-6 — 2022-09-26
- 3.0.0-alpha-5 — 2022-09-23
- 3.0.0-alpha-4 — 2022-09-22
- 3.0.0-alpha-3 — 2022-09-21
- 3.0.0-alpha-2 — 2022-09-21
- 3.0.0-alpha-1 — 2022-09-21
- 3.0.0-alpha — 2022-09-21
## README
# smart-charts 图表设计器
## 安装方式
### 从 npm 获取
```sh
npm install echarts smart-charts --save --registry http://172.16.11.21:4873
```
## 如何使用
### esm
引入包， 包含css和es模块
```js
import { createApp } from 'vue'
import App from './App.vue'
import 'echarts'; // NOTE: 全局引入?
import SmartCharts from '@jianghao_gdufs/smart-charts' // TODO: 修改为内网 npm 名
import '@jianghao_gdufs/smart-charts/dist/style.css'
createApp(App).use(smartCharts).mount('#app')
```
由于以 esm 使用的echarts不再自动导入组件，需要手动引入使用到的图表组件。详见 [echarts5 升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)
```Vue
```
#### 按需引入 echarts
```ts
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import { use, registerMap } from 'echarts/core';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import { DatasetComponent, TooltipComponent, GridComponent, LegendComponent, TitleComponent, GeoComponent, VisualMapComponent, TransformComponent } from 'echarts/components';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, ScatterChart, PieChart, FunnelChart, HeatmapChart, RadarChart, EffectScatterChart, MapChart } from 'echarts/charts';
// 标签自动布局，全局过渡动画等特性
import { UniversalTransition, LabelLayout } from 'echarts/features'
// 注册
use([
CanvasRenderer,
/* 图表类型 start */
BarChart, LineChart, ScatterChart, PieChart, FunnelChart, HeatmapChart, RadarChart, EffectScatterChart,
/* 图表类型 end */
DatasetComponent,
TooltipComponent,
GridComponent,
LegendComponent,
TitleComponent,
VisualMapComponent
]);
// 地图
use([
MapChart,
GeoComponent,
])
use([
TransformComponent,
UniversalTransition,
LabelLayout
])
```
### umd
需要先依次引入前置依赖的库， `vue`、`axios`、`lodash`、`echarts`、`vue-echarts`。
再引入图表设计器的css文件和js文件。
```html
Vite App
> 注意 在使用umd的方式时，请保持使用 `kabel-case`
```
## 引入组件
图表设计器以插件的形式注册全局组件 `SmartCharts` 以及其内部会使用到的组件。
一般通过入口组件 `SmartCharts` 的参数来控制图表的渲染。
由于其他的组件也是全局注册的，可以直接使用。
###
## 配置详解
---
_Source: https://npm.io/package/@jianghao_gdufs/smart-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._