ecomfe · Justineo · Aug 7, 2025 · Aug 5, 2025 · Aug 6, 2025 · Aug 6, 2025
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
diff --git 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
diff --git 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
diff --git 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).

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 ---
 
-> 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
 
@@ -19,7 +19,7 @@ npm add 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/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0-beta.1"></script>
 ```
 
 <!-- vue3Scripts:end -->
@@ -415,9 +415,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
 

diff --git a/README.zh-Hans.md b/README.zh-Hans.md
@@ -6,7 +6,7 @@
 
 ---
 
-> 还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh_CN.md)
+> 还在使用 Vue 2？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/7.x/README.zh_CN.md)
 
 ## 安装 & 使用
 
@@ -19,7 +19,7 @@ npm add 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/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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 {
@@ -415,12 +415,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
 
-Translate:
-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]
+> 请确保同时查阅 [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。
 
-请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录，之后迁移过程应该会相对简单。
+- **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`。
 
 ## 本地开发
 

diff --git 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;

diff --git 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": "[email protected]",
@@ -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"
+      }
+    }
   }
 }