diff --git a/docs/.vitepress/sibar.js b/docs/.vitepress/sibar.js index f841d4a..31bc872 100644 --- a/docs/.vitepress/sibar.js +++ b/docs/.vitepress/sibar.js @@ -239,6 +239,10 @@ export function sidebarUsageFrame() { text: "echarts", link: "/usage-frame/前端综合/数据可视化/echarts", }, + { + text: "vue-echarts", + link: "/usage-frame/前端综合/数据可视化/vue-echarts", + }, ], }, { diff --git "a/docs/usage-frame/\345\211\215\347\253\257\347\273\274\345\220\210/\346\225\260\346\215\256\345\217\257\350\247\206\345\214\226/vue-echarts.md" "b/docs/usage-frame/\345\211\215\347\253\257\347\273\274\345\220\210/\346\225\260\346\215\256\345\217\257\350\247\206\345\214\226/vue-echarts.md" new file mode 100644 index 0000000..65f4464 --- /dev/null +++ "b/docs/usage-frame/\345\211\215\347\253\257\347\273\274\345\220\210/\346\225\260\346\215\256\345\217\257\350\247\206\345\214\226/vue-echarts.md" @@ -0,0 +1,149 @@ +# vue echarts + +定义：echarts的vue组件 + +## props + +### init-options + +该选项对应于`echarts.init`的第三个参数ops，可选属性有： + +```typescript +// echarts.init的类型定义 +( + dom: HTMLDivElement | HTMLCanvasElement, + theme?: string | object, + opts?: { + // init-options可选属性 + devicePixelRatio?: number; + renderer?: string; + useDirtyRect?: boolean; + useCoarsePointer?: boolean; + pointerSize?: number; + ssr?: boolean; + width?: number|string; + height?: number|string; + locale?: string; + } +) => EChart +``` + +### theme + +应用的主题，对应于`echarts.init`的第二个参数theme，值类型为`string | object` + +### option + +图表配置，对应于`echartsInstance.setOption`的第一个参数option。 + +```typescript +// echartsInstance.setOption的类型定义 +( + option: Object, + notMerge?: boolean, + lazyUpdate?: boolean +) + +// 或者： +( + option: Object, + opts?: { + notMerge?: boolean; + lazyUpdate?: boolean; + replaceMerge?: string | string[]; + } +) +``` + +修改该prop会触发echarts的setOption方法，从而进行图表的更新。当不指定update-options prop时，修改option且不改变其引用地址，默认会将当前的option和旧的option进行合并。否则将直接替换旧的option。 + +### update-options + +更新图表选项的配置，对应于`echartsInstance.setOption`的第二个之后的参数。类型定义见上面。 + +### group + +在多个chart实例进行连接时的组名称，对应于`echartsInstance.group`。 + +### autoresize + +是否应该在调整图表根的大小时自动调整图表的大小，使用options对象指定自定义限制延迟（ms），或额外的resize回调函数。 + +类型定义如下： + +```typescript +boolean | { + throttle?: number; + onResize?: () => void; +} +``` + +### loading + +图表是否处于加载状态 + +### loading-options + +加载动画的配置项，对应于`echartsInstance.showLoading`的opts参数。 + +```typescript +// echartsInstance.showLoading的类型定义 +( + // 未来只有default被支持 + type?: string, + opts?: { + // type为default时的属性 + text: 'loading', + color: '#c23531', + textColor: 'white', + maskColor: 'rgba(255, 255, 255, 0.8)', + zlevel: 0 + fontSize: 12, + showSpinner: true, + spinnerRadius: 10, + lineWidth: 5, + fontWeight: 'normal', + fontStyle: 'normal', + fontFamily: 'sans-serif', + } +) +``` + +### maunal-update + +是否手动更新option，对于性能关键的场景，最好绕过vue的option prop响应式系统。此时可设置该属性为ture，同时不指定option，而是通过ref检索到echarts实例，手动调用setOption方法更新图表。 + +## 事件 + +可以使用`v-on`绑定事件，注意此时仅支持`.once`修饰符，因为其他的修饰符与DOM事件系统紧密耦合。 + +当要绑定原生DOM事件时，需要使用例如`@native:click`的形式。 + +## provide/inject + +可以使用依赖注入的形式替换`theme`, `init-options`, `update-options`, `loading-options` prop的功能。 + +使用形式是在使用到vue-echarts组件的地方引入provide即可： + +```typescript +import { THEME_KEY } from 'vue-echarts' +import { provide } from 'vue' + +// 组合式 +provide(THEME_KEY, 'dark') + +// 选项式 +export default { + provide: { + [THEME_KEY]: 'dark' + } +} +``` + + + +## 方法 + +在获取到echarts实例（通过ref）后，可以调用一些方法，例如：setOption、getWidth、getHeight、getDom、getOption、resize、dispatchAction、convertToPixel、convertFromPixel、containPixel、getDataURL、getConnectedDataURL、clear、dispose、showLoading、hideLoading。 + +静态方法可以直接通过echarts本身进行访问。 diff --git "a/docs/usage-frame/\345\267\245\345\205\267\351\223\276/git\346\223\215\344\275\234.md" "b/docs/usage-frame/\345\267\245\345\205\267\351\223\276/git\346\223\215\344\275\234.md" index a8f443d..4c8fc2c 100644 --- "a/docs/usage-frame/\345\267\245\345\205\267\351\223\276/git\346\223\215\344\275\234.md" +++ "b/docs/usage-frame/\345\267\245\345\205\267\351\223\276/git\346\223\215\344\275\234.md" @@ -167,10 +167,12 @@ degit user/repo#1fd41saf4 ### 暂存工作区间（stash） - `git stash`：把本地的改动暂存起来 +- `git stash push file1 file2 ...`：把指定文件暂存起来 - `git stash save 'message'`：把本地的改动暂存起来，添加备注，方便查找 - `git stash pop`：应用最近一次暂存的修改，同时删除暂存记录 - `git stash apply stash@{$num}`：无参数默认使用`stash@{0}` - `git stash list`：查看当前stash缓存列表 +- `git stash drop stash@{$num}`：删除指定stash缓存 - `git stash clear`：删除所有stash缓存 ### 提交回滚（revert、reset） diff --git a/drafts/2024-07-03.md b/drafts/2024-07-03.md index 463e7da..38ebbf0 100644 --- a/drafts/2024-07-03.md +++ b/drafts/2024-07-03.md @@ -1,3 +1,48 @@ +# drafts + +## 2024-10-05 + +数据大屏项目要点： + +多环形图效果实现：通过使用echarts的饼图叠加实现的，同一个环中，叠加2个饼图，一个有值的（有颜色），一个作为背景的。 + +关系图示例：多加练习 + +词云：echarts插件[echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud) + +数据总览展示： + +- 字体展示：通过自定义字体实现，需要加上字体文件，比如LED数字字体 +- 数字渐增：通过[countUp.js](https://www.npmjs.com/package/countup.js)插件实现 +- 字体渐变 + +```css +/* 字体渐变效果：背景渐变 + 字体透明 */ +.text-gradient { + background-image: linear-gradient(to bottom, #ff008a, #00bfff); + /* 背景颜色的作用范围： + 是否延伸到边框（border-box）、内边距（padding-box）、内容盒子（content-box）下面； + 或裁剪为文字的前景色（text） + */ + background-clip: text; + -webkit-background-clip: text; + /* 指定文本字符的填充色 */ + -webkit-text-fill-color: transparent; + +``` + +## 2024-09-09 + +### 老旧项目node-sass安装问题 + +1. python环境问题：在python官网下载对应版本即可，比如2.7，然后配置环境变量 +2. node-sass下载一直卡住的问题，通过手动在[github](https://github.com/sass/node-sass/releases?q=4.14.1&expanded=true)下下载`node -p "[process.platform, process.arch, process.versions.modules].join('-')"`提示的对应版本即可，然后依次执行：`set SASS_BINARY_PATH=D:\WorkCode\lib\win32-x64-83_binding.node`、`npm rebuild node-sass`、`npm install node-sass -D`、`npm install` +3. 后续运行如果报错，需要将下载下来的`win32-x64-83_binding.node`文件复制并重命名为`node_modules\node-sass\vendor\win32-x64-83\binding.node` + +通过上述操作，即可成功安装项目对应依赖，[参考](https://blog.csdn.net/Newz0722/article/details/107046127) + +## 2024-07-03 + boolean、number、string、undefined、null、symbol、bigint、object defineEmits({