docs: update version, deps and docs for 8.0 beta (#849)

* chore: up version and deps * chore: use pnpm CLI to get versions * add note for echarts 6 upgrade guide * remove docs script let cdn to redirect for us * Revert "remove docs script" This reverts commit 3bc237db9100864f2813249ac1693735a658e646. * update demo links
2025-08-14 19:23:28 +08:00 · 2025-08-08 00:48:25 +08:00
parent 8ed975e09b
commit e568005bb2
13 changed files with 809 additions and 742 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -1,36 +0,0 @@
-> ## Help / 帮助
->
-> Replace the `[ ]` with `[x]` to check an option. / 将 `[ ]` 替换为 `[x]` 以选择对应选项。
-
-## The type of this issue / Issue 类型
-
- [ ] Feature request / 新特性需求
- [ ] Bug report / Bug 报告
-
-## Not introduced by ECharts / 非 ECharts 本身问题
-
-Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。
-
- [ ] I've checked it's not a problem of ECharts itself. / 我已检查过，这个问题非 ECharts 本身的问题。
-
-## Details / 详情
-
-### Vue version / Vue 版本
-
- [ ] Vue 3
- [ ] Vue 2
-
-### How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的？
-
- [ ] Importing `vue-echarts` with a bundler environment / 在 webpack 等打包工具环境下引入 `vue-echarts`
- [ ] Using the global variable by including `<script>` tags / 通过 `<script>` 标签引入全局变量
-
-### The version of Vue-ECharts you are using / Vue-ECharts 的版本
-
-> 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))**
-
-**对于 Bug 报告，请在下面提供复现的步骤，最好是最小化的能够重现问题的 demo。请在下方贴入在 CodeSandbox 上 demo 的链接：（[Vue 3 模板](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 模板](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)）**
--- a/.github/ISSUE_TEMPLATE/bug-report.en-US.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.en-US.yml
@ -41,6 +41,6 @@ body:
    id: repro
    attributes:
      label: Reproduction
-      description: "A link to a boiled-down reproduction (a minimal but runnable demo with unnecessary dependencies pruned). If the issue isn't reproducible within an online playground, please create a GitHub repo to reflect the problem. Please paste the link to your CodeSandbox demo or GitHub repo 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))"
+      description: "A link to a boiled-down reproduction (a minimal but runnable demo with unnecessary dependencies pruned). If the issue isn't reproducible within an online playground, please create a GitHub repo to reflect the problem. Please paste the link to your [StackBlitz demo](https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue) or GitHub repo below:"
    validations:
      required: true
--- a/.github/ISSUE_TEMPLATE/bug-report.zh-Hans.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.zh-Hans.yml
@ -41,6 +41,6 @@ body:
    id: repro
    attributes:
      label: 问题复现
-      description: "请提供一个精炼的问题复现（去除无关依赖的最小化可运行 demo）。如果在线环境无法复现，可以创建对应的 GitHub repo 来提供复现环境。请在下方贴入在 CodeSandbox 上 demo 的链接或 GitHub repo 链接：（[Vue 3 模板](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 模板](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)）"
+      description: "请提供一个精炼的问题复现（去除无关依赖的最小化可运行 demo）。如果在线环境无法复现，可以创建对应的 GitHub repo 来提供复现环境。请在下方贴入 [StackBlitz demo](https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue) 的链接或 GitHub repo 链接："
    validations:
      required: true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,24 @@
+## 8.0.0-beta.1
+
+### Breaking changes
+
+- Updated peer dependency for `echarts` to `^6.0.0`.
+- Updated peer dependency for `vue` to `^3.3.0`.
+- Dropped support for browsers without native `class` support.
+- Removed `vue-echarts/csp` entry. Use `vue-echarts` instead. Only manually include `vue-echarts/style.css` if you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility).
+
+### New features
+
+- ECharts 6 support.
+- Added slots for tooltip and data view.
+- Added support for getter in provide/inject.
+
+### Chore
+
+- Built with tsdown.
+- Switched Demo from Webpack to Rolldown-Vite.
+- Use ESLint flat config.
+
 ## 7.0.3

 - Fixed type for `autoresize` (again).
--- a/README.md
+++ b/README.md
@ -6,20 +6,20 @@

 ---

