diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 1521c8b..0000000 --- a/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -dist diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 367bafb..0000000 --- a/.eslintrc.json +++ /dev/null @@ -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" - } -} diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index d8e1a9a..a57b19c 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -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))** diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..66cf531 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +pnpm-lock.yaml +demo/data/*.json diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 694ed4c..0000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "trailingComma": "none", - "arrowParens": "avoid" -} diff --git a/CHANGELOG.md b/CHANGELOG.md index b5f6083..95830a2 100644 --- a/CHANGELOG.md +++ b/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 `` failed to display after activation. +- Fixed that charts inside `` 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. diff --git a/README.md b/README.md index 3658839..9ad752b 100644 --- a/README.md +++ b/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}
{b} : {c} ({d}%)" + formatter: "{a}
{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)", + }, + }, + }, + ], }); @@ -117,11 +117,13 @@ Drop ` ``` + ```js @@ -263,17 +265,17 @@ Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-opt Composition API ```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); ``` diff --git a/README.zh-Hans.md b/README.zh-Hans.md index f2aca66..7bb8289 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.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}
{b} : {c} ({d}%)" + formatter: "{a}
{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)", + }, + }, + }, + ], }); @@ -117,11 +117,13 @@ import "echarts"; Vue 3 Demo → + ```html ``` + ```js @@ -263,17 +265,17 @@ Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options 组合式 API ```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); ``` @@ -333,8 +335,6 @@ export default { 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。 - - ## CSP: `style-src` 或 `style-src-elem` 如果你正在应用 CSP 来防止内联 `