javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-16 12:52:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: autoresize now works for grid layout by default (#675)

Browse Source
This commit is contained in:
Justineo
2022-12-19 02:02:43 +08:00
parent 0bb1839392
commit 977db3d415
5 changed files with 110 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -1,3 +1,7 @@
## 6.3.3
* Make autoresize work for grid layout by default (#675).
## 6.3.2 ## 6.3.2
* Added basic types for events (only event names). * Added basic types for events (only event names).

186
README.md
View File

@ -20,13 +20,13 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
$ npm install echarts vue-echarts $ npm install echarts vue-echarts
``` ```
To make `vue-echarts` work for *Vue 2* (<2.7.0), you need to have `@vue/composition-api` installed: To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
```sh ```sh
npm i -D @vue/composition-api npm i -D @vue/composition-api
``` ```
If you are using *NuxtJS* on top of *Vue 2* (<2.7.0), you'll also need `@nuxtjs/composition-api`: If you are using _NuxtJS_ on top of _Vue 2_ (<2.7.0), you'll also need `@nuxtjs/composition-api`:
```sh ```sh
npm i -D @nuxtjs/composition-api npm i -D @nuxtjs/composition-api
@ -34,87 +34,7 @@ npm i -D @nuxtjs/composition-api
And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`. And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`.
<details> #### Example
<summary>Vue 3</summary>
```js
import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core"
// import ECharts modules manually to reduce bundle size
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
])
const app = createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', ECharts)
app.mount(...)
```
</details>
<details>
<summary>Vue 2</summary>
```js
import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// import ECharts modules manually to reduce bundle size
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
]);
// register globally (or you can do it locally)
Vue.component('v-chart', ECharts)
new Vue(...)
```
</details>
We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
```js
import "echarts";
```
#### SFC example
<details> <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-vue-3?file=src%2FApp.vue">Demo →</a></summary>
@ -124,7 +44,7 @@ import "echarts";
<v-chart class="chart" :option="option" /> <v-chart class="chart" :option="option" />
</template> </template>
<script> <script setup>
import { use } from "echarts/core"; import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts"; import { PieChart } from "echarts/charts";
@ -134,7 +54,7 @@ import {
LegendComponent LegendComponent
} from "echarts/components"; } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts"; import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue"; import { ref, provide } from "vue";
use([ use([
CanvasRenderer, CanvasRenderer,
@ -144,55 +64,44 @@ use([
LegendComponent LegendComponent
]); ]);
export default defineComponent({ provide(THEME_KEY, "dark");
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "dark"
},
setup () {
const option = ref({
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)"
}
}
}
]
});
return { option }; const option = ref({
} 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> </script>
@ -299,6 +208,14 @@ export default {
</details> </details>
We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
```js
import "echarts";
```
### CDN & Global variable ### CDN & Global variable
Drop `<script>` inside your HTML file and access the component via `window.VueECharts`. Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
@ -448,6 +365,7 @@ import { THEME_KEY } from 'vue-echarts'
> } > }
> } > }
> ``` > ```
</details> </details>
### Methods ### Methods
@ -479,7 +397,7 @@ You can bind events with Vue's `v-on` directive.
```vue ```vue
<template> <template>
<v-chart :option="option" @highlight="handleHighlight"/> <v-chart :option="option" @highlight="handleHighlight" />
</template> </template>
``` ```

187
README.zh-Hans.md
View File

@ -18,13 +18,13 @@
$ npm install echarts vue-echarts $ npm install echarts vue-echarts
``` ```
要在 *Vue 2*（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装： 要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
```sh ```sh
npm i -D @vue/composition-api npm i -D @vue/composition-api
``` ```
如果你在使用基于 *Vue 2*（<2.7.0）的 *NuxtJS*，那么还需要安装 `@nuxtjs/composition-api`： 如果你在使用基于 _Vue 2_（<2.7.0）的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
```sh ```sh
npm i -D @nuxtjs/composition-api npm i -D @nuxtjs/composition-api
@ -32,87 +32,7 @@ npm i -D @nuxtjs/composition-api
然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。 然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。
<details> #### 示例
<summary>Vue 3</summary>
```js
import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";
// 手动引入 ECharts 各模块来减小打包体积
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
]);
const app = createApp(...)
// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)
app.mount(...)
```
</details>
<details>
<summary>Vue 2</summary>
```js
import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 手动引入 ECharts 各模块来减小打包体积
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
]);
// 全局注册组件（也可以使用局部注册）
Vue.component('v-chart', ECharts)
new Vue(...)
```
</details>
为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
```js
import "echarts";
```
#### 单文件组件示例
<details> <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-vue-3?file=src%2FApp.vue">Demo →</a></summary>
@ -122,7 +42,7 @@ import "echarts";
<v-chart class="chart" :option="option" /> <v-chart class="chart" :option="option" />
</template> </template>
<script> <script setup>
import { use } from "echarts/core"; import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts"; import { PieChart } from "echarts/charts";
@ -132,7 +52,7 @@ import {
LegendComponent LegendComponent
} from "echarts/components"; } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts"; import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue"; import { ref, provide } from "vue";
use([ use([
CanvasRenderer, CanvasRenderer,
@ -142,55 +62,44 @@ use([
LegendComponent LegendComponent
]); ]);
export default defineComponent({ provide(THEME_KEY, "dark");
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "dark"
},
setup: () => {
const option = ref({
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)"
}
}
}
]
});
return { option }; const option = ref({
} 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> </script>
@ -297,6 +206,14 @@ export default {
</details> </details>
为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
```js
import "echarts";
```
### CDN & 全局变量 ### CDN & 全局变量
用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口： 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
@ -304,7 +221,6 @@ export default {
<details> <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-vue-3-global?file=index.html">Demo →</a></summary>
<!-- vue3Scripts:start --> <!-- vue3Scripts:start -->
```html ```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script> <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
@ -396,7 +312,7 @@ Vue.component("v-chart", VueECharts);
```vue ```vue
<template> <template>
<v-chart :option="option" @highlight="handleHighlight"/> <v-chart :option="option" @highlight="handleHighlight" />
</template> </template>
``` ```
@ -509,6 +425,7 @@ import { THEME_KEY } from 'vue-echarts'
> } > }
> } > }
> ``` > ```
</details> </details>
### 方法 ### 方法

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-echarts", "name": "vue-echarts",
"version": "6.3.2", "version": "6.3.3",
"description": "Vue.js component for Apache ECharts.", "description": "Vue.js component for Apache ECharts.",
"author": "GU Yiling <justice360@gmail.com>", "author": "GU Yiling <justice360@gmail.com>",
"scripts": { "scripts": {

2
src/style.css
View File

@ -1 +1 @@
x-vue-echarts{display:block;width:100%;height:100%} x-vue-echarts{display:block;width:100%;height:100%;min-width:0}