-> Still using v6? Read v6 docs [here →](https://github.com/ecomfe/vue-echarts/tree/6.x)
+> Still using Vue 2? Read v7 docs [here →](https://github.com/ecomfe/vue-echarts/tree/7.x)

 ## Installation & Usage

 ### npm

 ```sh
-npm add echarts vue-echarts
+npm install echarts vue-echarts
 ```

 #### Example

 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>

 ```vue
 <template>
@ -114,14 +114,14 @@ import "echarts";
 Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.

 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8-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@6.0.0-beta.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.18"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0-beta.1"></script>
 ```

 <!-- vue3Scripts:end -->
@ -413,9 +413,18 @@ Static methods can be accessed from [`echarts` itself](https://echarts.apache.or

 If you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [CSSStyleSheet() constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility), you need to manually include `vue-echarts/style.css`.

-## Migration to v7
+## Migration to v8

-Read the breaking changes document in the [release log](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0) and the migration shoud be straightforward.
+> [!NOTE]
+> Please make sure to read the [upgrade guide](https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide/) for ECharts 6 as well.
+
+The following breaking changes are introduced in `vue-echarts@8`:
+
+- **Vue 2 support is dropped:** If you still need to stay on Vue 2, use [`vue-echarts@7`](https://github.com/ecomfe/vue-echarts/tree/7.x).
+
+- **Browser compatibility changes:** We no longer provide compatibility for browsers without native [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#browser_compatibility) support. If you need to support legacy browsers, you must transpile the code to ES5 yourself.
+
+- **CSP entry point removed:** The entry point `vue-echarts/csp` is removed. Use `vue-echarts` instead. You only need to manually include `vue-echarts/style.css` if you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility).

 ## Local development

--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@ -6,20 +6,20 @@

 ---

-> 还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh-Hans.md)
+> 还在使用 Vue 2？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/7.x/README.zh-Hans.md)

 ## 安装 & 使用

 ### npm

 ```sh
-npm add echarts vue-echarts
+npm install echarts vue-echarts
 ```

 #### 示例

 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>

 ```vue
 <template>
@ -114,14 +114,14 @@ import "echarts";
 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：

 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8-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@6.0.0-beta.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.18"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0-beta.1"></script>
 ```

 <!-- vue3Scripts:end -->
@ -270,11 +270,11 @@ import { provide } from "vue";

 provide(THEME_KEY, "dark");

-// or provide a ref
+// 或者 provide 一个 ref
 const theme = ref("dark");
 provide(THEME_KEY, theme);

-// getter is also supported
+// 也支持 getter
 provide(THEME_KEY, () => theme.value);
 ```

@ -295,7 +295,7 @@ export default {
  }
 }

-// Or make injections reactive
+// 或者让注入项具有响应性
 export default {
  data() {
    return {
@ -413,9 +413,18 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f

 如果你执行严格的 CSP 策略来防止内联 `<style>` 注入，**并且**需要兼容不支持 [CSSStyleSheet() 构造函数](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility) 的浏览器，则需要手动引入 `vue-echarts/style.css`。

-## 迁移到 v7
+## 迁移到 v8

-请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录，之后迁移过程应该会相对简单。
+> [!NOTE]
+> 请确保同时查阅 [ECharts 6 的升级指南](https://echarts.apache.org/handbook/zh/basics/release-note/v6-upgrade-guide/)。
+
+`vue-echarts@8` 引入了以下破坏性变更：
+
+- **Vue 2 支持已移除：** 如果你仍需要继续使用 Vue 2，请使用 [`vue-echarts@7`](https://github.com/ecomfe/vue-echarts/tree/7.x)。
+
+- **浏览器兼容性变更：** 我们不再为不支持原生 [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#browser_compatibility) 的浏览器提供兼容性支持。如果你需要支持旧版浏览器，必须自行将代码转译为 ES5。
+
+- **CSP 入口点已移除：** 入口点 `vue-echarts/csp` 已被移除。请使用 `vue-echarts` 替代。如果你执行严格的 CSP 策略来防止内联 `<style>` 注入，**并且**需要兼容不支持 [`CSSStyleSheet()` 构造函数](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility) 的浏览器，则需要手动引入 `vue-echarts/style.css`。

 ## 本地开发

--- a/demo/Demo.vue
+++ b/demo/Demo.vue
@ -151,13 +151,6 @@ a {
  }
 }

-h1,
-h2,
-h3 {
-  color: #2c3e50;
-  font-weight: 400;
-}
-
 h1 {
  margin-bottom: 1em;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
@ -260,6 +253,8 @@ footer {
 h1,
 h2,
 h3 {
+  color: #2c3e50;
+  font-weight: 400;
  a,
  a:hover {
    text-decoration: none;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-echarts",
-  "version": "7.0.3",
+  "version": "8.0.0-beta.1",
  "description": "Vue.js component for Apache ECharts™.",
  "license": "MIT",
  "repository": {
@ -18,7 +18,7 @@
    "dev:build": "vite build",
    "dev:preview": "vite preview",
    "dev:typecheck": "vue-tsc -p ./demo",
-    "docs": "node ./scripts/docs.mjs",
+    "docs": "jiti ./scripts/docs.ts",
    "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
  },
  "packageManager": "pnpm@10.14.0",
@ -35,37 +35,44 @@
    "dist"
  ],
  "peerDependencies": {
-    "echarts": "^6.0.0-beta.1",
+    "echarts": "^6.0.0",
    "vue": "^3.3.0"
  },
  "devDependencies": {
    "@highlightjs/vue-plugin": "^2.1.0",
-    "@types/node": "^22.15.21",
-    "@typescript-eslint/utils": "^8.32.1",
-    "@vercel/analytics": "^1.3.1",
+    "@types/node": "^22.17.0",
+    "@typescript-eslint/utils": "^8.39.0",
+    "@vercel/analytics": "^1.5.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
    "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^13.6.0",
    "comment-mark": "^2.0.1",
-    "echarts": "^6.0.0-beta.1",
+    "echarts": "^6.0.0",
    "echarts-gl": "^2.0.9",
    "echarts-liquidfill": "^3.1.0",
-    "esbuild-wasm": "^0.23.0",
-    "eslint": "^9.27.0",
-    "eslint-plugin-vue": "^10.1.0",
-    "highlight.js": "^11.10.0",
-    "jiti": "^2.4.2",
-    "pinia": "^3.0.2",
+    "esbuild-wasm": "^0.25.8",
+    "eslint": "^9.32.0",
+    "eslint-plugin-vue": "^10.4.0",
+    "highlight.js": "^11.11.1",
+    "jiti": "^2.5.1",
+    "pinia": "^3.0.3",
    "postcss-nested": "^7.0.2",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
    "publint": "^0.3.12",
-    "tsdown": "^0.13.2",
-    "typescript": "^5.8.3",
-    "unplugin-raw": "^0.5.0",
-    "vite": "npm:rolldown-vite@latest",
-    "vue": "^3.5.13",
+    "tsdown": "^0.13.3",
+    "typescript": "^5.9.2",
+    "unplugin-raw": "^0.5.1",
+    "vite": "npm:rolldown-vite@^7.1.0",
+    "vue": "^3.5.18",
    "vue-tsc": "^3.0.5"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "echarts": "6"
+      }
+    }
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/docs.mjs
+++ b/scripts/docs.mjs
@ -1,28 +1,34 @@
 import { readFileSync, writeFileSync } from "node:fs";
 import { commentMark } from "comment-mark";
-import { getPackageMeta, resolvePath } from "./utils.mjs";
+import { getPackageVersions, resolvePath } from "./utils";

-const { name, version } = getPackageMeta();
+const { name, version, devDependencies } = getPackageVersions([
+  "echarts",
+  "vue",
+]);

 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";

 const DEP_VERSIONS = {
-  vue: "3.5.13",
-  echarts: "6.0.0-beta.1",
+  ...Object.fromEntries(
+    Object.entries(devDependencies).map(([name, { version }]) => [
+      name,
+      version,
+    ]),
+  ),
  [name]: version,
 };

 function getScripts() {
-  const deps = ["vue", "echarts", name];
-  return deps
-    .map((dep) => {
+  return Object.entries(DEP_VERSIONS)
+    .map(([dep, version]) => {
      const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
-      return `<script src="${CDN_PREFIX}${name}@${DEP_VERSIONS[dep]}"></script>`;
+      return `<script src="${CDN_PREFIX}${name}@${version}"></script>`;
    })
    .join("\n");
 }

-function getCodeBlock(code) {
+function getCodeBlock(code: string) {
  return "\n```html\n" + code + "\n```\n";
 }

--- a/scripts/utils.mjs
+++ b/scripts/utils.mjs
@ -1,13 +0,0 @@
-import { readFileSync } from "node:fs";
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-export function resolvePath(url, ...parts) {
-  return resolve(dirname(fileURLToPath(url)), ...parts);
-}
-
-export function getPackageMeta() {
-  return JSON.parse(
-    readFileSync(resolvePath(import.meta.url, "../package.json"), "utf8"),
-  );
-}
--- a/scripts/utils.ts
+++ b/scripts/utils.ts
@ -0,0 +1,20 @@
+import { execSync } from "node:child_process";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export function resolvePath(url: string, ...parts: string[]) {
+  return resolve(dirname(fileURLToPath(url)), ...parts);
+}
+
+type PackageVersions = {
+  name: string;
+  version: string;
+  devDependencies: Record<string, { version: string }>;
+};
+
+export function getPackageVersions(devDeps?: string[]): PackageVersions {
+  const stdOut = execSync(`pnpm ls ${devDeps?.join(" ") || ""} --json`, {
+    encoding: "utf-8",
+  });
+  return JSON.parse(stdOut)[0];
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -1,5 +1,5 @@
 {
-  "include": ["*.config.*"],
+  "include": ["*.config.*", "scripts/**/*"],
  "compilerOptions": {
    "composite": true,
    "lib": ["ESNext"],