Skip to content

Commit 9a09a44

Browse files
ambit-tsaiambit-tsai
authored
Merge pull request #19 from ambit-tsai/dev
v1.4.0
2 parents 8bc4a81 + a9b85d3 commit 9a09a44

File tree

6 files changed

+57
-49
lines changed

6 files changed

+57
-49
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ Vue.use(plugin, { echarts }); // use as a plugin
117117
## props
118118
|Name|Type|Default|Reactive|Description|
119119
|-|-|-|-|-|
120-
|initTheme|object \| string|||The parameter `theme` of `echarts.init` method, <a href="https://echarts.apache.org/en/api.html#echarts.init" target="_blank">see</a>|
121-
|initOpts|object|||The parameter `opts` of `echarts.init` method, <a href="https://echarts.apache.org/en/api.html#echarts.init" target="_blank">see</a>|
120+
|initTheme|object \| string||✔|The parameter `theme` of `echarts.init` method, <a href="https://echarts.apache.org/en/api.html#echarts.init" target="_blank">see</a>|
121+
|initOpts|object||✔|The parameter `opts` of `echarts.init` method, <a href="https://echarts.apache.org/en/api.html#echarts.init" target="_blank">see</a>|
122122
|loading|boolean|false|✔|Shows loading animation|
123123
|loadingType|string|"default"||The parameter `type` of ECharts instance method `showLoading`, <a href="https://echarts.apache.org/en/api.html#echartsInstance.showLoading" target="_blank">see</a>|
124124
|loadingOpts|EChartsLoadingOption|||The parameter `opts` of ECharts instance method `showLoading`, <a href="https://echarts.apache.org/en/api.html#echartsInstance.showLoading" target="_blank">see</a>|

‎README.zh-CN.md

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ Vue.use(plugin, { echarts }); // 作为插件使用
117117
## props
118118
|名称|类型|默认值|响应性|说明|
119119
|-|-|-|-|-|
120-
|initTheme|object \| string|||`echarts.init` 方法的入参 `theme`，<a href="https://echarts.apache.org/zh/api.html#echarts.init" target="_blank">详见</a>|
121-
|initOpts|object|||`echarts.init` 方法的入参 `opts`，<a href="https://echarts.apache.org/zh/api.html#echarts.init" target="_blank">详见</a>|
120+
|initTheme|object \| string||✔|`echarts.init` 方法的入参 `theme`，<a href="https://echarts.apache.org/zh/api.html#echarts.init" target="_blank">详见</a>|
121+
|initOpts|object||✔|`echarts.init` 方法的入参 `opts`，<a href="https://echarts.apache.org/zh/api.html#echarts.init" target="_blank">详见</a>|
122122
|loading|boolean|false|✔|显示加载动画效果|
123123
|loadingType|string|"default"||ECharts 实例 `showLoading` 方法的入参 `type`，<a href="https://echarts.apache.org/zh/api.html#echartsInstance.showLoading" target="_blank">详见</a>|
124124
|loadingOpts|EChartsLoadingOption |||ECharts 实例 `showLoading` 方法的入参 `opts`，<a href="https://echarts.apache.org/zh/api.html#echartsInstance.showLoading" target="_blank">详见</a>|
@@ -145,17 +145,7 @@ Vue.use(plugin, { echarts }); // 作为插件使用
145145
|`removeResizeListener`(): void|移除 resize 监听器|
146146

147147

148-
## 🎉 招聘
149-
<a href="https://www.gaoding.com/" target="_blank">稿定科技</a>招人啦 👇联系我可内推，或是推荐给需要的朋友
150-
1. 地点：厦门、深圳、杭州
151-
1. 职位：**前端**、后端、SRE工程师、产品、测试、UI设计、运营、市场 ...
152-
1. 福利：双休、弹性上下班、六险一金、餐补、MacBook、人体工学椅、班车、零食供应 ...
153-
154-
*（🔓联系我解锁更多信息）*
155-
156-
157-
## ☎️ 联系
158-
1. *微信*: cai_fanwei
159-
1. *QQ*: 854521460
160-
1. *QQ群*: 663286147
161-
1. *邮箱*: [email protected]
148+
## 联系
149+
1. 微信: ambit_tsai
150+
1. QQ群: 663286147
151+
1. 邮箱: [email protected]

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "echarts-for-vue",
3-
"version": "1.3.0",
3+
"version": "1.4.0",
44
"description": "ECharts wrapper component for Vue 3, 2 and TypeScript",
55
"main": "dist/echarts-for-vue.js",
66
"module": "dist/echarts-for-vue.mjs",

