├── type.d.ts
├── .editorconfig
├── dist
    ├── uniAreaPlugin.umd.js.LICENSE.txt
    ├── uniAreaRenderer.umd.js.LICENSE.txt
    ├── uniAreaRenderer.css
    ├── uniAreaPlugin.umd.js
    └── uniAreaRenderer.umd.js
├── .gitignore
├── src
    ├── uni-area-chart
    │   ├── renderer.ts
    │   ├── plugin.ts
    │   └── uni-area-chart.vue
    └── preview.js
├── commitlint.config.js
├── README.md
├── package.json
├── amis.config.js
└── tsconfig.json


/type.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.vue' {
 2 |   const component: any;
 3 |   export default component;
 4 | }
 5 | 
 6 | declare module '*.svg' {
 7 |   const content: any;
 8 |   export default content;
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | max_line_length = 80
11 | 


--------------------------------------------------------------------------------
/dist/uniAreaPlugin.umd.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue3-amis-custom-widget v1.0.0
3 |  * author: fex
4 |  * build tool: AKFun
5 |  * build time: Tue Mar 14 2023 10:23:37 GMT+0800 (China Standard Time)
6 |  * build tool info: https://github.com/wibetter/akfun
7 |  */
8 | 


--------------------------------------------------------------------------------
/dist/uniAreaRenderer.umd.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue3-amis-custom-widget v1.0.0
3 |  * author: fex
4 |  * build tool: AKFun
5 |  * build time: Tue Mar 14 2023 10:23:37 GMT+0800 (China Standard Time)
6 |  * build tool info: https://github.com/wibetter/akfun
7 |  */
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store/
 2 | node_modules/
 3 | package-lock.json
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .hg
10 | .svn
11 | .CVS
12 | .idea
13 | .vscode
14 | .DS_Store
15 | *.suo
16 | *.ntvs*
17 | *.njsproj
18 | *.sln
19 | 


--------------------------------------------------------------------------------
/src/uni-area-chart/renderer.ts:
--------------------------------------------------------------------------------
 1 | // 注册自定义组件（aipage-editor渲染器需要）
 2 | // @ts-ignore
 3 | import { registerRendererByType } from 'vue3-amis-widget';
 4 | // @ts-ignore
 5 | import uniAreaChart from './uni-area-chart';
 6 | 
 7 | registerRendererByType(uniAreaChart, {
 8 |   type: 'uni-area-chart',
 9 |   framework: 'vue3'
10 | });
11 | 


--------------------------------------------------------------------------------
/src/preview.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import VueUniArea from './uni-area-chart/uni-area-chart.vue';
 4 | import { createVue3Component } from 'vue3-amis-widget';
 5 | const UniArea = createVue3Component(VueUniArea);
 6 | 
 7 | ReactDOM.render(
 8 |   <>
 9 |     <UniArea />
10 |   </>,
11 |   document.getElementById('root')
12 | );
13 | 


--------------------------------------------------------------------------------
/dist/uniAreaRenderer.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue3-amis-custom-widget v1.0.0
3 |  * author: fex
4 |  * build tool: AKFun
5 |  * build time: Tue Mar 14 2023 10:23:37 GMT+0800 (China Standard Time)
6 |  * build tool info: https://github.com/wibetter/akfun
7 |  */.u-charts-container[data-v-51273cb3]{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}.u-charts-container .u-charts[data-v-51273cb3]{height:280px;margin:10px auto;width:370px}


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * https://www.npmjs.com/package/@commitlint/config-conventional\
 3 |  *
 4 |  * Git提交规范-配置文件
 5 |  * Commit message 由Header、Body 和 Footer三个部分组成，其格式如下：
 6 |  *  <type>(<scope>): <subject>
 7 |  *  <BLANK LINE>
 8 |  *   <body>
 9 |  *  <BLANK LINE>
10 |  *  <footer>
11 |  *
12 |  *【备注】
13 |  * type 用于说明 commit 的类别，常用下面 7 个标识：
14 |  * scope 用于说明当前功能点作用于哪个页面或者哪个功能模块；
15 |  * subject 用于简短的描述当前commit，不超过50个字符；
16 |  * body 用于填写对本次 commit 的详细描述，可以分成多行；
17 |  * footer 不兼容变动声明，或者关闭 Issue。
18 |  *
19 |  * 【type类型取值类型】
20 |  * feat：新功能（feature）
21 |  * fix：功能优化
22 |  * bug：修补bug
23 |  * docs：文档（documentation）
24 |  * style：格式（不影响代码运行的变动）
25 |  * refactor：重构（即不是新增功能，也不是修改bug的代码变动）
26 |  * test：增加测试
27 |  * chore：构建过程或辅助工具的变动
28 |  * build：影响构建系统或外部依赖项的更改（示例范围：gulp，broccoli，npm）
29 |  * ci：对 CI 配置文件和脚本的更改（示例范围：Travis，Circle，BrowserStack，SauceLabs）
30 |  * perf：改进性能的代码更改
31 |  *
32 |  */
33 | 
34 | module.exports = {
35 |   extends: ['@commitlint/config-conventional'],
36 |   rules: {
37 |     'type-enum': [
38 |       2,
39 |       'always',
40 |       ['feat', 'fix', 'bug', 'docs', 'style', 'refactor', 'test', 'chore', 'perf', 'build', 'ci']
41 |     ],
42 |     'type-empty': [2, 'never'],
43 |     'scope-empty': [1, 'never'],
44 |     'subject-full-stop': [0, 'never'],
45 |     'subject-case': [0, 'never']
46 |   }
47 | };
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue3-amis-custom-widget
 2 | > amis 自定义组件模板（vue3.0 技术栈）
 3 | 
 4 | ### 目录说明
 5 | - src: 自定义组件源码；
 6 | - src/xxx/plugin.ts: 用于注册一个amis-editor插件，注册成功后编辑器左侧组件面板中会展示；
 7 | - src/xxx/renderer.ts: 用于注册一个amis渲染器，注册成功后编辑器画布区中才会正常展示自定义组件内容；
 8 | - src/xxx/xxx.vue: vue自定义组件源码；
 9 | - src/preview.js: 用于本地预览自定义组件内容；
10 | - amis.config.js: amis-widget-cli配置文件。
11 | 
12 | ### 开发说明
13 | 
14 | 1. **安装依赖**
15 | ```bash
16 | $ npm i 或者 yarn
17 | ```
18 | 
19 | 2. **dev: 本地开发模式（带热更新）**
20 | > dev开发模式：用于在本地editor中调试自定义组件。
21 | ```bash
22 | $ npm run dev
23 | ```
24 | 
25 | 3. **preview: 组件预览模式（带热更新）**
26 | > preview模式：用于预览自定义组件内容。
27 | ```bash
28 | $ npm run preview
29 | ```
30 | 
31 | 4. **linkDebug: 外链调试（amis-saas中预览自定义组件）**
32 | > linkDebug模式：用于在amis-saas中预览和调试自定义组件。
33 | ```bash
34 | $ npm run linkDebug
35 | ```
36 | 5. **build2lib: 构建自定义组件输出产物**
37 | > build2lib模式：用于构建发布到 npm 中的文件，默认存放到 当前dist目录中。
38 | ```bash
39 | $ npm run build2lib
40 | ```
41 | 6. **package.json添加自定义组件信息，导入组件扩展包时需要**
42 | > package.json 中添加 amis-widgets 字段，用于放置当前自定义组件信息，有这个amis-widgets 字段才能被识别为amis组件扩展包。
43 | ```bash
44 |   ...
45 |     "amis-widgets": [
46 |     {
47 |       "type": "uni-area-chart",
48 |       "framework": "vue3",
49 |       "description": "折线区域图",
50 |       "entry": "/dist/uniAreaRenderer.umd",
51 |       "files": [
52 |         "/dist/uniAreaRenderer.css"
53 |       ],
54 |       "editorPlugin": {
55 |         "pluginEntry": "/dist/uniAreaPlugin.umd",
56 |         "tag": [
57 |           "图表组件"
58 |         ],
59 |         "sort": 100
60 |       }
61 |     }
62 |     ],
63 |   ...
64 | ```
65 | 
66 | 7. **发布一个NPM组件扩展包**
67 | > 需要确保package.json中的name值唯一，version值不重复。
68 | ```bash
69 | $ npm publish
70 | ```
71 | 
72 | 8. **发布到制定的NPM仓库**
73 | > 打开NPM配置文件（src/.npmrc），配置为制定仓库地址即可。
74 | ### 配置项说明（amis-widget-cli）
75 | [请查看amis-widget-cli](https://github.com/aisuda/amis-widget-cli)
76 | 


--------------------------------------------------------------------------------
/src/uni-area-chart/plugin.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @file 编辑器扩展, 增加自定义插件（组件物料面板展示需要）
 3 |  */
 4 | // @ts-ignore
 5 | import { registerAmisEditorPlugin } from 'vue3-amis-widget';
 6 | 
 7 | export class areaChartPlugin {
 8 |   rendererName = 'uni-area-chart';
 9 |   $schema = '/schemas/UnkownSchema.json';
10 |   name = '折线区域图';
11 |   description = '基本折线区域图';
12 |   tags = ['自定义图表'];
13 |   icon = 'fa fa-file-code-o';
14 |   scaffold = {
15 |     type: 'uni-area-chart',
16 |     label: '折线区域图',
17 |     name: '折线区域图',
18 |     categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
19 |     series: [
20 |       {
21 |         name: '成交量A',
22 |         data: [35, 8, 25, 37, 4, 20]
23 |       },
24 |       {
25 |         name: '成交量B',
26 |         data: [70, 40, 65, 100, 44, 68]
27 |       },
28 |       {
29 |         name: '成交量C',
30 |         data: [100, 80, 95, 150, 112, 132]
31 |       }
32 |     ]
33 |   };
34 |   previewSchema = {
35 |     type: 'uni-area-chart',
36 |     label: '折线区域图'
37 |   };
38 | 
39 |   panelTitle = '配置';
40 | 
41 |   panelControls = [
42 |     {
43 |       type: 'json',
44 |       name: 'categories',
45 |       label: '横轴数据',
46 |       mutable: true,
47 |       value: ['2016', '2017', '2018', '2019', '2020', '2021']
48 |     },
49 |     {
50 |       type: 'json',
51 |       name: 'series',
52 |       label: '图表数据',
53 |       mutable: true,
54 |       value: [
55 |         {
56 |           name: '成交量A',
57 |           data: [35, 8, 25, 37, 4, 20]
58 |         },
59 |         {
60 |           name: '成交量B',
61 |           data: [70, 40, 65, 100, 44, 68]
62 |         },
63 |         {
64 |           name: '成交量C',
65 |           data: [100, 80, 95, 150, 112, 132]
66 |         }
67 |       ]
68 |     }
69 |   ];
70 | }
71 | 
72 | // 注册自定义插件（aipage-editor组件物料面板需要）
73 | registerAmisEditorPlugin(areaChartPlugin);
74 | 
75 | export default areaChartPlugin;
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-amis-custom-widget",
 3 |   "version": "1.0.0",
 4 |   "description": "amis自定义组件模板（vue3.0技术栈）",
 5 |   "keywords": [
 6 |     "自定义组件模板",
 7 |     "vue3.0技术栈",
 8 |     "amis自定义组件",
 9 |     "amis-editor自定义插件",
10 |     "图表自定义组件"
11 |   ],
12 |   "author": "wibetter",
13 |   "license": "MIT",
14 |   "scripts": {
15 |     "dev": "amis dev",
16 |     "preview": "amis preview",
17 |     "linkDebug": "amis linkDebug",
18 |     "build2lib": "amis build2lib",
19 |     "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
20 |   },
21 |   "files": [
22 |     "dist/*"
23 |   ],
24 |   "framework": "vue3",
25 |   "amis-widgets": [
26 |     {
27 |       "type": "uni-area-chart",
28 |       "framework": "vue3",
29 |       "description": "折线区域图",
30 |       "entry": "/dist/uniAreaRenderer.umd",
31 |       "files": [
32 |         "/dist/uniAreaRenderer.css"
33 |       ],
34 |       "editorPlugin": {
35 |         "pluginEntry": "/dist/uniAreaPlugin.umd",
36 |         "tag": [
37 |           "图表组件"
38 |         ],
39 |         "sort": 100
40 |       }
41 |     }
42 |   ],
43 |   "husky": {
44 |     "hooks": {
45 |       "pre-commit": "lint-staged",
46 |       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
47 |     }
48 |   },
49 |   "lint-staged": {
50 |     "src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}": [
51 |       "prettier --write"
52 |     ]
53 |   },
54 |   "repository": {
55 |     "type": "git",
56 |     "url": "https://git@github.com:aisuda/vue3-amis-custom-widget.git"
57 |   },
58 |   "bugs": {
59 |     "url": "https://github.com/aisuda/vue3-amis-custom-widget/issues"
60 |   },
61 |   "dependencies": {
62 |     "vue3-amis-widget": "^3.2.0",
63 |     "react": "^16.8.6",
64 |     "react-dom": "^16.8.6",
65 |     "@qiun/ucharts": "^2.4.3-20220505",
66 |     "vue": "^3.2.37"
67 |   },
68 |   "devDependencies": {
69 |     "@commitlint/cli": "^8.3.5",
70 |     "@commitlint/config-conventional": "^9.1.1",
71 |     "@wibetter/amis-widget-cli": "^3.1.10",
72 |     "husky": "^4.2.5",
73 |     "lint-staged": "^10.2.9",
74 |     "prettier": "^2.0.5"
75 |   },
76 |   "engines": {
77 |     "node": ">= 10.13.0",
78 |     "npm": ">= 6.4.1"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/dist/uniAreaPlugin.umd.js:
--------------------------------------------------------------------------------
 1 | /*! For license information please see uniAreaPlugin.umd.js.LICENSE.txt */
 2 | !(function (e, t) {
 3 |   'object' == typeof exports && 'object' == typeof module
 4 |     ? (module.exports = t())
 5 |     : 'function' == typeof define && define.amd
 6 |     ? define([], t)
 7 |     : 'object' == typeof exports
 8 |     ? (exports.amisWidget = t())
 9 |     : (e.amisWidget = t());
10 | })(this, function () {
11 |   return (function () {
12 |     'use strict';
13 |     var e = {
14 |         d: function (t, a) {
15 |           for (var n in a)
16 |             e.o(a, n) && !e.o(t, n) && Object.defineProperty(t, n, { enumerable: !0, get: a[n] });
17 |         },
18 |         o: function (e, t) {
19 |           return Object.prototype.hasOwnProperty.call(e, t);
20 |         },
21 |         r: function (e) {
22 |           'undefined' != typeof Symbol &&
23 |             Symbol.toStringTag &&
24 |             Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
25 |             Object.defineProperty(e, '__esModule', { value: !0 });
26 |         }
27 |       },
28 |       t = {};
29 |     e.r(t),
30 |       e.d(t, {
31 |         areaChartPlugin: function () {
32 |           return n;
33 |         },
34 |         default: function () {
35 |           return i;
36 |         }
37 |       });
38 |     var a = require('vue3-amis-widget'),
39 |       n = function () {
40 |         (this.rendererName = 'uni-area-chart'),
41 |           (this.$schema = '/schemas/UnkownSchema.json'),
42 |           (this.name = '折线区域图'),
43 |           (this.description = '基本折线区域图'),
44 |           (this.tags = ['自定义图表']),
45 |           (this.icon = 'fa fa-file-code-o'),
46 |           (this.scaffold = {
47 |             type: 'uni-area-chart',
48 |             label: '折线区域图',
49 |             name: '折线区域图',
50 |             categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
51 |             series: [
52 |               { name: '成交量A', data: [35, 8, 25, 37, 4, 20] },
53 |               { name: '成交量B', data: [70, 40, 65, 100, 44, 68] },
54 |               { name: '成交量C', data: [100, 80, 95, 150, 112, 132] }
55 |             ]
56 |           }),
57 |           (this.previewSchema = { type: 'uni-area-chart', label: '折线区域图' }),
58 |           (this.panelTitle = '配置'),
59 |           (this.panelControls = [
60 |             {
61 |               type: 'json',
62 |               name: 'categories',
63 |               label: '横轴数据',
64 |               mutable: !0,
65 |               value: ['2016', '2017', '2018', '2019', '2020', '2021']
66 |             },
67 |             {
68 |               type: 'json',
69 |               name: 'series',
70 |               label: '图表数据',
71 |               mutable: !0,
72 |               value: [
73 |                 { name: '成交量A', data: [35, 8, 25, 37, 4, 20] },
74 |                 { name: '成交量B', data: [70, 40, 65, 100, 44, 68] },
75 |                 { name: '成交量C', data: [100, 80, 95, 150, 112, 132] }
76 |               ]
77 |             }
78 |           ]);
79 |       };
80 |     (0, a.registerAmisEditorPlugin)(n);
81 |     var i = n;
82 |     return t;
83 |   })();
84 | });
85 | 


--------------------------------------------------------------------------------
/amis.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | const path = require('path');
  3 | // import uni from "@dcloudio/vite-plugin-uni";
  4 | // 统一路径解析
  5 | function resolve(dir) {
  6 |   return path.resolve(__dirname, dir);
  7 | }
  8 | 
  9 | // 包括生产和开发的环境配置信息
 10 | module.exports = {
 11 |   settings: {
 12 |     enableESLint: false, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式
 13 |     enableESLintFix: false, // 是否自动修正代码格式，默认不自动修正
 14 |     enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
 15 |     enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
 16 |   },
 17 |   webpack: {
 18 |     resolve: {
 19 |       // webpack的resolve配置
 20 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.esm.js', '.umd.js', '.min.js', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
 21 |       alias: {
 22 |         '@': resolve('src')
 23 |       }
 24 |     },
 25 |     // createDeclaration: true, // 打包时是否创建ts声明文件
 26 |     ignoreNodeModules: false, // 打包时是否忽略 node_modules
 27 |     allowList: [], // ignoreNodeModules为true时生效
 28 |     externals: [],
 29 |     projectDir: ['src'],
 30 |     // template: resolve('./index.html'), // 使用自己的html模板
 31 |     cssLoaderUrl: true,
 32 |     moduleRules: [], // 用于配置自定义loaders
 33 |     plugins: [] // 用于配置自定义plugins
 34 |   },
 35 |   preview: {
 36 |     entry: {
 37 |       // 本地预览自定义组件内容
 38 |       index: './src/preview.js'
 39 |     },
 40 |     // 用于开启本地调试模式的相关配置信息
 41 |     NODE_ENV: 'development',
 42 |     port: 80,
 43 |     assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
 44 |     assetsSubDirectory: '',
 45 |     hostname: 'localhost',
 46 |     cssSourceMap: true,
 47 |     closeHotReload: false, // 是否关闭热更新
 48 |     autoOpenBrowser: true
 49 |   },
 50 |   dev: {
 51 |     entry: {
 52 |       // 本地编辑器中预览自定义组件
 53 |       index: ['./src/uni-area-chart/renderer.ts', './src/uni-area-chart/plugin.ts']
 54 |     },
 55 |     // 用于开启本地调试模式的相关配置信息
 56 |     NODE_ENV: 'development',
 57 |     port: 80,
 58 |     assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
 59 |     assetsSubDirectory: '',
 60 |     hostname: 'localhost',
 61 |     proxyTable: {
 62 |       '/apiTest': {
 63 |         target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
 64 |         ws: true,
 65 |         changeOrigin: true
 66 |       }
 67 |     },
 68 |     cssSourceMap: true,
 69 |     closeHotReload: false, // 是否关闭热更新
 70 |     // closeEditorClient: false, // 是否关闭自动注入editor
 71 |     autoOpenBrowser: true
 72 |   },
 73 |   linkDebug: {
 74 |     entry: {
 75 |       // 外链调试（爱速搭中预览本地自定义组件）
 76 |       index: ['./src/uni-area-chart/renderer.ts', './src/uni-area-chart/plugin.ts']
 77 |     },
 78 |     NODE_ENV: 'production',
 79 |     port: 80,
 80 |     autoOpenBrowser: false,
 81 |     closeHtmlWebpackPlugin: true, // 关闭HtmlWebpackPlugin
 82 |     assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
 83 |     assetsSubDirectory: '',
 84 |     hostname: 'localhost',
 85 |     cssSourceMap: true,
 86 |     closeHotReload: true // 是否关闭热更新
 87 |   },
 88 |   // build2lib 用于打包生成环境的js模块
 89 |   build2lib: {
 90 |     entry: {
 91 |       uniAreaRenderer: './src/uni-area-chart/renderer.ts',
 92 |       uniAreaPlugin: './src/uni-area-chart/plugin.ts'
 93 |     },
 94 |     // 用于构建生产环境代码的相关配置信息
 95 |     NODE_ENV: 'production', // development / production
 96 |     libraryName: 'amisWidget', // 构建第三方功能包时最后导出的引用变量名
 97 |     assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径）
 98 |     assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
 99 |     assetsSubDirectory: '', // 资源引用二级路径
100 |     ignoreNodeModules: true, // 打包时是否忽略 node_modules
101 |     productionSourceMap: false,
102 |     productionGzip: false,
103 |     productionGzipExtensions: ['js', 'css', 'json'],
104 |     bundleAnalyzerReport: false
105 |   }
106 | };
107 | 


--------------------------------------------------------------------------------
/src/uni-area-chart/uni-area-chart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="u-charts-container">
  3 |     <canvas
  4 |       v-if="chartId"
  5 |       :canvas-id="chartId"
  6 |       :id="chartId"
  7 |       class="u-charts"
  8 |       @touchend="tap"
  9 |       ref="uchart"
 10 |     ></canvas>
 11 |   </div>
 12 | </template>
 13 | <script>
 14 | import uCharts from '@qiun/ucharts';
 15 | // 图表详细配置说明请见：https://www.ucharts.cn/v2/#/guide/index
 16 | var uChartsInstance = {};
 17 | export default {
 18 |   data() {
 19 |     return {
 20 |       categories: [],
 21 |       series: [],
 22 |       defaultChartData: {
 23 |         categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
 24 |         series: [
 25 |           {
 26 |             name: '成交量A',
 27 |             data: [35, 8, 25, 37, 4, 20]
 28 |           },
 29 |           {
 30 |             name: '成交量B',
 31 |             data: [70, 40, 65, 100, 44, 68]
 32 |           },
 33 |           {
 34 |             name: '成交量C',
 35 |             data: [100, 80, 95, 150, 112, 132]
 36 |           }
 37 |         ]
 38 |       }
 39 |     };
 40 |   },
 41 |   computed: {
 42 |     chartId() {
 43 |       return this.id || 'area-uChart';
 44 |     },
 45 |     thisCategories() {
 46 |       return this.categories && this.categories.length > 0
 47 |         ? this.categories
 48 |         : this.defaultChartData.categories;
 49 |     },
 50 |     thisSeries() {
 51 |       return this.series && this.series.length > 0 ? this.series : this.defaultChartData.series;
 52 |     }
 53 |   },
 54 |   mounted() {
 55 |     this.drawCharts(this.chartId, {
 56 |       categories: this.thisCategories,
 57 |       series: this.thisSeries
 58 |     });
 59 |   },
 60 |   updated() {
 61 |     // 确保编辑器端，右侧属性配置面板调整后图表会及时更新
 62 |     console.log('this.thisSeries:', this.thisSeries);
 63 |     this.drawCharts(this.chartId, {
 64 |       categories: this.thisCategories,
 65 |       series: this.thisSeries
 66 |     });
 67 |   },
 68 |   methods: {
 69 |     drawCharts(id, data) {
 70 |       const canvas = document.getElementById(id) || this.$refs.uchart;
 71 |       canvas.width = canvas.offsetWidth;
 72 |       canvas.height = canvas.offsetHeight;
 73 |       const ctx = canvas.getContext('2d');
 74 |       uChartsInstance[id] = new uCharts({
 75 |         type: 'area',
 76 |         context: ctx,
 77 |         width: canvas.width,
 78 |         height: canvas.height,
 79 |         categories: data.categories,
 80 |         series: data.series,
 81 |         animation: true,
 82 |         background: '#ffffff',
 83 |         padding: [15, 15, 0, 5],
 84 |         xAxis: {
 85 |           disableGrid: true
 86 |         },
 87 |         yAxis: {
 88 |           data: [{ min: 0 }]
 89 |         },
 90 |         color: [
 91 |           '#1890FF',
 92 |           '#91CB74',
 93 |           '#FAC858',
 94 |           '#EE6666',
 95 |           '#73C0DE',
 96 |           '#3CA272',
 97 |           '#FC8452',
 98 |           '#9A60B4',
 99 |           '#ea7ccc'
100 |         ],
101 |         legend: {},
102 |         extra: {
103 |           area: {
104 |             type: 'straight',
105 |             opacity: 0.2,
106 |             addLine: true,
107 |             width: 2,
108 |             gradient: false
109 |           }
110 |         }
111 |       });
112 |     },
113 |     tap(e) {
114 |       uChartsInstance[e.target.id].touchLegend(e);
115 |       uChartsInstance[e.target.id].showToolTip(e);
116 |     }
117 |   }
118 | };
119 | </script>
120 | 
121 | <style scoped lang="scss">
122 | .u-charts-container {
123 |   display: flex;
124 |   align-items: center;
125 |   justify-content: center;
126 | 
127 |   .u-charts {
128 |     margin: 10px auto;
129 |     width: 370px;
130 |     height: 280px;
131 |   }
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "experimentalDecorators": true,
 4 |     /* Basic Options */
 5 |     "target": "esnext",
 6 |     /* 指定编译之后的版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
 7 |     "module": "esnext" /* 指定要使用的模板标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
 8 |     // "lib": [],                             /* Specify library files to be included in the compilation. */
 9 |     "allowJs": false /* 指定是否允许编译JS文件，默认false,即不编译JS文件. */,
10 |     // "checkJs": true,                       /* 指定是否检查和报告JS文件中的错误，默认false */
11 |     "jsx": "react" /* 指定jsx代码用于的开发环境:'preserve','react-native', or 'react'. */,
12 |     "declaration": false /* 指定是否在编译的时候生成相的d.ts声明文件 */,
13 |     // "declarationMap": true,                /* 指定编译时是否生成.map文件 */
14 |     // "sourceMap": true,                     /* 指定编译时是否生成.map文件 */
15 |     // "outFile": "./",                       /* 指定输出文件合并为一个文件 */
16 |     // "outDir": "amis-widget", /* 指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹*/
17 |     // "rootDir": "src", /* 指定编译文件的根目录，编译器会在根目录查找入口文件 */
18 |     // "composite": true,                     /* 是否编译构建引用项目 */
19 |     // "removeComments": true,                /* 指定是否将编译后的文件注释删掉，设为true的话即删除注释，默认为false */
20 |     "noEmit": false /* 不生成编译文件 */,
21 |     "importHelpers": true /* 指定是否引入tslib里的复制工具函数，默认为false */,
22 |     // "downlevelIteration": true,            /* 当target为"ES5"或"ES3"时，为"for-of" "spread"和"destructuring"中的迭代器提供完全支持 */
23 |     "isolatedModules": false /* 指定是否将每个文件作为单独的模块，默认为true */,
24 | 
25 |     /* Strict Type-Checking Options */
26 |     "strict": false /* 指定是否启动所有类型检查 */,
27 |     "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
28 |     "strictNullChecks": true /* Enable strict null checks. */,
29 |     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
30 |     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
31 |     "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
32 |     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
33 | 
34 |     /* Additional Checks */
35 |     "noUnusedLocals": true /* Report errors on unused locals. */,
36 |     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
37 |     "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
38 |     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
39 | 
40 |     /* Module Resolution Options */
41 |     "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
42 |     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
43 |     "paths": {
44 |       "@": ["./src"]
45 |     } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
46 |     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
47 |     /* 指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 */
48 |     "typeRoots": ["./@types", "./node_modules/@types"],
49 |     // "types": [],                           /* 指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载 */
50 |     "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
51 |     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
52 |     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
53 | 
54 |     /* Source Map Options */
55 |     // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
56 |     // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
57 |     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
58 |     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
59 | 
60 |     /* Experimental Options */
61 |     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
62 |     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
63 |     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
64 |     "suppressImplicitAnyIndexErrors": true /* Suppress --noImplicitAny errors for indexing objects lacking index signatures. See issue #1232 for more details. */
65 |   },
66 |   "include": ["src", "type.d.ts"],
67 |   "exclude": ["node_modules"]
68 | }
69 | 


--------------------------------------------------------------------------------
/dist/uniAreaRenderer.umd.js:
--------------------------------------------------------------------------------
  1 | /*! For license information please see uniAreaRenderer.umd.js.LICENSE.txt */
  2 | !(function (e, t) {
  3 |   'object' == typeof exports && 'object' == typeof module
  4 |     ? (module.exports = t())
  5 |     : 'function' == typeof define && define.amd
  6 |     ? define([], t)
  7 |     : 'object' == typeof exports
  8 |     ? (exports.amisWidget = t())
  9 |     : (e.amisWidget = t());
 10 | })(this, function () {
 11 |   return (function () {
 12 |     var e = {
 13 |         571: function () {},
 14 |         744: function (e, t) {
 15 |           'use strict';
 16 |           t.Z = (e, t) => {
 17 |             const r = e.__vccOpts || e;
 18 |             for (const [e, n] of t) r[e] = n;
 19 |             return r;
 20 |           };
 21 |         },
 22 |         331: function (e, t, r) {
 23 |           var n = r(571);
 24 |           n.__esModule && (n = n.default),
 25 |             'string' == typeof n && (n = [[e.id, n, '']]),
 26 |             n.locals && (e.exports = n.locals),
 27 |             (0, r(346).Z)('cf97bc6a', n, !1, { sourceMap: !1 });
 28 |         },
 29 |         346: function (e, t, r) {
 30 |           'use strict';
 31 |           function n(e, t) {
 32 |             for (var r = [], n = {}, i = 0; i < t.length; i++) {
 33 |               var a = t[i],
 34 |                 s = a[0],
 35 |                 o = { id: e + ':' + i, css: a[1], media: a[2], sourceMap: a[3] };
 36 |               n[s] ? n[s].parts.push(o) : r.push((n[s] = { id: s, parts: [o] }));
 37 |             }
 38 |             return r;
 39 |           }
 40 |           r.d(t, {
 41 |             Z: function () {
 42 |               return p;
 43 |             }
 44 |           });
 45 |           var i = 'undefined' != typeof document;
 46 |           if ('undefined' != typeof DEBUG && DEBUG && !i)
 47 |             throw new Error(
 48 |               "vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
 49 |             );
 50 |           var a = {},
 51 |             s = i && (document.head || document.getElementsByTagName('head')[0]),
 52 |             o = null,
 53 |             c = 0,
 54 |             d = !1,
 55 |             u = function () {},
 56 |             f = null,
 57 |             h = 'data-vue-ssr-id',
 58 |             l =
 59 |               'undefined' != typeof navigator &&
 60 |               /msie [6-9]\b/.test(navigator.userAgent.toLowerCase());
 61 |           function p(e, t, r, i) {
 62 |             (d = r), (f = i || {});
 63 |             var s = n(e, t);
 64 |             return (
 65 |               g(s),
 66 |               function (t) {
 67 |                 for (var r = [], i = 0; i < s.length; i++) {
 68 |                   var o = s[i];
 69 |                   (c = a[o.id]).refs--, r.push(c);
 70 |                 }
 71 |                 for (t ? g((s = n(e, t))) : (s = []), i = 0; i < r.length; i++) {
 72 |                   var c;
 73 |                   if (0 === (c = r[i]).refs) {
 74 |                     for (var d = 0; d < c.parts.length; d++) c.parts[d]();
 75 |                     delete a[c.id];
 76 |                   }
 77 |                 }
 78 |               }
 79 |             );
 80 |           }
 81 |           function g(e) {
 82 |             for (var t = 0; t < e.length; t++) {
 83 |               var r = e[t],
 84 |                 n = a[r.id];
 85 |               if (n) {
 86 |                 n.refs++;
 87 |                 for (var i = 0; i < n.parts.length; i++) n.parts[i](r.parts[i]);
 88 |                 for (; i < r.parts.length; i++) n.parts.push(m(r.parts[i]));
 89 |                 n.parts.length > r.parts.length && (n.parts.length = r.parts.length);
 90 |               } else {
 91 |                 var s = [];
 92 |                 for (i = 0; i < r.parts.length; i++) s.push(m(r.parts[i]));
 93 |                 a[r.id] = { id: r.id, refs: 1, parts: s };
 94 |               }
 95 |             }
 96 |           }
 97 |           function v() {
 98 |             var e = document.createElement('style');
 99 |             return (e.type = 'text/css'), s.appendChild(e), e;
100 |           }
101 |           function m(e) {
102 |             var t,
103 |               r,
104 |               n = document.querySelector('style[' + h + '~="' + e.id + '"]');
105 |             if (n) {
106 |               if (d) return u;
107 |               n.parentNode.removeChild(n);
108 |             }
109 |             if (l) {
110 |               var i = c++;
111 |               (n = o || (o = v())), (t = b.bind(null, n, i, !1)), (r = b.bind(null, n, i, !0));
112 |             } else
113 |               (n = v()),
114 |                 (t = x.bind(null, n)),
115 |                 (r = function () {
116 |                   n.parentNode.removeChild(n);
117 |                 });
118 |             return (
119 |               t(e),
120 |               function (n) {
121 |                 if (n) {
122 |                   if (n.css === e.css && n.media === e.media && n.sourceMap === e.sourceMap) return;
123 |                   t((e = n));
124 |                 } else r();
125 |               }
126 |             );
127 |           }
128 |           var y,
129 |             C =
130 |               ((y = []),
131 |               function (e, t) {
132 |                 return (y[e] = t), y.filter(Boolean).join('\n');
133 |               });
134 |           function b(e, t, r, n) {
135 |             var i = r ? '' : n.css;
136 |             if (e.styleSheet) e.styleSheet.cssText = C(t, i);
137 |             else {
138 |               var a = document.createTextNode(i),
139 |                 s = e.childNodes;
140 |               s[t] && e.removeChild(s[t]), s.length ? e.insertBefore(a, s[t]) : e.appendChild(a);
141 |             }
142 |           }
143 |           function x(e, t) {
144 |             var r = t.css,
145 |               n = t.media,
146 |               i = t.sourceMap;
147 |             if (
148 |               (n && e.setAttribute('media', n),
149 |               f.ssrId && e.setAttribute(h, t.id),
150 |               i &&
151 |                 ((r += '\n/*# sourceURL=' + i.sources[0] + ' */'),
152 |                 (r +=
153 |                   '\n/*# sourceMappingURL=data:application/json;base64,' +
154 |                   btoa(unescape(encodeURIComponent(JSON.stringify(i)))) +
155 |                   ' */')),
156 |               e.styleSheet)
157 |             )
158 |               e.styleSheet.cssText = r;
159 |             else {
160 |               for (; e.firstChild; ) e.removeChild(e.firstChild);
161 |               e.appendChild(document.createTextNode(r));
162 |             }
163 |           }
164 |         }
165 |       },
166 |       t = {};
167 |     function r(n) {
168 |       var i = t[n];
169 |       if (void 0 !== i) return i.exports;
170 |       var a = (t[n] = { id: n, exports: {} });
171 |       return e[n](a, a.exports, r), a.exports;
172 |     }
173 |     (r.n = function (e) {
174 |       var t =
175 |         e && e.__esModule
176 |           ? function () {
177 |               return e.default;
178 |             }
179 |           : function () {
180 |               return e;
181 |             };
182 |       return r.d(t, { a: t }), t;
183 |     }),
184 |       (r.d = function (e, t) {
185 |         for (var n in t)
186 |           r.o(t, n) && !r.o(e, n) && Object.defineProperty(e, n, { enumerable: !0, get: t[n] });
187 |       }),
188 |       (r.o = function (e, t) {
189 |         return Object.prototype.hasOwnProperty.call(e, t);
190 |       }),
191 |       (r.r = function (e) {
192 |         'undefined' != typeof Symbol &&
193 |           Symbol.toStringTag &&
194 |           Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
195 |           Object.defineProperty(e, '__esModule', { value: !0 });
196 |       });
197 |     var n = {};
198 |     return (
199 |       (function () {
200 |         'use strict';
201 |         r.r(n);
202 |         var e = require('vue3-amis-widget'),
203 |           t = require('vue'),
204 |           i = { class: 'u-charts-container' },
205 |           a = ['canvas-id', 'id'],
206 |           s = require('@qiun/ucharts'),
207 |           o = r.n(s),
208 |           c = {},
209 |           d = {
210 |             data: function () {
211 |               return {
212 |                 categories: [],
213 |                 series: [],
214 |                 defaultChartData: {
215 |                   categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
216 |                   series: [
217 |                     { name: '成交量A', data: [35, 8, 25, 37, 4, 20] },
218 |                     { name: '成交量B', data: [70, 40, 65, 100, 44, 68] },
219 |                     { name: '成交量C', data: [100, 80, 95, 150, 112, 132] }
220 |                   ]
221 |                 }
222 |               };
223 |             },
224 |             computed: {
225 |               chartId: function () {
226 |                 return this.id || 'area-uChart';
227 |               },
228 |               thisCategories: function () {
229 |                 return this.categories && this.categories.length > 0
230 |                   ? this.categories
231 |                   : this.defaultChartData.categories;
232 |               },
233 |               thisSeries: function () {
234 |                 return this.series && this.series.length > 0
235 |                   ? this.series
236 |                   : this.defaultChartData.series;
237 |               }
238 |             },
239 |             mounted: function () {
240 |               this.drawCharts(this.chartId, {
241 |                 categories: this.thisCategories,
242 |                 series: this.thisSeries
243 |               });
244 |             },
245 |             updated: function () {
246 |               console.log('this.thisSeries:', this.thisSeries),
247 |                 this.drawCharts(this.chartId, {
248 |                   categories: this.thisCategories,
249 |                   series: this.thisSeries
250 |                 });
251 |             },
252 |             methods: {
253 |               drawCharts: function (e, t) {
254 |                 var r = document.getElementById(e) || this.$refs.uchart;
255 |                 (r.width = r.offsetWidth), (r.height = r.offsetHeight);
256 |                 var n = r.getContext('2d');
257 |                 c[e] = new (o())({
258 |                   type: 'area',
259 |                   context: n,
260 |                   width: r.width,
261 |                   height: r.height,
262 |                   categories: t.categories,
263 |                   series: t.series,
264 |                   animation: !0,
265 |                   background: '#ffffff',
266 |                   padding: [15, 15, 0, 5],
267 |                   xAxis: { disableGrid: !0 },
268 |                   yAxis: { data: [{ min: 0 }] },
269 |                   color: [
270 |                     '#1890FF',
271 |                     '#91CB74',
272 |                     '#FAC858',
273 |                     '#EE6666',
274 |                     '#73C0DE',
275 |                     '#3CA272',
276 |                     '#FC8452',
277 |                     '#9A60B4',
278 |                     '#ea7ccc'
279 |                   ],
280 |                   legend: {},
281 |                   extra: {
282 |                     area: { type: 'straight', opacity: 0.2, addLine: !0, width: 2, gradient: !1 }
283 |                   }
284 |                 });
285 |               },
286 |               tap: function (e) {
287 |                 c[e.target.id].touchLegend(e), c[e.target.id].showToolTip(e);
288 |               }
289 |             }
290 |           };
291 |         r(331);
292 |         const u = (0, r(744).Z)(d, [
293 |           [
294 |             'render',
295 |             function (e, r, n, s, o, c) {
296 |               return (
297 |                 (0, t.openBlock)(),
298 |                 (0, t.createElementBlock)('div', i, [
299 |                   c.chartId
300 |                     ? ((0, t.openBlock)(),
301 |                       (0, t.createElementBlock)(
302 |                         'canvas',
303 |                         {
304 |                           key: 0,
305 |                           'canvas-id': c.chartId,
306 |                           id: c.chartId,
307 |                           class: 'u-charts',
308 |                           onTouchend:
309 |                             r[0] ||
310 |                             (r[0] = function () {
311 |                               return c.tap && c.tap.apply(c, arguments);
312 |                             }),
313 |                           ref: 'uchart'
314 |                         },
315 |                         null,
316 |                         40,
317 |                         a
318 |                       ))
319 |                     : (0, t.createCommentVNode)('v-if', !0)
320 |                 ])
321 |               );
322 |             }
323 |           ],
324 |           ['__scopeId', 'data-v-51273cb3']
325 |         ]);
326 |         var f = u;
327 |         (0, e.registerRendererByType)(f, { type: 'uni-area-chart', framework: 'vue3' });
328 |       })(),
329 |       n
330 |     );
331 |   })();
332 | });
333 | 


--------------------------------------------------------------------------------