|
@@ -49,33 +49,105 @@ class EChartsComponent {
|
|
|
]
|
|
|
|
|
|
const echartsInstance = ECharts.init(el)
|
|
|
- const handler = {
|
|
|
- get: function (target, prop) {
|
|
|
- if (prop === 'setOption') {
|
|
|
- return function (option, ...args) {
|
|
|
- // 填充图例数据
|
|
|
- const { legend, ...options } = option
|
|
|
- if (legend) {
|
|
|
- Object.assign(legend, {
|
|
|
- data: options.series.map((item, index) => {
|
|
|
- return item.name || `系列${index + 1}`
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- // 合并颜色配置
|
|
|
- const mergedOption = {
|
|
|
- legend,
|
|
|
- color: defaultColors,
|
|
|
- ...options
|
|
|
- }
|
|
|
- // 调用原始的 setOption 方法
|
|
|
- return target[prop](mergedOption, ...args)
|
|
|
- }
|
|
|
+ // const handler = {
|
|
|
+ // get: function (target, prop) {
|
|
|
+ // if (prop === 'setOption') {
|
|
|
+ // return function (option, ...args) {
|
|
|
+ // // 填充图例数据
|
|
|
+ // const { legend, ...options } = option
|
|
|
+ // if (legend) {
|
|
|
+ // Object.assign(legend, {
|
|
|
+ // data: options.series.map((item, index) => {
|
|
|
+ // return item.name || `系列${index + 1}`
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // // 合并颜色配置
|
|
|
+ // const mergedOption = {
|
|
|
+ // legend,
|
|
|
+ // color: defaultColors,
|
|
|
+ // ...options
|
|
|
+ // }
|
|
|
+ // // 调用原始的 setOption 方法
|
|
|
+ // return target[prop](mergedOption, ...args)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // return target[prop]
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // this.el = new Proxy(echartsInstance, handler)
|
|
|
+ function createEchartsWrapper (echartsInstance) {
|
|
|
+ const wrapper = { el: echartsInstance }
|
|
|
+
|
|
|
+ // 保存原始 setOption 方法
|
|
|
+ const originalSetOption = echartsInstance.setOption
|
|
|
+
|
|
|
+ // 定义新的 setOption 方法
|
|
|
+ function wrappedSetOption (option, ...args) {
|
|
|
+ // 填充图例数据
|
|
|
+ const { legend, ...options } = option
|
|
|
+ if (legend) {
|
|
|
+ Object.assign(legend, {
|
|
|
+ data: options.series.map((item, index) => {
|
|
|
+ return item.name || `系列${index + 1}`
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 合并颜色配置
|
|
|
+ const mergedOption = {
|
|
|
+ legend,
|
|
|
+ color: defaultColors,
|
|
|
+ ...options
|
|
|
}
|
|
|
- return target[prop]
|
|
|
+
|
|
|
+ // 调用原始的 setOption 方法
|
|
|
+ return originalSetOption.call(echartsInstance, mergedOption, ...args)
|
|
|
}
|
|
|
+
|
|
|
+ // 使用 Object.defineProperty 定义 setOption 属性
|
|
|
+ Object.defineProperty(wrapper, 'setOption', {
|
|
|
+ get: function () {
|
|
|
+ return wrappedSetOption
|
|
|
+ },
|
|
|
+ enumerable: true,
|
|
|
+ configurable: true
|
|
|
+ })
|
|
|
+
|
|
|
+ // 代理其他属性和方法
|
|
|
+ Object.keys(echartsInstance).forEach(key => {
|
|
|
+ if (key !== 'setOption') { // 跳过已经处理的 setOption
|
|
|
+ Object.defineProperty(wrapper, key, {
|
|
|
+ get: function () {
|
|
|
+ return echartsInstance[key]
|
|
|
+ },
|
|
|
+ enumerable: true,
|
|
|
+ configurable: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 处理原型上的方法
|
|
|
+ const proto = Object.getPrototypeOf(echartsInstance)
|
|
|
+ Object.getOwnPropertyNames(proto).forEach(key => {
|
|
|
+ if (typeof proto[key] === 'function' && key !== 'constructor' && !Object.prototype.hasOwnProperty.call(wrapper, key)) {
|
|
|
+ Object.defineProperty(wrapper, key, {
|
|
|
+ get: function () {
|
|
|
+ return function (...args) {
|
|
|
+ return echartsInstance[key].apply(echartsInstance, args)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ enumerable: true,
|
|
|
+ configurable: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return wrapper
|
|
|
}
|
|
|
- this.el = new Proxy(echartsInstance, handler)
|
|
|
+
|
|
|
+ // 使用方式
|
|
|
+ this.el = createEchartsWrapper(echartsInstance)
|
|
|
}
|
|
|
|
|
|
getEl () {
|