mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-15 20:26:52 +08:00
docs: remove vue 2 related content
This commit is contained in:
Yue JIN
132
README.md
132
README.md
@ -96,100 +96,6 @@ const option = ref({
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue">Demo →</a></summary>
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<v-chart class="chart" :option="option" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { use } from "echarts/core";
|
|
||||||
import { CanvasRenderer } from "echarts/renderers";
|
|
||||||
import { PieChart } from "echarts/charts";
|
|
||||||
import {
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent
|
|
||||||
} from "echarts/components";
|
|
||||||
import VChart, { THEME_KEY } from "vue-echarts";
|
|
||||||
|
|
||||||
use([
|
|
||||||
CanvasRenderer,
|
|
||||||
PieChart,
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent
|
|
||||||
]);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "HelloWorld",
|
|
||||||
components: {
|
|
||||||
VChart
|
|
||||||
},
|
|
||||||
provide: {
|
|
||||||
[THEME_KEY]: "dark"
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
title: {
|
|
||||||
text: "Traffic Sources",
|
|
||||||
left: "center"
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
left: "left",
|
|
||||||
data: [
|
|
||||||
"Direct",
|
|
||||||
"Email",
|
|
||||||
"Ad Networks",
|
|
||||||
"Video Ads",
|
|
||||||
"Search Engines"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Traffic Sources",
|
|
||||||
type: "pie",
|
|
||||||
radius: "55%",
|
|
||||||
center: ["50%", "60%"],
|
|
||||||
data: [
|
|
||||||
{ value: 335, name: "Direct" },
|
|
||||||
{ value: 310, name: "Email" },
|
|
||||||
{ value: 234, name: "Ad Networks" },
|
|
||||||
{ value: 135, name: "Video Ads" },
|
|
||||||
{ value: 1548, name: "Search Engines" }
|
|
||||||
],
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
> [!IMPORTANT]
|
||||||
> We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an [import code generator](https://vue-echarts.dev/#codegen) to help you with that. You can just paste in your `option` code and we'll generate the precise import code for you.
|
> We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an [import code generator](https://vue-echarts.dev/#codegen) to help you with that. You can just paste in your `option` code and we'll generate the precise import code for you.
|
||||||
>
|
>
|
||||||
@ -341,7 +247,7 @@ See supported events [here →](https://echarts.apache.org/en/api.html#events)
|
|||||||
|
|
||||||
#### Native DOM Events
|
#### Native DOM Events
|
||||||
|
|
||||||
As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events (or you can use the `.native` modifier in Vue 2, which is dropped in Vue 3).
|
As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events.
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
@ -373,42 +279,6 @@ provide(THEME_KEY, 'dark')
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Vue 2</summary>
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { THEME_KEY } from 'vue-echarts'
|
|
||||||
|
|
||||||
// in component options
|
|
||||||
{
|
|
||||||
provide: {
|
|
||||||
[THEME_KEY]: 'dark'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
> **Note**
|
|
||||||
>
|
|
||||||
> You need to provide an object for Vue 2 if you want to change it dynamically.
|
|
||||||
>
|
|
||||||
> ```js
|
|
||||||
> // in component options
|
|
||||||
> {
|
|
||||||
> data () {
|
|
||||||
> return {
|
|
||||||
> theme: { value: 'dark' }
|
|
||||||
> }
|
|
||||||
> },
|
|
||||||
> provide () {
|
|
||||||
> return {
|
|
||||||
> [THEME_KEY]: this.theme
|
|
||||||
> }
|
|
||||||
> }
|
|
||||||
> }
|
|
||||||
> ```
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
- `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption)
|
- `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption)
|
||||||
|
|||||||
@ -96,100 +96,6 @@ const option = ref({
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue">Demo →</a></summary>
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<v-chart class="chart" :option="option" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { use } from "echarts/core";
|
|
||||||
import { CanvasRenderer } from "echarts/renderers";
|
|
||||||
import { PieChart } from "echarts/charts";
|
|
||||||
import {
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent
|
|
||||||
} from "echarts/components";
|
|
||||||
import VChart, { THEME_KEY } from "vue-echarts";
|
|
||||||
|
|
||||||
use([
|
|
||||||
CanvasRenderer,
|
|
||||||
PieChart,
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
LegendComponent
|
|
||||||
]);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "HelloWorld",
|
|
||||||
components: {
|
|
||||||
VChart
|
|
||||||
},
|
|
||||||
provide: {
|
|
||||||
[THEME_KEY]: "dark"
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
title: {
|
|
||||||
text: "Traffic Sources",
|
|
||||||
left: "center"
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
|
||||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
left: "left",
|
|
||||||
data: [
|
|
||||||
"Direct",
|
|
||||||
"Email",
|
|
||||||
"Ad Networks",
|
|
||||||
"Video Ads",
|
|
||||||
"Search Engines"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Traffic Sources",
|
|
||||||
type: "pie",
|
|
||||||
radius: "55%",
|
|
||||||
center: ["50%", "60%"],
|
|
||||||
data: [
|
|
||||||
{ value: 335, name: "Direct" },
|
|
||||||
{ value: 310, name: "Email" },
|
|
||||||
{ value: 234, name: "Ad Networks" },
|
|
||||||
{ value: 135, name: "Video Ads" },
|
|
||||||
{ value: 1548, name: "Search Engines" }
|
|
||||||
],
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
> [!IMPORTANT]
|
||||||
> 我们鼓励手动从 ECharts 中引入组件和图表，以减小打包体积。我们已经为此构建了一个[导入代码生成器](https://vue-echarts.dev/#codegen)。你只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。
|
> 我们鼓励手动从 ECharts 中引入组件和图表，以减小打包体积。我们已经为此构建了一个[导入代码生成器](https://vue-echarts.dev/#codegen)。你只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。
|
||||||
>
|
>
|
||||||
@ -341,7 +247,7 @@ Vue-ECharts 支持如下事件：
|
|||||||
|
|
||||||
#### 原生 DOM 事件
|
#### 原生 DOM 事件
|
||||||
|
|
||||||
由于 Vue-ECharts 默认将事件绑定到 ECharts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 `native:` 前缀来绑定原生 DOM 事件（可以在 Vue 2 中也可以使用 `.native` 修饰符，但这在 Vue 3 中已被废弃）。
|
由于 Vue-ECharts 默认将事件绑定到 ECharts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 `native:` 前缀来绑定原生 DOM 事件。
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
@ -373,42 +279,6 @@ provide(THEME_KEY, 'dark')
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Vue 2</summary>
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { THEME_KEY } from 'vue-echarts'
|
|
||||||
|
|
||||||
// 组件选项中
|
|
||||||
{
|
|
||||||
provide: {
|
|
||||||
[THEME_KEY]: 'dark'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
> **Note**
|
|
||||||
>
|
|
||||||
> 在 Vue 2 中，如果你想动态地改变这些选项，那么你需要提供一个对象。
|
|
||||||
>
|
|
||||||
> ```js
|
|
||||||
> // 组件选项中
|
|
||||||
> {
|
|
||||||
> data () {
|
|
||||||
> return {
|
|
||||||
> theme: { value: 'dark' }
|
|
||||||
> }
|
|
||||||
> },
|
|
||||||
> provide () {
|
|
||||||
> return {
|
|
||||||
> [THEME_KEY]: this.theme
|
|
||||||
> }
|
|
||||||
> }
|
|
||||||
> }
|
|
||||||
> ```
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### 方法
|
### 方法
|
||||||
|
|
||||||
- `setOption` [→](https://echarts.apache.org/zh/api.html#echartsInstance.setOption)
|
- `setOption` [→](https://echarts.apache.org/zh/api.html#echartsInstance.setOption)
|
||||||
|
|||||||
@ -7,13 +7,13 @@ const { name, version } = getPackageMeta();
|
|||||||
const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
|
const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
|
||||||
|
|
||||||
const DEP_VERSIONS = {
|
const DEP_VERSIONS = {
|
||||||
"vue@3": "3.5.13",
|
vue: "3.5.13",
|
||||||
echarts: "5.5.1",
|
echarts: "5.5.1",
|
||||||
[name]: version
|
[name]: version
|
||||||
};
|
};
|
||||||
|
|
||||||
function getScripts() {
|
function getScripts() {
|
||||||
const deps = ["vue@3", "echarts", name];
|
const deps = ["vue", "echarts", name];
|
||||||
return deps
|
return deps
|
||||||
.map(dep => {
|
.map(dep => {
|
||||||
const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
|
const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
|
||||||
|
|||||||
Reference in New Issue
Block a user