diff --git a/CHANGELOG.md b/CHANGELOG.md index 11d0b9c..a3321c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 6.3.3 + +* Make autoresize work for grid layout by default (#675). + ## 6.3.2 * Added basic types for events (only event names). diff --git a/README.md b/README.md index 513d422..58f5281 100644 --- a/README.md +++ b/README.md @@ -20,13 +20,13 @@ Not ready yet? Read documentation for older versions [here →](https://github.c $ 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 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 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`. -
-Vue 3 - -```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(...) -``` - -
- -
-Vue 2 - -```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(...) -``` - -
- -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 +#### Example
Vue 3 Demo → @@ -124,7 +44,7 @@ import "echarts"; - @@ -299,6 +208,14 @@ export default {
+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 Drop ` @@ -297,6 +206,14 @@ export default { +为了更小的打包体积,我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts) + +但如果你实在需要全量引入 ECharts 从而无需手动引入模块,只需要在代码中添加: + +```js +import "echarts"; +``` + ### CDN & 全局变量 用如下方式在 HTML 中插入 ` @@ -396,7 +312,7 @@ Vue.component("v-chart", VueECharts); ```vue ``` @@ -509,6 +425,7 @@ import { THEME_KEY } from 'vue-echarts' > } > } > ``` + ### 方法 diff --git a/package.json b/package.json index a6ea558..349d5be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-echarts", - "version": "6.3.2", + "version": "6.3.3", "description": "Vue.js component for Apache ECharts.", "author": "GU Yiling ", "scripts": { diff --git a/src/style.css b/src/style.css index 9b50eaf..5d9377e 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1 @@ -x-vue-echarts{display:block;width:100%;height:100%} +x-vue-echarts{display:block;width:100%;height:100%;min-width:0}