‎src/ECharts.ts

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,32 +33,10 @@ export function createComponent({
3333
this.resize()
3434
this.$emit('resize')
3535
}),
36-
inst: undefined,
36+
inst: null,
3737
}),
3838
}
3939
},
40-
mounted(this: EChartsComponent) {
41-
const ctx = this
42-
const inst = echarts.init(ctx.$el, ctx.initTheme, ctx.initOpts)
43-
ctx.$data._private.inst = inst
44-
if (ctx.loading) {
45-
inst.showLoading(ctx.loadingType, ctx.loadingOpts)
46-
}
47-
if (ctx.events) {
48-
for (let args of ctx.events) {
49-
inst.on(...<[any, any]>args)
50-
}
51-
}
52-
if (ctx.autoResize) {
53-
ctx.addResizeListener()
54-
}
55-
if (ctx.option) {
56-
// Wait for rendering
57-
setTimeout(() => {
58-
ctx.setOption(ctx.option)
59-
})
60-
}
61-
},
6240
watch: {
6341
...commonOptions.watch,
6442
option: {
@@ -68,6 +46,37 @@ export function createComponent({
6846
deep: deepWatchOption,
6947
},
7048
},
49+
methods: {
50+
...commonOptions.methods,
51+
init(this: EChartsComponent) {
52+
const ctx = this
53+
const oldInst = ctx.inst
54+
if (oldInst) {
55+
oldInst.dispose()
56+
}
57+
const inst = echarts.init(ctx.$el, ctx.initTheme, ctx.initOpts)
58+
ctx.$data._private.inst = inst
59+
if (ctx.loading) {
60+
inst.showLoading(ctx.loadingType, ctx.loadingOpts)
61+
}
62+
if (ctx.events) {
63+
for (const args of ctx.events) {
64+
inst.on(...<[any, any]>args)
65+
}
66+
}
67+
if (ctx.option) {
68+
if (oldInst) {
69+
ctx.setOption(ctx.option)
70+
} else {
71+
// Wait for rendering
72+
setTimeout(() => ctx.setOption(ctx.option))
73+
}
74+
}
75+
if (ctx.autoResize) {
76+
ctx.addResizeListener()
77+
}
78+
},
79+
},
7180
}
7281
}
7382

‎src/EChartsComponent.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export type EChartsComponent = {
4141
events?: EventArguments[]
4242
autoResize: boolean
4343

44+
init(): void
4445
setOption(option: EChartOption, opts?: EChartsOptionConfig): void
4546
resize(): void
4647
addResizeListener(): void

‎src/common-options.ts

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { EChartsComponent } from './EChartsComponent.d'
22
import {
3-
ECharts,
43
EChartOption,
54
EChartsOptionConfig,
65
} from 'echarts'
@@ -26,15 +25,18 @@ export default {
2625
autoResize: {
2726
type: Boolean,
2827
default: true,
29-
}
30-
},
31-
32-
computed: {
33-
inst(this: EChartsComponent): ECharts {
34-
return this.$data._private.inst
3528
},
3629
},
3730

31+
mounted(this: EChartsComponent) {
32+
// Readonly property "inst"
33+
Object.defineProperty(this, 'inst', {
34+
get(this: EChartsComponent) {
35+
return this.$data._private.inst
36+
},
37+
})
38+
this.init()
39+
},
3840
activated(this: EChartsComponent) {
3941
if (this.autoResize) {
4042
this.addResizeListener()
@@ -45,6 +47,12 @@ export default {
4547
},
4648

4749
watch: {
50+
initTheme(this: EChartsComponent) {
51+
this.init()
52+
},
53+
initOpts(this: EChartsComponent) {
54+
this.init()
55+
},
4856
loading(this: EChartsComponent, val: boolean) {
4957
const ctx = this
5058
if (val) {

0 commit comments

Comments
 (0)