Skip to content

Commit 977db3d

Browse files
JustineoJustineo
committed
fix: autoresize now works for grid layout by default (#675)
1 parent 0bb1839 commit 977db3d

File tree

5 files changed

+106
-267
lines changed

5 files changed

+106
-267
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 6.3.3
2+
3+
* Make autoresize work for grid layout by default (#675).
4+
15
## 6.3.2
26

37
* Added basic types for events (only event names).

‎README.md

Lines changed: 50 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -20,101 +20,21 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
2020
$ npm install echarts vue-echarts
2121
```
2222

23-
To make `vue-echarts` work for *Vue 2* (<2.7.0), you need to have `@vue/composition-api` installed:
23+
To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
2424

2525
```sh
2626
npm i -D @vue/composition-api
2727
```
2828

29-
If you are using *NuxtJS* on top of *Vue 2* (<2.7.0), you'll also need `@nuxtjs/composition-api`:
29+
If you are using _NuxtJS_ on top of _Vue 2_ (<2.7.0), you'll also need `@nuxtjs/composition-api`:
3030

3131
```sh
3232
npm i -D @nuxtjs/composition-api
3333
```
3434

3535
And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`.
3636

37-
<details>
38-
<summary>Vue 3</summary>
39-
40-
```js
41-
import { createApp } from 'vue'
42-
import ECharts from 'vue-echarts'
43-
import { use } from "echarts/core"
44-
45-
// import ECharts modules manually to reduce bundle size
46-
import {
47-
CanvasRenderer
48-
} from 'echarts/renderers'
49-
import {
50-
BarChart
51-
} from 'echarts/charts'
52-
import {
53-
GridComponent,
54-
TooltipComponent
55-
} from 'echarts/components'
56-
57-
use([
58-
CanvasRenderer,
59-
BarChart,
60-
GridComponent,
61-
TooltipComponent
62-
])
63-
64-
const app = createApp(...)
65-
66-
// register globally (or you can do it locally)
67-
app.component('v-chart', ECharts)
68-
69-
app.mount(...)
70-
```
71-
72-
</details>
73-
74-
<details>
75-
<summary>Vue 2</summary>
76-
77-
```js
78-
import Vue from 'vue'
79-
import ECharts from 'vue-echarts'
80-
import { use } from 'echarts/core'
81-
82-
// import ECharts modules manually to reduce bundle size
83-
import {
84-
CanvasRenderer
85-
} from 'echarts/renderers'
86-
import {
87-
BarChart
88-
} from 'echarts/charts'
89-
import {
90-
GridComponent,
91-
TooltipComponent
92-
} from 'echarts/components'
93-
94-
use([
95-
CanvasRenderer,
96-
BarChart,
97-
GridComponent,
98-
TooltipComponent
99-
]);
100-
101-
// register globally (or you can do it locally)
102-
Vue.component('v-chart', ECharts)
103-
104-
new Vue(...)
105-
```
106-
107-
</details>
108-
109-
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)
110-
111-
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
112-
113-
```js
114-
import "echarts";
115-
```
116-
117-
#### SFC example
37+
#### Example
11838

11939
<details>
12040
<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";
12444
<v-chart class="chart" :option="option" />
12545
</template>
12646
127-
<script>
47+
<script setup>
12848
import { use } from "echarts/core";
12949
import { CanvasRenderer } from "echarts/renderers";
13050
import { PieChart } from "echarts/charts";
@@ -134,7 +54,7 @@ import {
13454
LegendComponent
13555
} from "echarts/components";
13656
import VChart, { THEME_KEY } from "vue-echarts";
137-
import { ref, defineComponent } from "vue";
57+
import { ref, provide } from "vue";
13858
13959
use([
14060
CanvasRenderer,
@@ -144,55 +64,44 @@ use([
14464
LegendComponent
14565
]);
14666
147-
export default defineComponent({
148-
name: "HelloWorld",
149-
components: {
150-
VChart
67+
provide(THEME_KEY, "dark");
68+
69+
const option = ref({
70+
title: {
71+
text: "Traffic Sources",
72+
left: "center"
15173
},
152-
provide: {
153-
[THEME_KEY]: "dark"
74+
tooltip: {
75+
trigger: "item",
76+
formatter: "{a} <br/>{b} : {c} ({d}%)"
15477
},
155-
setup () {
156-
const option = ref({
157-
title: {
158-
text: "Traffic Sources",
159-
left: "center"
160-
},
161-
tooltip: {
162-
trigger: "item",
163-
formatter: "{a} <br/>{b} : {c} ({d}%)"
164-
},
165-
legend: {
166-
orient: "vertical",
167-
left: "left",
168-
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
169-
},
170-
series: [
171-
{
172-
name: "Traffic Sources",
173-
type: "pie",
174-
radius: "55%",
175-
center: ["50%", "60%"],
176-
data: [
177-
{ value: 335, name: "Direct" },
178-
{ value: 310, name: "Email" },
179-
{ value: 234, name: "Ad Networks" },
180-
{ value: 135, name: "Video Ads" },
181-
{ value: 1548, name: "Search Engines" }
182-
],
183-
emphasis: {
184-
itemStyle: {
185-
shadowBlur: 10,
186-
shadowOffsetX: 0,
187-
shadowColor: "rgba(0, 0, 0, 0.5)"
188-
}
189-
}
78+
legend: {
79+
orient: "vertical",
80+
left: "left",
81+
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
82+
},
83+
series: [
84+
{
85+
name: "Traffic Sources",
86+
type: "pie",
87+
radius: "55%",
88+
center: ["50%", "60%"],
89+
data: [
90+
{ value: 335, name: "Direct" },
91+
{ value: 310, name: "Email" },
92+
{ value: 234, name: "Ad Networks" },
93+
{ value: 135, name: "Video Ads" },
94+
{ value: 1548, name: "Search Engines" }
95+
],
96+
emphasis: {
97+
itemStyle: {
98+
shadowBlur: 10,
99+
shadowOffsetX: 0,
100+
shadowColor: "rgba(0, 0, 0, 0.5)"
190101
}
191-
]
192-
});
193-
194-
return { option };
195-
}
102+
}
103+
}
104+
]
196105
});
197106
</script>
198107
@@ -299,6 +208,14 @@ export default {
299208

300209
</details>
301210

211+
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)
212+
213+
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
214+
215+
```js
216+
import "echarts";
217+
```
218+
302219
### CDN & Global variable
303220

304221
Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
@@ -448,6 +365,7 @@ import { THEME_KEY } from 'vue-echarts'
448365
> }
449366
> }
450367
> ```
368+
451369
</details>
452370
453371
### Methods
@@ -479,7 +397,7 @@ You can bind events with Vue's `v-on` directive.
479397
480398
```vue
481399
<template>
482-
<v-chart :option="option" @highlight="handleHighlight"/>
400+
<v-chart :option="option" @highlight="handleHighlight" />
483401
</template>
484402
```
485403

0 commit comments

Comments
 (0)