mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-18 06:34:42 +08:00
chore: ESLint Flat Config (#834)
* chore: eslint flat config * chore: format * update according to review * chore: remove prettier config and format * fix: move handler to script to bypass eslint * chore: config eslint for lang=js block * docs: add surrounding empty lines for code block * chore: also minify css in csp build * chore: publint
This commit is contained in:
Yue JIN
@ -1 +0,0 @@
|
||||
dist
|
||||
@ -1,20 +0,0 @@
|
||||
{
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/eslint-config-typescript",
|
||||
"@vue/eslint-config-prettier/skip-formatting"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020,
|
||||
"parser": "@typescript-eslint/parser"
|
||||
},
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"vue/multi-word-component-names": "off"
|
||||
}
|
||||
}
|
||||
1
.github/ISSUE_TEMPLATE.md
vendored
1
.github/ISSUE_TEMPLATE.md
vendored
@ -29,7 +29,6 @@ Problems about ECharts itself are not handled in this repo. / 本 repo 不负责
|
||||
|
||||
> eg. 6.0.0-beta.5
|
||||
|
||||
|
||||
## Reproduction link / 复现链接
|
||||
|
||||
**For bug reports, please provide the steps to reproduce and if possible a minimal demo of the problem. Please paste the link to your CodeSandbox demo below: ([Vue 3 template](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 template](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue))**
|
||||
|
||||
2
.prettierignore
Normal file
2
.prettierignore
Normal file
@ -0,0 +1,2 @@
|
||||
pnpm-lock.yaml
|
||||
demo/data/*.json
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"trailingComma": "none",
|
||||
"arrowParens": "avoid"
|
||||
}
|
||||
330
CHANGELOG.md
330
CHANGELOG.md
@ -1,481 +1,483 @@
|
||||
## 7.0.3
|
||||
|
||||
* Fixed type for `autoresize` (again).
|
||||
- Fixed type for `autoresize` (again).
|
||||
|
||||
## 7.0.2
|
||||
|
||||
* Fixed style injection regression (#805).
|
||||
- Fixed style injection regression (#805).
|
||||
|
||||
## 7.0.1
|
||||
|
||||
* Fixed type for `autoresize`.
|
||||
- Fixed type for `autoresize`.
|
||||
|
||||
## 7.0.0
|
||||
|
||||
> Other prerelease changes:
|
||||
> * [7.0.0-beta.0](#700-beta0)
|
||||
>
|
||||
> - [7.0.0-beta.0](#700-beta0)
|
||||
|
||||
* Fixed types for events.
|
||||
- Fixed types for events.
|
||||
|
||||
## 7.0.0-beta.0
|
||||
|
||||
* Upgraded to ESM.
|
||||
* Removed the `postinstall` script.
|
||||
* API remains the same.
|
||||
- Upgraded to ESM.
|
||||
- Removed the `postinstall` script.
|
||||
- API remains the same.
|
||||
|
||||
### Breaking changes
|
||||
|
||||
* Peer deps for `echarts` is upgraded to `^5.5.1`.
|
||||
* Dropped support for browsers without `ResizeObserver`. Can work with [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill).
|
||||
* Dropped support for Vue < 2.7.
|
||||
* Dropped CJS outputs.
|
||||
* Dropped extra wrapper element so that you should no longer set `padding` on the component root.
|
||||
* For strict CSP usage, `vue-echarts/csp` should now be used as the entry point and `vue-echarts/csp/style.css` should be included manually.
|
||||
- Peer deps for `echarts` is upgraded to `^5.5.1`.
|
||||
- Dropped support for browsers without `ResizeObserver`. Can work with [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill).
|
||||
- Dropped support for Vue < 2.7.
|
||||
- Dropped CJS outputs.
|
||||
- Dropped extra wrapper element so that you should no longer set `padding` on the component root.
|
||||
- For strict CSP usage, `vue-echarts/csp` should now be used as the entry point and `vue-echarts/csp/style.css` should be included manually.
|
||||
|
||||
## 6.7.3
|
||||
|
||||
* Fixed that `padding` on the component root doesn't work.
|
||||
- Fixed that `padding` on the component root doesn't work.
|
||||
|
||||
## 6.7.2
|
||||
|
||||
* Fixed that charts inside `<keep-alive>` failed to display after activation.
|
||||
- Fixed that charts inside `<keep-alive>` failed to display after activation.
|
||||
|
||||
## 6.7.1
|
||||
|
||||
* Fixed that native events won't actually trigger.
|
||||
- Fixed that native events won't actually trigger.
|
||||
|
||||
## 6.7.0
|
||||
|
||||
* Added supports for native DOM events binding with the `native:` prefix.
|
||||
- Added supports for native DOM events binding with the `native:` prefix.
|
||||
|
||||
## 6.6.10
|
||||
|
||||
* Fixed that `autoresize` doesn't work when reducing the height or the root element.
|
||||
- Fixed that `autoresize` doesn't work when reducing the height or the root element.
|
||||
|
||||
## 6.6.9
|
||||
|
||||
* Fixed that the chart may not be the same size as the component root element ([#761](https://github.com/ecomfe/vue-echarts/issues/761)).
|
||||
- Fixed that the chart may not be the same size as the component root element ([#761](https://github.com/ecomfe/vue-echarts/issues/761)).
|
||||
|
||||
## 6.6.8
|
||||
|
||||
* Fixed the postinstall script to patch the correct `types` entry for Vue 2.7.
|
||||
- Fixed the postinstall script to patch the correct `types` entry for Vue 2.7.
|
||||
|
||||
## 6.6.7
|
||||
|
||||
* Added missing type file for Vue 2.7.
|
||||
- Added missing type file for Vue 2.7.
|
||||
|
||||
## 6.6.6
|
||||
|
||||
* Fixed types for Vue < 2.7.
|
||||
- Fixed types for Vue < 2.7.
|
||||
|
||||
## 6.6.5
|
||||
|
||||
* Fixed type for `option` regressed in v6.6.2.
|
||||
- Fixed type for `option` regressed in v6.6.2.
|
||||
|
||||
## 6.6.4
|
||||
|
||||
* Fixed style regression introduced by v6.6.3.
|
||||
- Fixed style regression introduced by v6.6.3.
|
||||
|
||||
## 6.6.3
|
||||
|
||||
* Fixed inner wrapper styles.
|
||||
- Fixed inner wrapper styles.
|
||||
|
||||
## 6.6.2
|
||||
|
||||
* Fixed that tooltips may affected by internal styling by VueECharts.
|
||||
- Fixed that tooltips may affected by internal styling by VueECharts.
|
||||
|
||||
## 6.6.1
|
||||
|
||||
* Make `padding` work out-of-the-box.
|
||||
- Make `padding` work out-of-the-box.
|
||||
|
||||
## 6.6.0
|
||||
|
||||
* Added support for `autoresize` accepting an options object to specify custom throttle delay or resize callback.
|
||||
- Added support for `autoresize` accepting an options object to specify custom throttle delay or resize callback.
|
||||
|
||||
## 6.5.5
|
||||
|
||||
* Removed the custom element registration enhancement for strict CSP builds so that they won't contain `new Function`.
|
||||
- Removed the custom element registration enhancement for strict CSP builds so that they won't contain `new Function`.
|
||||
|
||||
## 6.5.4
|
||||
|
||||
* Cleaned up the `console.log` call sneaked in by mistake.
|
||||
- Cleaned up the `console.log` call sneaked in by mistake.
|
||||
|
||||
## 6.5.3
|
||||
|
||||
* Fixed default behavior for `notMerge` option (#691).
|
||||
- Fixed default behavior for `notMerge` option (#691).
|
||||
|
||||
## 6.5.2
|
||||
|
||||
* Added `dist/csp/*` to support strict CSP with extracted CSS file.
|
||||
- Added `dist/csp/*` to support strict CSP with extracted CSS file.
|
||||
|
||||
## 6.5.1
|
||||
|
||||
* Fixed types for mouse events.
|
||||
- Fixed types for mouse events.
|
||||
|
||||
## 6.5.0
|
||||
|
||||
* Use more precise typings for all event params.
|
||||
* Updated peer deps for `echarts` to `^5.4.1`.
|
||||
- Use more precise typings for all event params.
|
||||
- Updated peer deps for `echarts` to `^5.4.1`.
|
||||
|
||||
## 6.4.1
|
||||
|
||||
* Improve typings for mouse event params.
|
||||
- Improve typings for mouse event params.
|
||||
|
||||
## 6.4.0
|
||||
|
||||
* Delay the disposal of the ECharts instance to the moment the element is disconnected from the DOM if possible (#433).
|
||||
- Delay the disposal of the ECharts instance to the moment the element is disconnected from the DOM if possible (#433).
|
||||
|
||||
## 6.3.3
|
||||
|
||||
* Make autoresize work for grid layout by default (#675).
|
||||
- Make autoresize work for grid layout by default (#675).
|
||||
|
||||
## 6.3.2
|
||||
|
||||
* Added basic types for events (only event names).
|
||||
- Added basic types for events (only event names).
|
||||
|
||||
## 6.3.1
|
||||
|
||||
* Revert the style change to prevent tooltips from being clipped.
|
||||
- Revert the style change to prevent tooltips from being clipped.
|
||||
|
||||
## 6.3.0
|
||||
|
||||
* Injected values can now be wrapped in an object so that they can be reactive in Vue 2.
|
||||
- Injected values can now be wrapped in an object so that they can be reactive in Vue 2.
|
||||
|
||||
## 6.2.4
|
||||
|
||||
* Fixed that attributes were not outputted onto the chart root element for Vue 2 (#670).
|
||||
- Fixed that attributes were not outputted onto the chart root element for Vue 2 (#670).
|
||||
|
||||
## 6.2.3
|
||||
|
||||
* Fixed the problem that `v-on` stops working after upgrading to `vue@2.7.x`.
|
||||
- Fixed the problem that `v-on` stops working after upgrading to `vue@2.7.x`.
|
||||
|
||||
## 6.2.2
|
||||
|
||||
* Improve types for `update-options`.
|
||||
- Improve types for `update-options`.
|
||||
|
||||
## 6.2.1
|
||||
|
||||
* Improved types for provide/inject API.
|
||||
- Improved types for provide/inject API.
|
||||
|
||||
## 6.2.0
|
||||
|
||||
* Added support for Vue 2.7+.
|
||||
- Added support for Vue 2.7+.
|
||||
|
||||
## 6.1.0
|
||||
|
||||
* Added support for `.once` event modifier.
|
||||
- Added support for `.once` event modifier.
|
||||
|
||||
## 6.0.3
|
||||
|
||||
* Improved typings for Vue 2 version.
|
||||
- Improved typings for Vue 2 version.
|
||||
|
||||
## 6.0.2
|
||||
|
||||
* Make `notMerge` option still respect `update-options`.
|
||||
* The default behavior of `notMerge` now revert to checking if there is a reference change for the `option` prop.
|
||||
- Make `notMerge` option still respect `update-options`.
|
||||
- The default behavior of `notMerge` now revert to checking if there is a reference change for the `option` prop.
|
||||
|
||||
## 6.0.1
|
||||
|
||||
* Update should always be `notMerge: true`.
|
||||
* Update dependency version for vue-demi.
|
||||
- Update should always be `notMerge: true`.
|
||||
- Update dependency version for vue-demi.
|
||||
|
||||
## 6.0.0
|
||||
|
||||
* Update dependency versions.
|
||||
- Update dependency versions.
|
||||
|
||||
## 6.0.0-rc.6
|
||||
|
||||
* Revert the change of `updateOptions.lazyUpdate`. It defaults to `false` again.
|
||||
* Fixed the occasional error caused by the internal implementation of ECharts.
|
||||
* Removed unexpected `console.log` call.
|
||||
- Revert the change of `updateOptions.lazyUpdate`. It defaults to `false` again.
|
||||
- Fixed the occasional error caused by the internal implementation of ECharts.
|
||||
- Removed unexpected `console.log` call.
|
||||
|
||||
## 6.0.0-rc.5
|
||||
|
||||
* Changed `updateOptions.lazyUpdate` to `true` by default. ([#533](https://github.com/ecomfe/vue-echarts/issues/533#issuecomment-809883909))
|
||||
* Only perform an additional `resize` call after init within a task. ([#533](https://github.com/ecomfe/vue-echarts/issues/533#issuecomment-809883909))
|
||||
* The `.chart` getter API now works for Vue 2. (#542)
|
||||
- Changed `updateOptions.lazyUpdate` to `true` by default. ([#533](https://github.com/ecomfe/vue-echarts/issues/533#issuecomment-809883909))
|
||||
- Only perform an additional `resize` call after init within a task. ([#533](https://github.com/ecomfe/vue-echarts/issues/533#issuecomment-809883909))
|
||||
- The `.chart` getter API now works for Vue 2. (#542)
|
||||
|
||||
## 6.0.0-rc.4
|
||||
|
||||
* Fix type error for `Vue2` reference.
|
||||
- Fix type error for `Vue2` reference.
|
||||
|
||||
## 6.0.0-rc.3
|
||||
|
||||
* Add missing types file for Vue 2.
|
||||
- Add missing types file for Vue 2.
|
||||
|
||||
## 6.0.0-rc.2
|
||||
|
||||
* Fix postinstall script.
|
||||
- Fix postinstall script.
|
||||
|
||||
## 6.0.0-rc.1
|
||||
|
||||
* Move inital resize timing earlier into microtasks so that minimize visual layout shift.
|
||||
* Add a postinstall script to bail out type check for Vue 2 environment.
|
||||
- Move inital resize timing earlier into microtasks so that minimize visual layout shift.
|
||||
- Add a postinstall script to bail out type check for Vue 2 environment.
|
||||
|
||||
## 6.0.0-beta.7
|
||||
|
||||
* Ensure charts fit to container after the next UI render. (#518)
|
||||
- Ensure charts fit to container after the next UI render. (#518)
|
||||
|
||||
## 6.0.0-beta.6
|
||||
|
||||
* Ensure VCA is always installed.
|
||||
- Ensure VCA is always installed.
|
||||
|
||||
## 6.0.0-beta.5
|
||||
|
||||
* Remove deps for `mergeProps` as it's not yet implemented in `@vue/composition-api`. (#519)
|
||||
- Remove deps for `mergeProps` as it's not yet implemented in `@vue/composition-api`. (#519)
|
||||
|
||||
## 6.0.0-beta.4
|
||||
|
||||
* Suppress native events and only handles chart events. (#516)
|
||||
- Suppress native events and only handles chart events. (#516)
|
||||
|
||||
## 6.0.0-beta.3
|
||||
|
||||
* Update `vue-demi` version to fix type error.
|
||||
- Update `vue-demi` version to fix type error.
|
||||
|
||||
## 6.0.0-beta.2
|
||||
|
||||
* Fix injection keys for UMD bundle.
|
||||
* Add `vue-demi` to UMD bundle.
|
||||
- Fix injection keys for UMD bundle.
|
||||
- Add `vue-demi` to UMD bundle.
|
||||
|
||||
## 6.0.0-beta.1
|
||||
|
||||
* Use a custom element for the root element to make default style less specific.
|
||||
- Use a custom element for the root element to make default style less specific.
|
||||
|
||||
## 6.0.0-alpha.5
|
||||
|
||||
* Fix event support for Vue 2.
|
||||
- Fix event support for Vue 2.
|
||||
|
||||
## 6.0.0-alpha.4
|
||||
|
||||
* Add missing injection key exports.
|
||||
- Add missing injection key exports.
|
||||
|
||||
## 6.0.0-alpha.3
|
||||
|
||||
* Add missing dependencies for `vue-demi` and `resize-detector`.
|
||||
- Add missing dependencies for `vue-demi` and `resize-detector`.
|
||||
|
||||
## 6.0.0-alpha.2
|
||||
|
||||
* Fix bundling for UMD build.
|
||||
- Fix bundling for UMD build.
|
||||
|
||||
## 6.0.0-alpha.1
|
||||
|
||||
### Breaking changes
|
||||
|
||||
* Update peer dependency for `echarts` to `^5.0.2`.
|
||||
* Update peer dependency for `vue` to `^2.6.11 || ^3.0.0`.
|
||||
* Now `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
|
||||
* `options` is renamed to **`option`** to align with ECharts itself.
|
||||
* Updating `option` will respect **`update-options`** configs instead of checking reference change.
|
||||
* `watch-shallow` is removed. Use **`manual-update`** for performance critical scenarios.
|
||||
* `mergeOptions` is renamed to **`setOption`** to align with ECharts itself.
|
||||
* `showLoading` and `hideLoading` is removed. Use the **`loading` and `loading-options`** props instead.
|
||||
* `appendData` is removed. (Due to ECharts 5's breaking change.)
|
||||
* All static methods are removed from `vue-echarts`. Use those methods from `echarts` directly.
|
||||
* Computed getters (`width`, `height`, `isDisposed` and `computedOptions`) are removed. Use the **`getWidth`, `getHeight`, `isDisposed` and `getOption`** methods instead.
|
||||
* Now the root element of the component have **`100%×100%`** size by default, instead of `600×400`.
|
||||
- Update peer dependency for `echarts` to `^5.0.2`.
|
||||
- Update peer dependency for `vue` to `^2.6.11 || ^3.0.0`.
|
||||
- Now `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
|
||||
- `options` is renamed to **`option`** to align with ECharts itself.
|
||||
- Updating `option` will respect **`update-options`** configs instead of checking reference change.
|
||||
- `watch-shallow` is removed. Use **`manual-update`** for performance critical scenarios.
|
||||
- `mergeOptions` is renamed to **`setOption`** to align with ECharts itself.
|
||||
- `showLoading` and `hideLoading` is removed. Use the **`loading` and `loading-options`** props instead.
|
||||
- `appendData` is removed. (Due to ECharts 5's breaking change.)
|
||||
- All static methods are removed from `vue-echarts`. Use those methods from `echarts` directly.
|
||||
- Computed getters (`width`, `height`, `isDisposed` and `computedOptions`) are removed. Use the **`getWidth`, `getHeight`, `isDisposed` and `getOption`** methods instead.
|
||||
- Now the root element of the component have **`100%×100%`** size by default, instead of `600×400`.
|
||||
|
||||
### New features
|
||||
|
||||
* ECharts 5 support.
|
||||
* Vue 3 support.
|
||||
* TypeScript support.
|
||||
* Add new `update-options` prop and support providing default from context.
|
||||
* Add new `loading` prop and support providing default from context.
|
||||
* Add new `loading-options` prop and support providing default from context.
|
||||
* Support providing default from context for the `theme` prop.
|
||||
- ECharts 5 support.
|
||||
- Vue 3 support.
|
||||
- TypeScript support.
|
||||
- Add new `update-options` prop and support providing default from context.
|
||||
- Add new `loading` prop and support providing default from context.
|
||||
- Add new `loading-options` prop and support providing default from context.
|
||||
- Support providing default from context for the `theme` prop.
|
||||
|
||||
## 5.0.0-beta.0
|
||||
|
||||
* Update peer dependency for `vue` to `^2.4.0`. **BREAKING**
|
||||
- Update peer dependency for `vue` to `^2.4.0`. **BREAKING**
|
||||
|
||||
## 4.1.0
|
||||
|
||||
* Fix the problem that `mergeOptions` didn't use the correct options if the instance is inited on-the-fly.
|
||||
* Expose ZRender events via `zr:` prefixed events.
|
||||
* Update to `echarts@4.5.0` (only affects the bundled version).
|
||||
- Fix the problem that `mergeOptions` didn't use the correct options if the instance is inited on-the-fly.
|
||||
- Expose ZRender events via `zr:` prefixed events.
|
||||
- Update to `echarts@4.5.0` (only affects the bundled version).
|
||||
|
||||
## 4.0.4
|
||||
|
||||
* Update to `echarts@4.3.0` (only affects the bundled version).
|
||||
- Update to `echarts@4.3.0` (only affects the bundled version).
|
||||
|
||||
## 4.0.3
|
||||
|
||||
* Update to `resize-detector@0.1.10`.
|
||||
- Update to `resize-detector@0.1.10`.
|
||||
|
||||
## 4.0.2
|
||||
|
||||
* Make `manual-update` truely responsive.
|
||||
- Make `manual-update` truely responsive.
|
||||
|
||||
## 4.0.1
|
||||
|
||||
* Fix `legendscroll` event.
|
||||
- Fix `legendscroll` event.
|
||||
|
||||
## 4.0.0
|
||||
|
||||
* Release 4.0.0.
|
||||
- Release 4.0.0.
|
||||
|
||||
## 4.0.0-beta.1
|
||||
|
||||
* Fix autoresize.
|
||||
- Fix autoresize.
|
||||
|
||||
## 4.0.0-beta.0
|
||||
|
||||
* Move `echarts` into `peerDependencies`. **BREAKING**
|
||||
* Rename `auto-resize` to `autoresize`. **BREAKING**
|
||||
* Point `module` entry to the source version. **BREAKING**
|
||||
* Switch to Vue CLI 3 for demo.
|
||||
- Move `echarts` into `peerDependencies`. **BREAKING**
|
||||
- Rename `auto-resize` to `autoresize`. **BREAKING**
|
||||
- Point `module` entry to the source version. **BREAKING**
|
||||
- Switch to Vue CLI 3 for demo.
|
||||
|
||||
## 3.1.2
|
||||
|
||||
* Fix the problem that `setOption` is always called with `notMerge: true`.
|
||||
- Fix the problem that `setOption` is always called with `notMerge: true`.
|
||||
|
||||
## 3.1.1
|
||||
|
||||
* Fix the problem that `options` are not watched as expected.
|
||||
- Fix the problem that `options` are not watched as expected.
|
||||
|
||||
## 3.1.0
|
||||
|
||||
* Add `manual-update` prop to handle performance critical scenarios.
|
||||
* Deprecate `watch-shallow` prop as it was actually not working as expected.
|
||||
* Fix the computed getters by using `Object.defineProperties` directly instead of Vue's `computed` as it no longer works as expected after Vue 2.0.
|
||||
* Remove `chart` from `data` to gain a performance boost.
|
||||
- Add `manual-update` prop to handle performance critical scenarios.
|
||||
- Deprecate `watch-shallow` prop as it was actually not working as expected.
|
||||
- Fix the computed getters by using `Object.defineProperties` directly instead of Vue's `computed` as it no longer works as expected after Vue 2.0.
|
||||
- Remove `chart` from `data` to gain a performance boost.
|
||||
|
||||
## 3.0.9
|
||||
|
||||
* Update to `resize-detector@0.1.7` to better handle initial resize callback.
|
||||
- Update to `resize-detector@0.1.7` to better handle initial resize callback.
|
||||
|
||||
## 3.0.8
|
||||
|
||||
* Add new events and API to adapt the latest version of ECharts.
|
||||
- Add new events and API to adapt the latest version of ECharts.
|
||||
|
||||
## 3.0.7
|
||||
|
||||
* Only apply optimization introduce in last version for charts resize from `0` area.
|
||||
- Only apply optimization introduce in last version for charts resize from `0` area.
|
||||
|
||||
## 3.0.6
|
||||
|
||||
* Optimize `auto-resize` for initially hidden (`display: none`) charts.
|
||||
- Optimize `auto-resize` for initially hidden (`display: none`) charts.
|
||||
|
||||
## 3.0.5
|
||||
|
||||
* Update to `resize-detector@0.1.5`.
|
||||
- Update to `resize-detector@0.1.5`.
|
||||
|
||||
## 3.0.4
|
||||
|
||||
* Fix misused `MutationObserver` (#200).
|
||||
- Fix misused `MutationObserver` (#200).
|
||||
|
||||
## 3.0.3
|
||||
|
||||
* Update to `resize-detector@0.1.2`.
|
||||
- Update to `resize-detector@0.1.2`.
|
||||
|
||||
## 3.0.2
|
||||
|
||||
* Update ECharts to `4.0.2`.
|
||||
- Update ECharts to `4.0.2`.
|
||||
|
||||
## 3.0.1
|
||||
|
||||
* Fix npm distribution.
|
||||
- Fix npm distribution.
|
||||
|
||||
## 3.0.0
|
||||
|
||||
* Added support for ECharts 4.
|
||||
* `auto-resize` now listens to element size change instead of window.
|
||||
* Remove deprecated `chart` prefixed events.
|
||||
- Added support for ECharts 4.
|
||||
- `auto-resize` now listens to element size change instead of window.
|
||||
- Remove deprecated `chart` prefixed events.
|
||||
|
||||
## 2.6.0
|
||||
|
||||
* Added `watchShallow` prop to manually disable deep watch on `options` to optimize performance for charts with large amout of data.
|
||||
* Made all props reactive.
|
||||
* Updated ECharts dependency to `^3.8.5`.
|
||||
- Added `watchShallow` prop to manually disable deep watch on `options` to optimize performance for charts with large amout of data.
|
||||
- Made all props reactive.
|
||||
- Updated ECharts dependency to `^3.8.5`.
|
||||
|
||||
## 2.5.1
|
||||
|
||||
* Updated ECharts dependency to `3.8.2`+ to fix module breaking change introduced in `3.8.0`.
|
||||
- Updated ECharts dependency to `3.8.2`+ to fix module breaking change introduced in `3.8.0`.
|
||||
|
||||
## 2.5.0
|
||||
|
||||
* Fixed collision with Vue's internal methods by removing `_` prefix.
|
||||
* `mergeOptions` now accept same arguments as ECharts' `setOption` method.
|
||||
* Updated ECharts dependency to 3.7.2+.
|
||||
- Fixed collision with Vue's internal methods by removing `_` prefix.
|
||||
- `mergeOptions` now accept same arguments as ECharts' `setOption` method.
|
||||
- Updated ECharts dependency to 3.7.2+.
|
||||
|
||||
## 2.4.1
|
||||
|
||||
* Made `theme` reactive.
|
||||
* Added `focusnodeadjacency` & `unfocusnodeadjacency` events.
|
||||
* Fixed the problem that charts won't refresh after `keep-alive` components are activated.
|
||||
- Made `theme` reactive.
|
||||
- Added `focusnodeadjacency` & `unfocusnodeadjacency` events.
|
||||
- Fixed the problem that charts won't refresh after `keep-alive` components are activated.
|
||||
|
||||
## 2.4.0
|
||||
|
||||
* Add `computedOptions`.
|
||||
- Add `computedOptions`.
|
||||
|
||||
## 2.3.9
|
||||
|
||||
* Replace publish npm scripts with shell commands to prevent failure upon npm install.
|
||||
- Replace publish npm scripts with shell commands to prevent failure upon npm install.
|
||||
|
||||
## 2.3.8
|
||||
|
||||
* Fixed the problem that styles are missing for precompiled version.
|
||||
- Fixed the problem that styles are missing for precompiled version.
|
||||
|
||||
## 2.3.7
|
||||
|
||||
* Switch back to `Vue.util.warn`.
|
||||
* Switch build tool to rollup.
|
||||
- Switch back to `Vue.util.warn`.
|
||||
- Switch build tool to rollup.
|
||||
|
||||
## 2.3.6
|
||||
|
||||
* Hot fix for last version. Use `console.warn` temporarily.
|
||||
- Hot fix for last version. Use `console.warn` temporarily.
|
||||
|
||||
## 2.3.5
|
||||
|
||||
* Mark Vue as an external dependency in webpack config.
|
||||
- Mark Vue as an external dependency in webpack config.
|
||||
|
||||
## 2.3.4
|
||||
|
||||
* Use `Vue.util.warn` directly.
|
||||
- Use `Vue.util.warn` directly.
|
||||
|
||||
## 2.3.3
|
||||
|
||||
* Fix NPM package.
|
||||
- Fix NPM package.
|
||||
|
||||
## 2.3.2
|
||||
|
||||
* Fix the implementation of `disconnect`.
|
||||
- Fix the implementation of `disconnect`.
|
||||
|
||||
## 2.3.1
|
||||
|
||||
* Correctly dispose ECharts instance before component is destroyed.
|
||||
* Fix the problem that `group` is not properly initialized.
|
||||
- Correctly dispose ECharts instance before component is destroyed.
|
||||
- Fix the problem that `group` is not properly initialized.
|
||||
|
||||
## 2.3.0
|
||||
|
||||
* As native events are now not listened by `v-on` in Vue.js 2.0, change mouse events name to original ones (keeping emitting `chart*` events for now).
|
||||
* Fix getter for `width` / `height` / `isDisposed`.
|
||||
* `options` is now optional to initialize the component and the chart will be initialized automatically when `options` is set.
|
||||
- As native events are now not listened by `v-on` in Vue.js 2.0, change mouse events name to original ones (keeping emitting `chart*` events for now).
|
||||
- Fix getter for `width` / `height` / `isDisposed`.
|
||||
- `options` is now optional to initialize the component and the chart will be initialized automatically when `options` is set.
|
||||
|
||||
## 2.2.0
|
||||
|
||||
* Add `auto-resize`.
|
||||
* Refined demo.
|
||||
- Add `auto-resize`.
|
||||
- Refined demo.
|
||||
|
||||
## 2.1.0
|
||||
|
||||
* Fix `disconnect`.
|
||||
* When importing `ECharts.vue`, only ECharts core will be imported instead of the whole ECharts bundle.
|
||||
- Fix `disconnect`.
|
||||
- When importing `ECharts.vue`, only ECharts core will be imported instead of the whole ECharts bundle.
|
||||
|
||||
## 2.0.0
|
||||
|
||||
* Update Vue dependency to `2.0.1`.
|
||||
* Add support for new methods & events for ECharts.
|
||||
* Fix missing arguments for some APIs.
|
||||
- Update Vue dependency to `2.0.1`.
|
||||
- Add support for new methods & events for ECharts.
|
||||
- Fix missing arguments for some APIs.
|
||||
|
||||
## 0.1.2
|
||||
|
||||
* Update ECharts version.
|
||||
* Remove unnecessary files from NPM package.
|
||||
- Update ECharts version.
|
||||
- Remove unnecessary files from NPM package.
|
||||
|
||||
## 0.1.1
|
||||
|
||||
* Fix usage in README.
|
||||
- Fix usage in README.
|
||||
|
||||
## 0.1.0
|
||||
|
||||
* First version.
|
||||
- First version.
|
||||
|
||||
36
README.md
36
README.md
@ -33,7 +33,7 @@ import { PieChart } from "echarts/charts";
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { ref, provide } from "vue";
|
||||
@ -43,7 +43,7 @@ use([
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, "dark");
|
||||
@ -51,16 +51,16 @@ provide(THEME_KEY, "dark");
|
||||
const option = ref({
|
||||
title: {
|
||||
text: "Traffic Sources",
|
||||
left: "center"
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
|
||||
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -73,17 +73,17 @@ const option = ref({
|
||||
{ value: 310, name: "Email" },
|
||||
{ value: 234, name: "Ad Networks" },
|
||||
{ value: 135, name: "Video Ads" },
|
||||
{ value: 1548, name: "Search Engines" }
|
||||
{ value: 1548, name: "Search Engines" },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -117,11 +117,13 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
|
||||
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
|
||||
|
||||
<!-- vue3Scripts:start -->
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
|
||||
```
|
||||
|
||||
<!-- vue3Scripts:end -->
|
||||
|
||||
```js
|
||||
@ -263,17 +265,17 @@ Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-opt
|
||||
<summary>Composition API</summary>
|
||||
|
||||
```js
|
||||
import { THEME_KEY } from 'vue-echarts'
|
||||
import { provide } from 'vue'
|
||||
import { THEME_KEY } from "vue-echarts";
|
||||
import { provide } from "vue";
|
||||
|
||||
provide(THEME_KEY, 'dark')
|
||||
provide(THEME_KEY, "dark");
|
||||
|
||||
// or provide a ref
|
||||
const theme = ref('dark')
|
||||
provide(THEME_KEY, theme)
|
||||
const theme = ref("dark");
|
||||
provide(THEME_KEY, theme);
|
||||
|
||||
// getter is also supported
|
||||
provide(THEME_KEY, () => theme.value)
|
||||
provide(THEME_KEY, () => theme.value);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -33,7 +33,7 @@ import { PieChart } from "echarts/charts";
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { ref, provide } from "vue";
|
||||
@ -43,7 +43,7 @@ use([
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, "dark");
|
||||
@ -51,16 +51,16 @@ provide(THEME_KEY, "dark");
|
||||
const option = ref({
|
||||
title: {
|
||||
text: "Traffic Sources",
|
||||
left: "center"
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
|
||||
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -73,17 +73,17 @@ const option = ref({
|
||||
{ value: 310, name: "Email" },
|
||||
{ value: 234, name: "Ad Networks" },
|
||||
{ value: 135, name: "Video Ads" },
|
||||
{ value: 1548, name: "Search Engines" }
|
||||
{ value: 1548, name: "Search Engines" },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -117,11 +117,13 @@ import "echarts";
|
||||
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
|
||||
|
||||
<!-- vue3Scripts:start -->
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
|
||||
```
|
||||
|
||||
<!-- vue3Scripts:end -->
|
||||
|
||||
```js
|
||||
@ -263,17 +265,17 @@ Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options
|
||||
<summary>组合式 API</summary>
|
||||
|
||||
```js
|
||||
import { THEME_KEY } from 'vue-echarts'
|
||||
import { provide } from 'vue'
|
||||
import { THEME_KEY } from "vue-echarts";
|
||||
import { provide } from "vue";
|
||||
|
||||
provide(THEME_KEY, 'dark')
|
||||
provide(THEME_KEY, "dark");
|
||||
|
||||
// or provide a ref
|
||||
const theme = ref('dark')
|
||||
provide(THEME_KEY, theme)
|
||||
const theme = ref("dark");
|
||||
provide(THEME_KEY, theme);
|
||||
|
||||
// getter is also supported
|
||||
provide(THEME_KEY, () => theme.value)
|
||||
provide(THEME_KEY, () => theme.value);
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -334,8 +336,6 @@ export default {
|
||||
|
||||
静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。
|
||||
|
||||
|
||||
|
||||
## CSP: `style-src` 或 `style-src-elem`
|
||||
|
||||
如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `vue-echarts/csp` 代替 `vue-echarts`，并手动引入 `vue-echarts/csp/style.css`。
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
watch,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
nextTick
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { useLocalStorage } from "@vueuse/core";
|
||||
import "highlight.js/styles/github.css";
|
||||
@ -29,7 +29,7 @@ const codegenOptions = useLocalStorage("ve.codegenOptions", {
|
||||
multiline: false,
|
||||
maxLen: 80,
|
||||
semi: false,
|
||||
includeType: false
|
||||
includeType: false,
|
||||
});
|
||||
|
||||
const props = defineProps({ open: Boolean, renderer: String });
|
||||
@ -38,6 +38,10 @@ const emit = defineEmits(["update:open"]);
|
||||
const dialog = ref(null);
|
||||
let clickFrom = null;
|
||||
|
||||
function onMousedown(e) {
|
||||
clickFrom = e.target;
|
||||
}
|
||||
|
||||
function closeFromOutside() {
|
||||
if (dialog.value?.contains(clickFrom)) {
|
||||
return;
|
||||
@ -53,7 +57,7 @@ const renderer = ref(props.renderer);
|
||||
const source = ref(null);
|
||||
watch(
|
||||
() => props.open,
|
||||
async val => {
|
||||
async (val) => {
|
||||
if (val) {
|
||||
renderer.value = props.renderer;
|
||||
}
|
||||
@ -64,7 +68,7 @@ watch(
|
||||
return;
|
||||
}
|
||||
source.value?.focus();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const copied = ref(false);
|
||||
@ -119,7 +123,7 @@ onMounted(async () => {
|
||||
source.value?.focus();
|
||||
});
|
||||
|
||||
watch(optionCode, async val => {
|
||||
watch(optionCode, async (val) => {
|
||||
try {
|
||||
transformedCode.value = await transform(`(${val})`, { loader: "ts" });
|
||||
transformErrors.value = [];
|
||||
@ -160,7 +164,7 @@ const importCode = computed(() => {
|
||||
try {
|
||||
return getImportsFromOption(eval(transformedCode.value.code), {
|
||||
renderer: renderer.value,
|
||||
...codegenOptions.value
|
||||
...codegenOptions.value,
|
||||
});
|
||||
} catch (e) {
|
||||
return `/* Invalid ECharts option */
|
||||
@ -209,7 +213,7 @@ onBeforeUnmount(() => {
|
||||
<aside
|
||||
class="modal"
|
||||
:class="{ open: props.open }"
|
||||
@mousedown="clickFrom = $event.target"
|
||||
@mousedown="onMousedown"
|
||||
@click="closeFromOutside"
|
||||
@keydown.esc="close"
|
||||
>
|
||||
|
||||
@ -23,7 +23,7 @@ use([CanvasRenderer, SVGRenderer]);
|
||||
|
||||
const params = useUrlSearchParams();
|
||||
const initOptions = computed(() => ({
|
||||
renderer: params.renderer || "canvas"
|
||||
renderer: params.renderer || "canvas",
|
||||
}));
|
||||
|
||||
provide(INIT_OPTIONS_KEY, initOptions);
|
||||
@ -39,7 +39,7 @@ function openCodegen() {
|
||||
track("codegen", { from: "click" });
|
||||
}
|
||||
|
||||
watch(codeOpen, open => {
|
||||
watch(codeOpen, (open) => {
|
||||
if (open) {
|
||||
location.hash = "#codegen";
|
||||
} else {
|
||||
@ -94,7 +94,7 @@ watch(codeOpen, open => {
|
||||
<aside class="renderer">
|
||||
<button
|
||||
:class="{
|
||||
active: initOptions.renderer === 'canvas'
|
||||
active: initOptions.renderer === 'canvas',
|
||||
}"
|
||||
@click="params.renderer = 'canvas'"
|
||||
>
|
||||
@ -102,7 +102,7 @@ watch(codeOpen, open => {
|
||||
</button>
|
||||
<button
|
||||
:class="{
|
||||
active: initOptions.renderer === 'svg'
|
||||
active: initOptions.renderer === 'svg',
|
||||
}"
|
||||
@click="params.renderer = 'svg'"
|
||||
>
|
||||
@ -237,8 +237,9 @@ pre {
|
||||
pre,
|
||||
code,
|
||||
textarea {
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
||||
"Liberation Mono", monospace;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
||||
monospace;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
@ -6,7 +6,7 @@ export default function getData() {
|
||||
return {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
dataset: {
|
||||
dimensions: ["Product", "2015", "2016", "2017"],
|
||||
@ -15,32 +15,32 @@ export default function getData() {
|
||||
Product: "Matcha Latte",
|
||||
2015: random(),
|
||||
2016: random(),
|
||||
2017: random()
|
||||
2017: random(),
|
||||
},
|
||||
{
|
||||
Product: "Milk Tea",
|
||||
2015: random(),
|
||||
2016: random(),
|
||||
2017: random()
|
||||
2017: random(),
|
||||
},
|
||||
{
|
||||
Product: "Cheese Cocoa",
|
||||
2015: random(),
|
||||
2016: random(),
|
||||
2017: random()
|
||||
2017: random(),
|
||||
},
|
||||
{
|
||||
Product: "Walnut Brownie",
|
||||
2015: random(),
|
||||
2016: random(),
|
||||
2017: random()
|
||||
}
|
||||
]
|
||||
2017: random(),
|
||||
},
|
||||
],
|
||||
},
|
||||
xAxis: { type: "category" },
|
||||
yAxis: {},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
|
||||
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
|
||||
};
|
||||
}
|
||||
|
||||
@ -5,38 +5,38 @@ for (let i = 0; i < 16; i++) {
|
||||
Math.random() * 5,
|
||||
Math.random() * 4,
|
||||
Math.random() * 12,
|
||||
Math.round(Math.random() * (symbolCount - 1))
|
||||
Math.round(Math.random() * (symbolCount - 1)),
|
||||
]);
|
||||
}
|
||||
|
||||
const c1 = {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
legend: {
|
||||
top: "3%",
|
||||
data: ["scatter"]
|
||||
data: ["scatter"],
|
||||
},
|
||||
tooltip: {
|
||||
formatter: "{c}"
|
||||
formatter: "{c}",
|
||||
},
|
||||
grid: {
|
||||
top: "30%",
|
||||
right: "18%",
|
||||
bottom: "20%"
|
||||
bottom: "20%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
@ -50,47 +50,47 @@ const c1 = {
|
||||
max: 18,
|
||||
precision: 0,
|
||||
splitNumber: 0,
|
||||
calculable: true
|
||||
}
|
||||
calculable: true,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "scatter",
|
||||
type: "scatter",
|
||||
symbolSize: 30,
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
data: data1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const c2 = {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
legend: {
|
||||
top: "3%",
|
||||
data: ["scatter"]
|
||||
data: ["scatter"],
|
||||
},
|
||||
tooltip: {
|
||||
formatter: "{c}"
|
||||
formatter: "{c}",
|
||||
},
|
||||
grid: {
|
||||
top: "30%",
|
||||
right: "18%",
|
||||
bottom: "20%"
|
||||
bottom: "20%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
@ -103,17 +103,17 @@ const c2 = {
|
||||
max: 18,
|
||||
precision: 0,
|
||||
splitNumber: 0,
|
||||
calculable: true
|
||||
}
|
||||
calculable: true,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "scatter",
|
||||
type: "scatter",
|
||||
symbolSize: 30,
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
data: data1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function getData() {
|
||||
|
||||
@ -9,27 +9,27 @@ export default {
|
||||
data: [0.7, 0.6, 0.55, 0.45],
|
||||
amplitude: 6,
|
||||
outline: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
radius: "60%",
|
||||
color: ["#4fc08d", "#44d64a", "#33c762", "#4acc80"],
|
||||
backgroundStyle: {
|
||||
color: "#fff",
|
||||
borderColor: "#2c3e50",
|
||||
borderWidth: 1
|
||||
borderWidth: 1,
|
||||
},
|
||||
shape: `path://${d}`,
|
||||
label: {
|
||||
normal: {
|
||||
formatter() {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 12,
|
||||
shadowColor: "rgba(0, 0, 0, 0.25)"
|
||||
}
|
||||
}
|
||||
]
|
||||
shadowColor: "rgba(0, 0, 0, 0.25)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -188,7 +188,7 @@ const data = [
|
||||
{ name: "菏泽", value: 194 },
|
||||
{ name: "合肥", value: 229 },
|
||||
{ name: "武汉", value: 273 },
|
||||
{ name: "大庆", value: 279 }
|
||||
{ name: "大庆", value: 279 },
|
||||
];
|
||||
const geoCoordMap = {
|
||||
海门: [121.15, 31.89],
|
||||
@ -380,7 +380,7 @@ const geoCoordMap = {
|
||||
菏泽: [115.480656, 35.23375],
|
||||
合肥: [117.27, 31.86],
|
||||
武汉: [114.31, 30.52],
|
||||
大庆: [125.03, 46.58]
|
||||
大庆: [125.03, 46.58],
|
||||
};
|
||||
|
||||
function convertData(data) {
|
||||
@ -390,7 +390,7 @@ function convertData(data) {
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -401,7 +401,7 @@ export default function getData() {
|
||||
return {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
backgroundColor: "#404a59",
|
||||
title: {
|
||||
@ -411,11 +411,11 @@ export default function getData() {
|
||||
top: "5%",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
@ -423,25 +423,25 @@ export default function getData() {
|
||||
bottom: "5%",
|
||||
data: ["PM2.5"],
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: "china",
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: "#2a333d"
|
||||
}
|
||||
areaColor: "#2a333d",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: "#323c48",
|
||||
borderColor: "#111"
|
||||
borderColor: "#111",
|
||||
},
|
||||
top: "20%",
|
||||
bottom: "7%"
|
||||
bottom: "7%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -449,46 +449,46 @@ export default function getData() {
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
data: convertData(data),
|
||||
symbolSize: val => val[2] / 10,
|
||||
symbolSize: (val) => val[2] / 10,
|
||||
tooltip: {
|
||||
formatter: function (val) {
|
||||
return val.name + ": " + val.value[2];
|
||||
}
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#ddb926"
|
||||
}
|
||||
color: "#ddb926",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Top 5",
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
data: convertData(data.sort((a, b) => b.value - a.value).slice(0, 6)),
|
||||
symbolSize: val => val[2] / 10,
|
||||
symbolSize: (val) => val[2] / 10,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
brushType: "stroke"
|
||||
brushType: "stroke",
|
||||
},
|
||||
emphasis: {
|
||||
scale: true
|
||||
scale: true,
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (val) {
|
||||
return val.name + ": " + val.value[2];
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: "{b}",
|
||||
position: "right",
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f4e925",
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333"
|
||||
shadowColor: "#333",
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
zlevel: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@ -2,22 +2,22 @@ export default function getData() {
|
||||
return {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
title: {
|
||||
text: "Traffic Sources",
|
||||
top: "5%",
|
||||
left: "center"
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
top: "5%",
|
||||
left: "5%",
|
||||
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
|
||||
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -30,16 +30,16 @@ export default function getData() {
|
||||
{ value: 310, name: "Email" },
|
||||
{ value: 234, name: "Ad Networks" },
|
||||
{ value: 135, name: "Video Ads" },
|
||||
{ value: 1548, name: "Search Engines" }
|
||||
{ value: 1548, name: "Search Engines" },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@ -10,33 +10,33 @@ export default function getData() {
|
||||
return {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
title: {
|
||||
text: "Dual Numeric Axis",
|
||||
top: "5%",
|
||||
left: "5%"
|
||||
left: "5%",
|
||||
},
|
||||
legend: {
|
||||
data: ["line"],
|
||||
top: "6%"
|
||||
top: "6%",
|
||||
},
|
||||
polar: {
|
||||
radius: "65%",
|
||||
center: ["50%", "56%"]
|
||||
center: ["50%", "56%"],
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross"
|
||||
}
|
||||
type: "cross",
|
||||
},
|
||||
},
|
||||
angleAxis: {
|
||||
type: "value",
|
||||
startAngle: 0
|
||||
startAngle: 0,
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
min: 0,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -44,9 +44,9 @@ export default function getData() {
|
||||
name: "line",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
data: data
|
||||
}
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
animationDuration: 2000
|
||||
animationDuration: 2000,
|
||||
};
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ export const useScoreStore = defineStore("store", () => {
|
||||
{ name: "Speed", max: 20, value: 18 },
|
||||
{ name: "Strength", max: 20, value: 16 },
|
||||
{ name: "Endurance", max: 20, value: 16 },
|
||||
{ name: "Agility", max: 20, value: 20 }
|
||||
{ name: "Agility", max: 20, value: 20 },
|
||||
]);
|
||||
|
||||
const metrics = computed(() => {
|
||||
@ -20,11 +20,11 @@ export const useScoreStore = defineStore("store", () => {
|
||||
title: {
|
||||
text: "Player Ability",
|
||||
top: "5%",
|
||||
left: "5%"
|
||||
left: "5%",
|
||||
},
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
radar: {
|
||||
indicator: scores.value.map(({ name, max }, index) => {
|
||||
@ -32,15 +32,15 @@ export const useScoreStore = defineStore("store", () => {
|
||||
return { name, max, color: "goldenrod" };
|
||||
}
|
||||
return { name, max };
|
||||
})
|
||||
}),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Value",
|
||||
type: "radar",
|
||||
data: [{ value: scores.value.map(({ value }) => value) }]
|
||||
}
|
||||
]
|
||||
data: [{ value: scores.value.map(({ value }) => value) }],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@ -64,6 +64,6 @@ export const useScoreStore = defineStore("store", () => {
|
||||
getRadarData,
|
||||
increase,
|
||||
isMax,
|
||||
isMin
|
||||
isMin,
|
||||
};
|
||||
});
|
||||
|
||||
@ -20,7 +20,7 @@ const data = [
|
||||
[19349, 69.6, 147568552, "Russia", 1990],
|
||||
[10670, 67.3, 53994605, "Turkey", 1990],
|
||||
[26424, 75.7, 57110117, "United Kingdom", 1990],
|
||||
[37062, 75.4, 252847810, "United States", 1990]
|
||||
[37062, 75.4, 252847810, "United States", 1990],
|
||||
],
|
||||
[
|
||||
[44056, 81.8, 23968973, "Australia", 2015],
|
||||
@ -41,43 +41,43 @@ const data = [
|
||||
[23038, 73.13, 143456918, "Russia", 2015],
|
||||
[19360, 76.5, 78665830, "Turkey", 2015],
|
||||
[38225, 81.4, 64715810, "United Kingdom", 2015],
|
||||
[53354, 79.1, 321773631, "United States", 2015]
|
||||
]
|
||||
[53354, 79.1, 321773631, "United States", 2015],
|
||||
],
|
||||
];
|
||||
|
||||
export default function getData() {
|
||||
return {
|
||||
grid: {
|
||||
top: "25%"
|
||||
top: "25%",
|
||||
},
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300
|
||||
fontWeight: 300,
|
||||
},
|
||||
title: {
|
||||
text: "Life Expectancy vs. GDP by country",
|
||||
top: "5%",
|
||||
left: "5%"
|
||||
left: "5%",
|
||||
},
|
||||
legend: {
|
||||
top: "6%",
|
||||
right: "5%",
|
||||
data: ["1990", "2015"]
|
||||
data: ["1990", "2015"],
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
}
|
||||
}
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
}
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
scale: true
|
||||
scale: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -93,8 +93,8 @@ export default function getData() {
|
||||
formatter({ data }) {
|
||||
return data[3];
|
||||
},
|
||||
position: "top"
|
||||
}
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
@ -103,14 +103,14 @@ export default function getData() {
|
||||
color: new graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(251, 118, 123)"
|
||||
color: "rgb(251, 118, 123)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgb(204, 46, 72)"
|
||||
}
|
||||
])
|
||||
}
|
||||
color: "rgb(204, 46, 72)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "2015",
|
||||
@ -125,8 +125,8 @@ export default function getData() {
|
||||
formatter({ data }) {
|
||||
return data[3];
|
||||
},
|
||||
position: "top"
|
||||
}
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
@ -135,15 +135,15 @@ export default function getData() {
|
||||
color: new graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(129, 227, 238)"
|
||||
color: "rgb(129, 227, 238)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgb(25, 183, 207)"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
color: "rgb(25, 183, 207)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ const loading = shallowRef(false);
|
||||
const loadingOptions = {
|
||||
text: "Loading…",
|
||||
color: "#4ea397",
|
||||
maskColor: "rgba(255, 255, 255, 0.4)"
|
||||
maskColor: "rgba(255, 255, 255, 0.4)",
|
||||
};
|
||||
const option = shallowRef(getData());
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef, watch } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
@ -17,7 +17,7 @@ use([
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const [c1, c2] = getData().map(shallowRef);
|
||||
@ -25,14 +25,14 @@ const connected = shallowRef(true);
|
||||
|
||||
watch(
|
||||
connected,
|
||||
value => {
|
||||
(value) => {
|
||||
if (value) {
|
||||
connect("radiance");
|
||||
} else {
|
||||
disconnect("radiance");
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@ -25,14 +25,14 @@
|
||||
defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
desc: String,
|
||||
split: Boolean
|
||||
split: Boolean,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,13 +5,13 @@ import {
|
||||
GeoComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/map";
|
||||
import chinaMap from "../china.json";
|
||||
import chinaMap from "../data/china.json";
|
||||
|
||||
use([
|
||||
ScatterChart,
|
||||
@ -19,7 +19,7 @@ use([
|
||||
GeoComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
registerMap("china", chinaMap);
|
||||
@ -33,10 +33,10 @@ let img = null;
|
||||
function convert() {
|
||||
img = {
|
||||
src: map.value.getDataURL({
|
||||
pixelRatio: window.devicePixelRatio || 1
|
||||
pixelRatio: window.devicePixelRatio || 1,
|
||||
}),
|
||||
width: map.value.getWidth(),
|
||||
height: map.value.getHeight()
|
||||
height: map.value.getHeight(),
|
||||
};
|
||||
open.value = true;
|
||||
}
|
||||
|
||||
@ -15,14 +15,14 @@ const option = shallowRef();
|
||||
const loading = shallowRef(true);
|
||||
|
||||
const initOptions = {
|
||||
renderer: "canvas"
|
||||
renderer: "canvas",
|
||||
};
|
||||
|
||||
const loadingOptions = {
|
||||
text: "Loading...",
|
||||
color: "#000",
|
||||
textColor: "#fff",
|
||||
maskColor: "transparent"
|
||||
maskColor: "transparent",
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
@ -30,8 +30,8 @@ onMounted(() => {
|
||||
loading.value = false;
|
||||
|
||||
data = data
|
||||
.filter(dataItem => dataItem[2] > 0)
|
||||
.map(dataItem => [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]);
|
||||
.filter((dataItem) => dataItem[2] > 0)
|
||||
.map((dataItem) => [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]);
|
||||
|
||||
option.value = {
|
||||
backgroundColor: "#000",
|
||||
@ -42,12 +42,12 @@ onMounted(() => {
|
||||
environment: starfield,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 2
|
||||
}
|
||||
intensity: 2,
|
||||
},
|
||||
},
|
||||
viewControl: {
|
||||
autoRotate: false
|
||||
}
|
||||
autoRotate: false,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
bottom: "3%",
|
||||
@ -56,19 +56,19 @@ onMounted(() => {
|
||||
calculable: true,
|
||||
realtime: false,
|
||||
inRange: {
|
||||
colorLightness: [0.2, 0.9]
|
||||
colorLightness: [0.2, 0.9],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
color: "#fff",
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
color: "orange"
|
||||
}
|
||||
color: "orange",
|
||||
},
|
||||
},
|
||||
outOfRange: {
|
||||
colorAlpha: 0
|
||||
}
|
||||
colorAlpha: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -79,10 +79,10 @@ onMounted(() => {
|
||||
minHeight: 0.2,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: "orange"
|
||||
}
|
||||
}
|
||||
]
|
||||
color: "orange",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,12 +4,12 @@ import { LinesChart } from "echarts/charts";
|
||||
import {
|
||||
GeoComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import worldMap from "../world.json";
|
||||
import worldMap from "../data/world.json";
|
||||
|
||||
use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);
|
||||
registerMap("world", worldMap);
|
||||
@ -23,7 +23,7 @@ const loadingOptions = {
|
||||
color: "#c23531",
|
||||
textColor: "rgba(255, 255, 255, 0.5)",
|
||||
maskColor: "#003",
|
||||
zlevel: 0
|
||||
zlevel: 0,
|
||||
};
|
||||
|
||||
function load() {
|
||||
@ -36,21 +36,21 @@ function load() {
|
||||
function getAirportCoord(idx) {
|
||||
return [data.airports[idx][3], data.airports[idx][4]];
|
||||
}
|
||||
const routes = data.routes.map(airline => {
|
||||
const routes = data.routes.map((airline) => {
|
||||
return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
|
||||
});
|
||||
|
||||
chart.value.setOption({
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
},
|
||||
title: {
|
||||
text: "World Flights",
|
||||
top: "5%",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#eee"
|
||||
}
|
||||
color: "#eee",
|
||||
},
|
||||
},
|
||||
backgroundColor: "#003",
|
||||
tooltip: {
|
||||
@ -59,7 +59,7 @@ function load() {
|
||||
return (
|
||||
data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: "world",
|
||||
@ -70,8 +70,8 @@ function load() {
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderColor: "#003",
|
||||
color: "#005"
|
||||
}
|
||||
color: "#005",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -83,11 +83,11 @@ function load() {
|
||||
lineStyle: {
|
||||
opacity: 0.05,
|
||||
width: 0.5,
|
||||
curveness: 0.3
|
||||
curveness: 0.3,
|
||||
},
|
||||
blendMode: "lighter"
|
||||
}
|
||||
]
|
||||
blendMode: "lighter",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef, onMounted, onUnmounted } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
@ -17,7 +17,7 @@ use([
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
@ -54,18 +54,18 @@ function startActions() {
|
||||
pie.value.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
dataIndex
|
||||
dataIndex,
|
||||
});
|
||||
dataIndex = (dataIndex + 1) % dataLen;
|
||||
pie.value.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex
|
||||
dataIndex,
|
||||
});
|
||||
pie.value.dispatchAction({
|
||||
type: "showTip",
|
||||
seriesIndex: 0,
|
||||
dataIndex
|
||||
dataIndex,
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { computed, shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
@ -17,7 +17,7 @@ use([
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
@ -28,9 +28,9 @@ const loadingOptions = computed(() =>
|
||||
? {
|
||||
color: "#fff",
|
||||
textColor: "#fff",
|
||||
maskColor: "rgba(0, 0, 0, 0.7)"
|
||||
maskColor: "rgba(0, 0, 0, 0.7)",
|
||||
}
|
||||
: null
|
||||
: null,
|
||||
);
|
||||
const style = computed(() => {
|
||||
return theme.value === "dark"
|
||||
|
||||
@ -4,7 +4,7 @@ import { RadarChart } from "echarts/charts";
|
||||
import {
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
|
||||
@ -4,7 +4,7 @@ import { ScatterChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
|
||||
@ -6,13 +6,13 @@ import Demo from "./Demo.vue";
|
||||
const SAMPLE_RATE = 0.5;
|
||||
|
||||
inject({
|
||||
beforeSend: event => {
|
||||
beforeSend: (event) => {
|
||||
if (Math.random() > SAMPLE_RATE) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return event;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
8
demo/shims-vue.d.ts
vendored
8
demo/shims-vue.d.ts
vendored
@ -1,6 +1,6 @@
|
||||
/* eslint-disable */
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
declare module "*.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["./**/*", "./**/*.vue"],
|
||||
"compilerOptions": {
|
||||
"types": ["vite/client"]
|
||||
"types": ["vite/client"],
|
||||
"allowJs": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ const COMPONENTS_MAP = {
|
||||
xAxis: "GridComponent",
|
||||
yAxis: "GridComponent",
|
||||
angleAxis: "PolarComponent",
|
||||
radiusAxis: "PolarComponent"
|
||||
radiusAxis: "PolarComponent",
|
||||
};
|
||||
|
||||
const CHARTS_MAP = {
|
||||
@ -53,7 +53,7 @@ const CHARTS_MAP = {
|
||||
pictorialBar: "PictorialBarChart",
|
||||
themeRiver: "ThemeRiverChart",
|
||||
sunburst: "SunburstChart",
|
||||
custom: "CustomChart"
|
||||
custom: "CustomChart",
|
||||
};
|
||||
|
||||
const COMPONENTS_GL_MAP = {
|
||||
@ -66,7 +66,7 @@ const COMPONENTS_GL_MAP = {
|
||||
// Dependencies
|
||||
xAxis3D: "Grid3DComponent",
|
||||
yAxis3D: "Grid3DComponent",
|
||||
zAxis3D: "Grid3DComponent"
|
||||
zAxis3D: "Grid3DComponent",
|
||||
};
|
||||
|
||||
const CHARTS_GL_MAP = {
|
||||
@ -81,17 +81,17 @@ const CHARTS_GL_MAP = {
|
||||
scatterGL: "ScatterGLChart",
|
||||
graphGL: "GraphGLChart",
|
||||
flowGL: "FlowGLChart",
|
||||
linesGL: "LinesGLChart"
|
||||
linesGL: "LinesGLChart",
|
||||
};
|
||||
|
||||
const FEATURES = ["UniversalTransition", "LabelLayout"];
|
||||
const RENDERERS_MAP = {
|
||||
canvas: "CanvasRenderer",
|
||||
svg: "SVGRenderer"
|
||||
svg: "SVGRenderer",
|
||||
};
|
||||
|
||||
const EXTENSIONS_MAP = {
|
||||
bmap: "bmap/bmap"
|
||||
bmap: "bmap/bmap",
|
||||
// PENDING: There seem no examples that use dataTool
|
||||
// dataTool: 'dataTool'
|
||||
};
|
||||
@ -103,7 +103,7 @@ const INJECTED_COMPONENTS = [
|
||||
...MARKERS,
|
||||
"grid",
|
||||
"axisPointer",
|
||||
"aria" // TODO aria
|
||||
"aria", // TODO aria
|
||||
];
|
||||
|
||||
// Component that was dependent.
|
||||
@ -114,12 +114,12 @@ const DEPENDENT_COMPONENTS = [
|
||||
"radiusAxis",
|
||||
"xAxis3D",
|
||||
"yAxis3D",
|
||||
"zAxis3D"
|
||||
"zAxis3D",
|
||||
];
|
||||
|
||||
function createReverseMap(map) {
|
||||
const reverseMap = {};
|
||||
Object.keys(map).forEach(key => {
|
||||
Object.keys(map).forEach((key) => {
|
||||
// Exclude dependencies.
|
||||
if (DEPENDENT_COMPONENTS.includes(key)) {
|
||||
return;
|
||||
@ -139,7 +139,7 @@ function collectDeps(option) {
|
||||
let deps = [];
|
||||
if (option.options) {
|
||||
// TODO getOption() doesn't have baseOption and options.
|
||||
option.options.forEach(opt => {
|
||||
option.options.forEach((opt) => {
|
||||
deps = deps.concat(collectDeps(opt));
|
||||
});
|
||||
|
||||
@ -151,7 +151,7 @@ function collectDeps(option) {
|
||||
return Array.from(new Set(deps));
|
||||
}
|
||||
|
||||
Object.keys(option).forEach(key => {
|
||||
Object.keys(option).forEach((key) => {
|
||||
if (INJECTED_COMPONENTS.includes(key)) {
|
||||
return;
|
||||
}
|
||||
@ -177,7 +177,7 @@ function collectDeps(option) {
|
||||
series = [series];
|
||||
}
|
||||
|
||||
series.forEach(seriesOpt => {
|
||||
series.forEach((seriesOpt) => {
|
||||
if (CHARTS_MAP[seriesOpt.type]) {
|
||||
deps.push(CHARTS_MAP[seriesOpt.type]);
|
||||
}
|
||||
@ -191,7 +191,7 @@ function collectDeps(option) {
|
||||
if (seriesOpt.coordinateSystem === "bmap") {
|
||||
deps.push("bmap");
|
||||
}
|
||||
MARKERS.forEach(markerType => {
|
||||
MARKERS.forEach((markerType) => {
|
||||
if (seriesOpt[markerType]) {
|
||||
deps.push(COMPONENTS_MAP[markerType]);
|
||||
}
|
||||
@ -206,7 +206,7 @@ function collectDeps(option) {
|
||||
});
|
||||
// Dataset transform
|
||||
if (option.dataset && Array.isArray(option.dataset)) {
|
||||
option.dataset.forEach(dataset => {
|
||||
option.dataset.forEach((dataset) => {
|
||||
if (dataset.transform) {
|
||||
deps.push("TransformComponent");
|
||||
}
|
||||
@ -225,15 +225,15 @@ function buildMinimalBundleCode(
|
||||
quote = "'",
|
||||
multiline = false,
|
||||
indent = " ",
|
||||
maxLen = 80
|
||||
}
|
||||
maxLen = 80,
|
||||
},
|
||||
) {
|
||||
const options = {
|
||||
semi,
|
||||
quote,
|
||||
multiline,
|
||||
indent,
|
||||
maxLen
|
||||
maxLen,
|
||||
};
|
||||
|
||||
const chartsImports = [];
|
||||
@ -244,7 +244,7 @@ function buildMinimalBundleCode(
|
||||
const renderersImports = [];
|
||||
const extensionImports = [];
|
||||
|
||||
deps.forEach(dep => {
|
||||
deps.forEach((dep) => {
|
||||
if (dep.endsWith("Renderer")) {
|
||||
renderersImports.push(dep);
|
||||
} else if (CHARTS_MAP_REVERSE[dep]) {
|
||||
@ -278,12 +278,12 @@ function buildMinimalBundleCode(
|
||||
...componentsGLImports,
|
||||
...chartsGLImports,
|
||||
...renderersImports,
|
||||
...featuresImports
|
||||
...featuresImports,
|
||||
];
|
||||
|
||||
const ECOptionTypeCode = typeItems(
|
||||
allImports.filter(a => a.endsWith("Option")),
|
||||
options
|
||||
allImports.filter((a) => a.endsWith("Option")),
|
||||
options,
|
||||
);
|
||||
|
||||
const importSources = [
|
||||
@ -292,33 +292,33 @@ function buildMinimalBundleCode(
|
||||
[featuresImports, "echarts/features"],
|
||||
[renderersImports, "echarts/renderers"],
|
||||
[chartsGLImports, "echarts-gl/charts"],
|
||||
[componentsGLImports, "echarts-gl/components"]
|
||||
].filter(a => a[0].length > 0);
|
||||
[componentsGLImports, "echarts-gl/components"],
|
||||
].filter((a) => a[0].length > 0);
|
||||
const importStatements = importSources.map(([imports, mod]) =>
|
||||
importItems(
|
||||
imports.filter(a => !a.endsWith("Option")),
|
||||
imports.filter((a) => !a.endsWith("Option")),
|
||||
mod,
|
||||
options
|
||||
)
|
||||
options,
|
||||
),
|
||||
);
|
||||
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
getExtensionDeps(extensionImports, includeType).forEach(ext => {
|
||||
getExtensionDeps(extensionImports, includeType).forEach((ext) => {
|
||||
importStatements.push(`import ${quote}${ext}${quote}${semiStr}`);
|
||||
});
|
||||
|
||||
if (includeType) {
|
||||
importStatements.push(
|
||||
`import type { ComposeOption } from ${quote}echarts/core${quote}${semiStr}`
|
||||
`import type { ComposeOption } from ${quote}echarts/core${quote}${semiStr}`,
|
||||
);
|
||||
const importTypeStatements = importSources
|
||||
.map(([imports, mod]) =>
|
||||
importItems(
|
||||
imports.filter(a => a.endsWith("Option")),
|
||||
imports.filter((a) => a.endsWith("Option")),
|
||||
mod,
|
||||
{ ...options, type: true }
|
||||
)
|
||||
{ ...options, type: true },
|
||||
),
|
||||
)
|
||||
.filter(Boolean);
|
||||
importStatements.push(...importTypeStatements);
|
||||
@ -328,16 +328,18 @@ function buildMinimalBundleCode(
|
||||
${importStatements.join("\n")}
|
||||
|
||||
${useItems(
|
||||
allImports.filter(a => !a.endsWith("Option")),
|
||||
options
|
||||
allImports.filter((a) => !a.endsWith("Option")),
|
||||
options,
|
||||
)}
|
||||
${includeType ? `\n${ECOptionTypeCode}` : ""}
|
||||
`;
|
||||
}
|
||||
function getExtensionDeps(deps, ts) {
|
||||
return deps
|
||||
.filter(dep => EXTENSIONS_MAP[dep])
|
||||
.map(dep => `echarts/extension${ts ? "-src" : ""}/${EXTENSIONS_MAP[dep]}`);
|
||||
.filter((dep) => EXTENSIONS_MAP[dep])
|
||||
.map(
|
||||
(dep) => `echarts/extension${ts ? "-src" : ""}/${EXTENSIONS_MAP[dep]}`,
|
||||
);
|
||||
}
|
||||
|
||||
/** import */
|
||||
@ -366,7 +368,7 @@ function importSingleLine(items, module, { type, semi, quote }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `import ${typeStr}{ ${items.join(
|
||||
", "
|
||||
", ",
|
||||
)} } from ${quote}${module}${quote}${semiStr}`;
|
||||
}
|
||||
|
||||
@ -379,7 +381,7 @@ function importMultiLine(items, module, { type, indent, semi, quote }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `import ${typeStr}{
|
||||
${items.map(item => `${indent}${item}`).join(",\n")}
|
||||
${items.map((item) => `${indent}${item}`).join(",\n")}
|
||||
} from ${quote}${module}${quote}${semiStr}`;
|
||||
}
|
||||
|
||||
@ -418,7 +420,7 @@ function useMultiLine(items, { indent, semi }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `use([
|
||||
${items.map(item => `${indent}${item}`).join(`,\n`)}
|
||||
${items.map((item) => `${indent}${item}`).join(`,\n`)}
|
||||
])${semiStr}`;
|
||||
}
|
||||
|
||||
@ -457,16 +459,16 @@ function typeMultiLine(items, { indent, semi }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `type EChartsOption = ComposeOption<
|
||||
${items.map(item => `${indent}| ${item}`).join("\n")}
|
||||
${items.map((item) => `${indent}| ${item}`).join("\n")}
|
||||
>${semiStr}`;
|
||||
}
|
||||
|
||||
export function getImportsFromOption(
|
||||
option,
|
||||
{ renderer = "canvas", ...options }
|
||||
{ renderer = "canvas", ...options },
|
||||
) {
|
||||
return buildMinimalBundleCode(
|
||||
[...collectDeps(option), RENDERERS_MAP[renderer]],
|
||||
options
|
||||
options,
|
||||
);
|
||||
}
|
||||
|
||||
30
eslint.config.ts
Normal file
30
eslint.config.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import {
|
||||
defineConfigWithVueTs,
|
||||
vueTsConfigs,
|
||||
configureVueProject,
|
||||
} from "@vue/eslint-config-typescript";
|
||||
import pluginVue from "eslint-plugin-vue";
|
||||
import skipFormatting from "@vue/eslint-config-prettier/skip-formatting";
|
||||
// The inferred type of 'default' cannot be named without a reference to "@typescript-eslint/utils"
|
||||
import type {} from "@typescript-eslint/utils";
|
||||
|
||||
// To allow more languages other than `ts` in `.vue` files
|
||||
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
|
||||
configureVueProject({ scriptLangs: ["ts", "js"] });
|
||||
|
||||
export default defineConfigWithVueTs(
|
||||
{
|
||||
name: "app/files-to-lint",
|
||||
files: ["**/*.{ts,mts,tsx,vue}"],
|
||||
},
|
||||
{ ignores: ["**/dist/**"] },
|
||||
pluginVue.configs["flat/essential"],
|
||||
vueTsConfigs.recommended,
|
||||
skipFormatting,
|
||||
{
|
||||
rules: {
|
||||
"vue/multi-word-component-names": "off",
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
},
|
||||
},
|
||||
);
|
||||
25
package.json
25
package.json
@ -3,13 +3,17 @@
|
||||
"version": "7.0.3",
|
||||
"description": "Vue.js component for Apache ECharts™.",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/ecomfe/vue-echarts.git",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ecomfe/vue-echarts.git"
|
||||
},
|
||||
"author": "GU Yiling <justice360@gmail.com>",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "pnpm run docs && rimraf dist && rollup -c",
|
||||
"typecheck": "vue-tsc",
|
||||
"lint": "eslint . --fix",
|
||||
"format": "prettier . --write",
|
||||
"publint": "publint",
|
||||
"dev:build": "vite build",
|
||||
"dev:preview": "vite preview",
|
||||
@ -39,27 +43,26 @@
|
||||
"@highlightjs/vue-plugin": "^2.1.0",
|
||||
"@rollup/plugin-replace": "^5.0.7",
|
||||
"@types/node": "^22.15.21",
|
||||
"@typescript-eslint/eslint-plugin": "^7.17.0",
|
||||
"@typescript-eslint/parser": "^7.17.0",
|
||||
"@typescript-eslint/utils": "^8.32.1",
|
||||
"@vercel/analytics": "^1.3.1",
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.5.0",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"@vueuse/core": "^13.1.0",
|
||||
"comment-mark": "^1.1.1",
|
||||
"comment-mark": "^2.0.1",
|
||||
"echarts": "^5.5.1",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"esbuild-wasm": "^0.23.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"eslint": "^9.27.0",
|
||||
"eslint-plugin-vue": "^10.1.0",
|
||||
"highlight.js": "^11.10.0",
|
||||
"jiti": "^2.4.2",
|
||||
"pinia": "^3.0.2",
|
||||
"postcss-nested": "^7.0.2",
|
||||
"prettier": "^3.3.3",
|
||||
"publint": "^0.2.9",
|
||||
"prettier": "^3.5.3",
|
||||
"publint": "^0.3.12",
|
||||
"rimraf": "^6.0.1",
|
||||
"rollup": "^4.19.0",
|
||||
"rollup-plugin-dts": "^6.1.0",
|
||||
|
||||
927
pnpm-lock.yaml
generated
927
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -16,18 +16,23 @@ function configBuild(options, csp) {
|
||||
result.plugins = [
|
||||
...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
|
||||
...plugins,
|
||||
csp ? css({ output: "style.css" }) : css({ inject: true })
|
||||
css({
|
||||
...(csp ? { output: "style.css" } : { inject: true }),
|
||||
minify: true,
|
||||
}),
|
||||
];
|
||||
|
||||
// modify output file names
|
||||
if (csp && output) {
|
||||
result.output = (Array.isArray(output) ? output : [output]).map(output => {
|
||||
return {
|
||||
...output,
|
||||
file: output.file.replace(/^dist\//, "dist/csp/"),
|
||||
assetFileNames: "[name][extname]"
|
||||
};
|
||||
});
|
||||
result.output = (Array.isArray(output) ? output : [output]).map(
|
||||
(output) => {
|
||||
return {
|
||||
...output,
|
||||
file: output.file.replace(/^dist\//, "dist/csp/"),
|
||||
assetFileNames: "[name][extname]",
|
||||
};
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
@ -43,9 +48,9 @@ const builds = [
|
||||
{
|
||||
file: "dist/index.js",
|
||||
format: "esm",
|
||||
sourcemap: true
|
||||
}
|
||||
]
|
||||
sourcemap: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
input: "src/global.ts",
|
||||
@ -61,28 +66,28 @@ const builds = [
|
||||
globals: {
|
||||
vue: "vue",
|
||||
echarts: "echarts",
|
||||
"echarts/core": "echarts"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
"echarts/core": "echarts",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default [
|
||||
...builds.map(options => configBuild(options, false)),
|
||||
...builds.map(options => configBuild(options, true)),
|
||||
...builds.map((options) => configBuild(options, false)),
|
||||
...builds.map((options) => configBuild(options, true)),
|
||||
{
|
||||
input: "src/index.d.ts",
|
||||
plugins: [dts()],
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.d.ts",
|
||||
format: "esm"
|
||||
format: "esm",
|
||||
},
|
||||
{
|
||||
file: "dist/csp/index.d.ts",
|
||||
format: "esm"
|
||||
}
|
||||
]
|
||||
}
|
||||
format: "esm",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { readFileSync, writeFileSync } from "node:fs";
|
||||
import commentMark from "comment-mark";
|
||||
import { commentMark } from "comment-mark";
|
||||
import { getPackageMeta, resolvePath } from "./utils.mjs";
|
||||
|
||||
const { name, version } = getPackageMeta();
|
||||
@ -9,13 +9,13 @@ const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
|
||||
const DEP_VERSIONS = {
|
||||
vue: "3.5.13",
|
||||
echarts: "5.5.1",
|
||||
[name]: version
|
||||
[name]: version,
|
||||
};
|
||||
|
||||
function getScripts() {
|
||||
const deps = ["vue", "echarts", name];
|
||||
return deps
|
||||
.map(dep => {
|
||||
.map((dep) => {
|
||||
const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
|
||||
return `<script src="${CDN_PREFIX}${name}@${DEP_VERSIONS[dep]}"></script>`;
|
||||
})
|
||||
@ -23,22 +23,22 @@ function getScripts() {
|
||||
}
|
||||
|
||||
function getCodeBlock(code) {
|
||||
return "```html\n" + code + "\n```";
|
||||
return "\n```html\n" + code + "\n```\n";
|
||||
}
|
||||
|
||||
const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
|
||||
resolvePath(import.meta.url, "..", name)
|
||||
const README_FILES = ["README.md", "README.zh-Hans.md"].map((name) =>
|
||||
resolvePath(import.meta.url, "..", name),
|
||||
);
|
||||
|
||||
README_FILES.forEach(file => {
|
||||
README_FILES.forEach((file) => {
|
||||
const content = readFileSync(file, "utf8");
|
||||
|
||||
writeFileSync(
|
||||
file,
|
||||
commentMark(content, {
|
||||
vue3Scripts: getCodeBlock(getScripts())
|
||||
vue3Scripts: getCodeBlock(getScripts()),
|
||||
}),
|
||||
"utf8"
|
||||
"utf8",
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -8,6 +8,6 @@ export function resolvePath(url, ...parts) {
|
||||
|
||||
export function getPackageMeta() {
|
||||
return JSON.parse(
|
||||
readFileSync(resolvePath(import.meta.url, "../package.json"), "utf8")
|
||||
readFileSync(resolvePath(import.meta.url, "../package.json"), "utf8"),
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
/* eslint-disable vue/multi-word-component-names */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import {
|
||||
defineComponent,
|
||||
shallowRef,
|
||||
@ -11,7 +9,7 @@ import {
|
||||
onBeforeUnmount,
|
||||
h,
|
||||
nextTick,
|
||||
watchEffect
|
||||
watchEffect,
|
||||
} from "vue";
|
||||
import { init as initChart } from "echarts/core";
|
||||
|
||||
@ -20,7 +18,7 @@ import {
|
||||
useAutoresize,
|
||||
autoresizeProps,
|
||||
useLoading,
|
||||
loadingProps
|
||||
loadingProps,
|
||||
} from "./composables";
|
||||
import { isOn, omitOn, toValue } from "./utils";
|
||||
import { register, TAG_NAME } from "./wc";
|
||||
@ -35,7 +33,7 @@ import type {
|
||||
InitOptionsInjection,
|
||||
UpdateOptions,
|
||||
UpdateOptionsInjection,
|
||||
Emits
|
||||
Emits,
|
||||
} from "./types";
|
||||
import type { EChartsElement } from "./wc";
|
||||
|
||||
@ -56,14 +54,14 @@ export default defineComponent({
|
||||
props: {
|
||||
option: Object as PropType<Option>,
|
||||
theme: {
|
||||
type: [Object, String] as PropType<Theme>
|
||||
type: [Object, String] as PropType<Theme>,
|
||||
},
|
||||
initOptions: Object as PropType<InitOptions>,
|
||||
updateOptions: Object as PropType<UpdateOptions>,
|
||||
group: String,
|
||||
manualUpdate: Boolean,
|
||||
...autoresizeProps,
|
||||
...loadingProps
|
||||
...loadingProps,
|
||||
},
|
||||
emits: {} as unknown as Emits,
|
||||
inheritAttrs: false,
|
||||
@ -78,16 +76,16 @@ export default defineComponent({
|
||||
const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);
|
||||
|
||||
const realOption = computed(
|
||||
() => manualOption.value || props.option || null
|
||||
() => manualOption.value || props.option || null,
|
||||
);
|
||||
const realTheme = computed(
|
||||
() => props.theme || toValue(defaultTheme) || {}
|
||||
() => props.theme || toValue(defaultTheme) || {},
|
||||
);
|
||||
const realInitOptions = computed(
|
||||
() => props.initOptions || toValue(defaultInitOptions) || {}
|
||||
() => props.initOptions || toValue(defaultInitOptions) || {},
|
||||
);
|
||||
const realUpdateOptions = computed(
|
||||
() => props.updateOptions || toValue(defaultUpdateOptions) || {}
|
||||
() => props.updateOptions || toValue(defaultUpdateOptions) || {},
|
||||
);
|
||||
const nonEventAttrs = computed(() => omitOn(attrs));
|
||||
const nativeListeners: Record<string, unknown> = {};
|
||||
@ -100,8 +98,8 @@ export default defineComponent({
|
||||
// For `onNative:<event>` props, we just strip the `Native:` part and collect them into
|
||||
// `nativeListeners` so that we can bind them to the root element directly.
|
||||
Object.keys(attrs)
|
||||
.filter(key => isOn(key))
|
||||
.forEach(key => {
|
||||
.filter((key) => isOn(key))
|
||||
.forEach((key) => {
|
||||
// Collect native DOM events
|
||||
if (key.indexOf("Native:") === 2) {
|
||||
// onNative:click -> onClick
|
||||
@ -138,7 +136,7 @@ export default defineComponent({
|
||||
const instance = (chart.value = initChart(
|
||||
root.value,
|
||||
realTheme.value,
|
||||
realInitOptions.value
|
||||
realInitOptions.value,
|
||||
));
|
||||
|
||||
if (props.group) {
|
||||
@ -214,7 +212,7 @@ export default defineComponent({
|
||||
let unwatchOption: (() => void) | null = null;
|
||||
watch(
|
||||
manualUpdate,
|
||||
manualUpdate => {
|
||||
(manualUpdate) => {
|
||||
if (typeof unwatchOption === "function") {
|
||||
unwatchOption();
|
||||
unwatchOption = null;
|
||||
@ -234,17 +232,17 @@ export default defineComponent({
|
||||
// mutating `option` will lead to `notMerge: false` and
|
||||
// replacing it with new reference will lead to `notMerge: true`
|
||||
notMerge: option !== oldOption,
|
||||
...realUpdateOptions.value
|
||||
...realUpdateOptions.value,
|
||||
});
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
{ deep: true },
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
@ -254,8 +252,8 @@ export default defineComponent({
|
||||
init();
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
@ -292,7 +290,7 @@ export default defineComponent({
|
||||
setOption,
|
||||
nonEventAttrs,
|
||||
nativeListeners,
|
||||
...publicApi
|
||||
...publicApi,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
@ -300,7 +298,7 @@ export default defineComponent({
|
||||
...this.nonEventAttrs,
|
||||
...this.nativeListeners,
|
||||
ref: "root",
|
||||
class: ["echarts", ...(this.nonEventAttrs.class || [])]
|
||||
class: ["echarts", ...(this.nonEventAttrs.class || [])],
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import type { Ref } from "vue";
|
||||
import type { EChartsType } from "../types";
|
||||
|
||||
@ -17,7 +16,7 @@ const METHOD_NAMES = [
|
||||
"appendData",
|
||||
"clear",
|
||||
"isDisposed",
|
||||
"dispose"
|
||||
"dispose",
|
||||
] as const;
|
||||
|
||||
type MethodName = (typeof METHOD_NAMES)[number];
|
||||
@ -25,10 +24,10 @@ type MethodName = (typeof METHOD_NAMES)[number];
|
||||
type PublicMethods = Pick<EChartsType, MethodName>;
|
||||
|
||||
export function usePublicAPI(
|
||||
chart: Ref<EChartsType | undefined>
|
||||
chart: Ref<EChartsType | undefined>,
|
||||
): PublicMethods {
|
||||
function makePublicMethod<T extends MethodName>(
|
||||
name: T
|
||||
name: T,
|
||||
): (...args: Parameters<EChartsType[T]>) => ReturnType<EChartsType[T]> {
|
||||
return (...args) => {
|
||||
if (!chart.value) {
|
||||
@ -40,7 +39,7 @@ export function usePublicAPI(
|
||||
|
||||
function makePublicMethods(): PublicMethods {
|
||||
const methods = Object.create(null);
|
||||
METHOD_NAMES.forEach(name => {
|
||||
METHOD_NAMES.forEach((name) => {
|
||||
methods[name] = makePublicMethod(name);
|
||||
});
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import type { EChartsType, AutoResize } from "../types";
|
||||
export function useAutoresize(
|
||||
chart: Ref<EChartsType | undefined>,
|
||||
autoresize: Ref<AutoResize | undefined>,
|
||||
root: Ref<HTMLElement | undefined>
|
||||
root: Ref<HTMLElement | undefined>,
|
||||
): void {
|
||||
watch(
|
||||
[root, chart, autoresize],
|
||||
@ -57,10 +57,10 @@ export function useAutoresize(
|
||||
ro = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export const autoresizeProps = {
|
||||
autoresize: [Boolean, Object] as PropType<AutoResize>
|
||||
autoresize: [Boolean, Object] as PropType<AutoResize>,
|
||||
};
|
||||
|
||||
@ -12,12 +12,12 @@ export const LOADING_OPTIONS_KEY =
|
||||
export function useLoading(
|
||||
chart: Ref<EChartsType | undefined>,
|
||||
loading: Ref<boolean>,
|
||||
loadingOptions: Ref<LoadingOptions | undefined>
|
||||
loadingOptions: Ref<LoadingOptions | undefined>,
|
||||
): void {
|
||||
const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
|
||||
const realLoadingOptions = computed(() => ({
|
||||
...(toValue(defaultLoadingOptions) || {}),
|
||||
...loadingOptions?.value
|
||||
...loadingOptions?.value,
|
||||
}));
|
||||
|
||||
watchEffect(() => {
|
||||
@ -36,5 +36,5 @@ export function useLoading(
|
||||
|
||||
export const loadingProps = {
|
||||
loading: Boolean,
|
||||
loadingOptions: Object as PropType<LoadingOptions>
|
||||
loadingOptions: Object as PropType<LoadingOptions>,
|
||||
};
|
||||
|
||||
@ -3,5 +3,5 @@ import ECharts, * as exported from "./index";
|
||||
|
||||
export default {
|
||||
...ECharts,
|
||||
...exported
|
||||
...exported,
|
||||
};
|
||||
|
||||
4
src/index.d.ts
vendored
4
src/index.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
/* eslint-disable @typescript-eslint/no-empty-object-type */
|
||||
import type { Ref, DefineComponent, InjectionKey } from "vue";
|
||||
import type {
|
||||
Option,
|
||||
@ -12,7 +12,7 @@ import type {
|
||||
ThemeInjection,
|
||||
InitOptionsInjection,
|
||||
UpdateOptionsInjection,
|
||||
LoadingOptionsInjection
|
||||
LoadingOptionsInjection,
|
||||
} from "./types";
|
||||
|
||||
declare const THEME_KEY: InjectionKey<ThemeInjection>;
|
||||
|
||||
@ -1 +1,6 @@
|
||||
x-vue-echarts{display:block;width:100%;height:100%;min-width:0}
|
||||
x-vue-echarts {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import type { MaybeRefOrGetter } from "./types";
|
||||
import { unref } from "vue";
|
||||
|
||||
type Attrs = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
[key: string]: any;
|
||||
};
|
||||
type Attrs = Record<string, any>;
|
||||
|
||||
// Copied from
|
||||
// https://github.com/vuejs/vue-next/blob/5a7a1b8293822219283d6e267496bec02234b0bc/packages/shared/src/index.ts#L40-L41
|
||||
@ -24,6 +21,7 @@ export function omitOn(attrs: Attrs): Attrs {
|
||||
|
||||
// Copied from
|
||||
// https://github.com/vuejs/core/blob/3cb4db21efa61852b0541475b4ddf57fdec4c479/packages/shared/src/general.ts#L49-L50
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
|
||||
const isFunction = (val: unknown): val is Function => typeof val === "function";
|
||||
|
||||
// Copied from
|
||||
|
||||
@ -28,10 +28,10 @@ export function register(): boolean {
|
||||
"tag",
|
||||
// Use esbuild repl to keep build process simple
|
||||
// https://esbuild.github.io/try/#dAAwLjIzLjAALS1taW5pZnkAY2xhc3MgRUNoYXJ0c0VsZW1lbnQgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgX19kaXNwb3NlID0gbnVsbDsKCiAgZGlzY29ubmVjdGVkQ2FsbGJhY2soKSB7CiAgICBpZiAodGhpcy5fX2Rpc3Bvc2UpIHsKICAgICAgdGhpcy5fX2Rpc3Bvc2UoKTsKICAgICAgdGhpcy5fX2Rpc3Bvc2UgPSBudWxsOwogICAgfQogIH0KfQoKaWYgKGN1c3RvbUVsZW1lbnRzLmdldCh0YWcpID09IG51bGwpIHsKICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnLCBFQ2hhcnRzRWxlbWVudCk7Cn0K
|
||||
"class EChartsElement extends HTMLElement{__dispose=null;disconnectedCallback(){this.__dispose&&(this.__dispose(),this.__dispose=null)}}customElements.get(tag)==null&&customElements.define(tag,EChartsElement);"
|
||||
"class EChartsElement extends HTMLElement{__dispose=null;disconnectedCallback(){this.__dispose&&(this.__dispose(),this.__dispose=null)}}customElements.get(tag)==null&&customElements.define(tag,EChartsElement);",
|
||||
);
|
||||
reg(TAG_NAME);
|
||||
} catch (e) {
|
||||
} catch {
|
||||
return (registered = false);
|
||||
}
|
||||
|
||||
|
||||
@ -7,11 +7,11 @@ export default defineConfig({
|
||||
plugins: [vue()],
|
||||
root: "./demo",
|
||||
server: {
|
||||
host: true
|
||||
host: true,
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [postcssNested()]
|
||||
}
|
||||
}
|
||||
plugins: [postcssNested()],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user