complete metrics
diff --git a/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/MetricsCollectController.java b/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/MetricsCollectController.java
index 9e3d62a..63d1da7 100644
--- a/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/MetricsCollectController.java
+++ b/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/MetricsCollectController.java
@@ -20,6 +20,7 @@
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import org.apache.dubbo.admin.common.util.Constants;
+import org.apache.dubbo.admin.common.util.Tool;
import org.apache.dubbo.admin.model.domain.Consumer;
import org.apache.dubbo.admin.model.domain.Provider;
import org.apache.dubbo.admin.model.dto.MetricDTO;
@@ -34,6 +35,7 @@
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.PathVariable;
+import sun.jvm.hotspot.oops.Metadata;
import java.util.Map;
import java.util.HashMap;
@@ -72,9 +74,8 @@
@RequestMapping( value = "/ipAddr", method = RequestMethod.GET)
public List<MetricDTO> searchService(@RequestParam String ip, @RequestParam String group, @PathVariable String env) {
- System.out.println(ip);
- Map<String, String> configMap = new HashMap<String, String>();
- addMetricsConfigToMap(configMap);
+ Map<String, String> configMap = new HashMap<>();
+ addMetricsConfigToMap(configMap, ip);
// default value
if (configMap.size() <= 0) {
@@ -90,37 +91,28 @@
return metricDTOS;
}
- protected void addMetricsConfigToMap(Map<String, String> configMap) {
- Set<String> services = providerService.findServices();
- services.addAll(consumerService.findServices());
- Iterator<String> it = services.iterator();
- while (it.hasNext()) {
- String service = it.next();
- List<Provider> providers = providerService.findByService(service);
- List<Consumer> consumers = consumerService.findByService(service);
- String providerApplication = null;
- String consumerApplication = null;
- providerApplication = providers.get(0).getApplication();
- consumerApplication = consumers.get(0).getApplication();
-
- MetadataIdentifier providerMetadataIdentifier = new MetadataIdentifier(service
- ,null,null, Constants.PROVIDER_SIDE ,providerApplication);
- MetadataIdentifier consumerMetadataIdentifier = new MetadataIdentifier(service
- ,null,null, Constants.CONSUMER_SIDE ,consumerApplication);
-
- if (consumerApplication != null) {
- String consumerMetadata = consumerService.getConsumerMetadata(consumerMetadataIdentifier);
- Map<String, String> consumerParameters = new Gson().fromJson(consumerMetadata, Map.class);
+ protected void addMetricsConfigToMap(Map<String, String> configMap, String ip) {
+ List<Provider> providers = providerService.findByAddress(ip);
+ if (providers.size() > 0) {
+ Provider provider = providers.get(0);
+ String service = provider.getService();
+ MetadataIdentifier providerIdentifier = new MetadataIdentifier(Tool.getInterface(service), Tool.getVersion(service), Tool.getGroup(service),
+ Constants.PROVIDER_SIDE, provider.getApplication());
+ String metaData = providerService.getProviderMetaData(providerIdentifier);
+ FullServiceDefinition providerServiceDefinition = new Gson().fromJson(metaData, FullServiceDefinition.class);
+ Map<String, String> parameters = providerServiceDefinition.getParameters();
+ configMap.put(parameters.get(Constants.METRICS_PORT), parameters.get(Constants.METRICS_PROTOCOL));
+ } else {
+ List<Consumer> consumers = consumerService.findByAddress(ip);
+ if (consumers.size() > 0) {
+ Consumer consumer = consumers.get(0);
+ String service = consumer.getService();
+ MetadataIdentifier consumerIdentifier = new MetadataIdentifier(Tool.getInterface(service), Tool.getVersion(service), Tool.getGroup(service),
+ Constants.CONSUMER_SIDE, consumer.getApplication());
+ String metaData = consumerService.getConsumerMetadata(consumerIdentifier);
+ Map<String, String> consumerParameters = new Gson().fromJson(metaData, Map.class);
configMap.put(consumerParameters.get(Constants.METRICS_PORT), consumerParameters.get(Constants.METRICS_PROTOCOL));
}
-
- if (providerApplication != null) {
- String providerMetaData = providerService.getProviderMetaData(providerMetadataIdentifier);
- FullServiceDefinition providerServiceDefinition = new Gson().fromJson(providerMetaData, FullServiceDefinition.class);
- Map<String, String> parameters = providerServiceDefinition.getParameters();
- configMap.put(parameters.get(Constants.METRICS_PORT), parameters.get(Constants.METRICS_PROTOCOL));
- }
}
- configMap.remove(null);
}
}
diff --git a/dubbo-admin-ui/package.json b/dubbo-admin-ui/package.json
index ed9a87b..c797a4d 100644
--- a/dubbo-admin-ui/package.json
+++ b/dubbo-admin-ui/package.json
@@ -13,12 +13,14 @@
"dependencies": {
"axios": "^0.18.0",
"brace": "^0.11.1",
+ "echarts": "^4.2.1",
"http-status": "^1.2.0",
"js-yaml": "^3.12.0",
"jsoneditor": "^5.26.2",
"lodash": "^4.17.11",
"vue": "^2.5.2",
"vue-clipboard2": "^0.2.1",
+ "vue-echarts": "^4.0.1",
"vue-i18n": "^8.6.0",
"vue-router": "^3.0.1",
"vuetify": "^1.2.2",
diff --git a/dubbo-admin-ui/src/components/metrics/ServiceMetrics.vue b/dubbo-admin-ui/src/components/metrics/ServiceMetrics.vue
index 36416f1..44b043f 100644
--- a/dubbo-admin-ui/src/components/metrics/ServiceMetrics.vue
+++ b/dubbo-admin-ui/src/components/metrics/ServiceMetrics.vue
@@ -29,33 +29,11 @@
<v-card-text>
<h4>Provider (Total)</h4>
<hr style="height:3px;border:none;border-top:3px double #9D9D9D;" />
- <mini-chart
- title="qps(ms)"
- :sub-title="majorDataMap.provider.qps"
- :icon="majorDataMap.provider.qps_trending"
- :data="dataset.monthVisit"
- :chart-color="color.blue.base"
- type="line"
- ></mini-chart>
+ <chart ref="chart1" :options="provider.qps" :autoresize="true"/>
<hr style="height:1px;border:none;border-top:1px solid #ADADAD;" />
- <mini-chart
- title="rt(ms)"
- :sub-title="majorDataMap.provider.rt"
- :icon="majorDataMap.provider.rt_trending"
- :data="dataset.monthVisit"
- :chart-color="color.blue.base"
- type="line"
- class="minichart"
- ></mini-chart>
+ <chart ref="chart1" :options="provider.rt" :autoresize="true" />
<hr style="height:1px;border:none;border-top:1px solid #ADADAD;" />
- <mini-chart
- title="success rate"
- :sub-title="majorDataMap.provider.success_rate"
- :icon="majorDataMap.provider.success_rate_trending"
- :data="dataset.monthVisit"
- :chart-color="color.blue.base"
- type="line"
- ></mini-chart>
+ <chart ref="chart1" :options="provider.success_rate" :autoresize="true" />
<hr style="height:1px;border:none;border-top:1px solid #ADADAD;" />
</v-card-text>
</v-card>
@@ -65,32 +43,11 @@
<v-card-text>
<h4>Consumer (Total)</h4>
<hr style="height:3px;border:none;border-top:3px double #9D9D9D;" />
- <mini-chart
- title="qps(ms)"
- :sub-title="majorDataMap.consumer.qps"
- :icon="majorDataMap.consumer.qps_trending"
- :data="dataset.monthVisit"
- :chart-color="color.blue.base"
- type="line"
- ></mini-chart>
+ <chart ref="chart1" :options="consumer.qps" :autoresize="true" />
<hr style="height:1px;border:none;border-top:1px solid #ADADAD;" />
- <mini-chart
- title="rt(ms)"
- :sub-title="majorDataMap.consumer.rt"
- :icon="majorDataMap.consumer.rt_trending"
- :data="dataset.monthVisit"
- :chart-color="color.blue.base"
- type="line"
- ></mini-chart>
+ <chart ref="chart1" :options="consumer.rt" :autoresize="true" />
<hr style="height:1px;border:none;border-top:1px solid #ADADAD;" />
- <mini-chart
- title="success rate"
- :sub-title="majorDataMap.consumer.success_rate"
- :icon="majorDataMap.consumer.success_rate_trending"
- :data="dataset.monthVisit"
- :chart-color="color.blue.base"
- type="line"
- ></mini-chart>
+ <chart ref="chart1" :options="consumer.success_rate" :autoresize="true" />
<hr style="height:1px;border:none;border-top:1px solid #ADADAD;" />
</v-card-text>
</v-card>
@@ -182,33 +139,168 @@
</template>
<script>
- import EChart from '@/util/echart'
import Material from 'vuetify/es5/util/colors'
- import MiniChart from '@/components/public/MiniChart'
import Breadcrumb from '@/components/public/Breadcrumb'
import Search from '@/components/public/Search'
- import {
- campaignData,
- locationData,
- StackData,
- SinData
- } from '@/api/chart'
-
- const shortMonth = [
- 1, 2, 3, 4, 5, 6
- ]
export default {
name: 'ServiceMetrics',
components: {
- MiniChart,
- EChart,
Breadcrumb,
Search
},
data () {
return {
+ provider: {
+ metrics: [
+ 'dubbo.provider.qps', 'dubbo.provider.rt', 'dubbo.provider.success_rate'
+ ],
+ qps: {
+ title: {
+ text: 'qps',
+ padding: [50, 5, 5, 5],
+ textStyle: {
+ fontWeight: 200,
+ fontSize: 12
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ show: false,
+ type: 'category',
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ yAxis: {
+ show: false
+ },
+ series: [{
+ type: 'line',
+ data: []
+ }]
+ },
+ rt: {
+ title: {
+ text: 'rt(ms)',
+ padding: [50, 5, 5, 5],
+ textStyle: {
+ fontWeight: 200,
+ fontSize: 12
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ show: false,
+ type: 'category',
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ yAxis: {
+ show: false
+ },
+ series: [{
+ type: 'line',
+ data: []
+ }]
+ },
+ success_rate: {
+ title: {
+ text: 'success rate',
+ padding: [50, 5, 5, 5],
+ textStyle: {
+ fontWeight: 200,
+ fontSize: 12
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ show: false,
+ type: 'category',
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ yAxis: {
+ show: false
+ },
+ series: [{
+ type: 'line',
+ data: []
+ }]
+ }
+ },
+ consumer: {
+ metrics: [
+ 'dubbo.consumer.qps', 'dubbo.consumer.rt', 'dubbo.consumer.success_rate'
+ ],
+ qps: {
+ title: {
+ text: 'qps',
+ padding: [50, 5, 5, 5],
+ textStyle: {
+ fontWeight: 200,
+ fontSize: 12
+ }
+
+ },
+ tooltip: {},
+ xAxis: {
+ show: false,
+ type: 'category',
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ yAxis: {
+ show: false
+ },
+ series: [{
+ type: 'line',
+ data: []
+ }]
+ },
+ rt: {
+ title: {
+ text: 'rt(ms)',
+ padding: [50, 5, 5, 5],
+ textStyle: {
+ fontWeight: 200,
+ fontSize: 12
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ show: false,
+ type: 'category',
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ yAxis: {
+ show: false
+ },
+ series: [{
+ type: 'line',
+ data: []
+ }]
+ },
+ success_rate: {
+ title: {
+ text: 'success rate',
+ padding: [50, 5, 5, 5],
+ textStyle: {
+ fontWeight: 200,
+ fontSize: 12
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ show: false,
+ type: 'category',
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ yAxis: {
+ show: false
+ },
+ series: [{
+ type: 'line',
+ data: []
+ }]
+ }
+ },
threadPoolData: {
'core': 0,
'max': 0,
@@ -218,73 +310,12 @@
'active_trending': '',
'activert': 0
},
- echartMap: {
- 'provider': [{
- 'timestamp': 0,
- 'qps': 0,
- 'tt': 0,
- 'success_rate': 0
- }],
- 'consumer': [{
- 'timestamp': 0,
- 'qps': 0,
- 'tt': 0,
- 'success_rate': 0
- }]
- },
- majorDataMap: {
- provider: {
- qps: '0',
- qps_trending: '',
- rt: '0',
- rt_trending: '',
- success_rate: '0%',
- success_rate_trending: ''
- },
- consumer: {
- qps: '0',
- qps_trending: '',
- rt: '0',
- rt_trending: '',
- success_rate: '0%',
- success_rate_trending: ''
- },
- threadPool: {}
- },
selectedTab: 'tab-1',
filter: '',
headers: [],
- providerDetails: [
- {
- service: 'a.b.c.d',
- method: 'aaaa~ICS',
- qps: '0.58',
- rt: '111',
- success_rate: '100%'
- },
- {
- service: 'a.b.c.f',
- method: 'bbbb~ICS',
- qps: '0.87',
- rt: '120',
- success_rate: '90%'
- }
-
- ],
+ providerDetails: [],
consumerDetails: [],
option: null,
- dataset: {
- sinData: SinData,
- monthVisit: shortMonth.map(m => {
- return {
- 'time': m,
- 'Value': Math.floor(Math.random() * 1000) + 200
- }
- }),
- campaign: campaignData,
- location: locationData,
- stackData: StackData
- },
color: Material,
breads: [
{
@@ -299,21 +330,17 @@
* */
methods: {
submit: function () {
- this.vv = 20
- //这里变不了我就很迷了
- this.dataset.monthVisit = [{'time': 1, 'Value': 200}]
- this.filter = this.filter.trim()
- this.searchByIp(this.filter)
+ this.searchByIp(this.filter, true)
},
- setRandomValue: function (data) {
- for (let i in data) {
- data[i]['value'] = Math.floor(Math.random() * 1000) + 200
+ searchByIp: function (filter, rewrite) {
+ if (this.filter === '') {
+ return
}
- return data
- },
- searchByIp: function (filter) {
- //TODO 到时候记得把filter塞进来
- let url = '/metrics/ipAddr/?ip' + '=127.0.0.1' + '&group=dubbo'
+
+ if (rewrite) {
+ this.$router.push({path: '/metrics', query: {ip: this.filter}})
+ }
+ let url = '/metrics/ipAddr/?ip=' + filter + '&group=dubbo'
this.$axios.get(url)
.then(response => {
if (!response.data) {
@@ -338,42 +365,36 @@
}
this.threadPoolData.activert = (100 * this.threadPoolData.active / this.threadPoolData.current).toFixed(2)
},
+ getKey: function (key) {
+ return key.substring(key.lastIndexOf('.') + 1)
+ },
dealMajor: function (data) {
for (let index in data) {
let metricsDTO = data[index]
- if (metricsDTO['metricLevel'] === 'MAJOR' && (metricsDTO['metric']).indexOf('threadPool') === -1) {
- let metric = metricsDTO['metric'] + ''
- let provider = metric.split('.')[1]
- metric = metric.substring(metric.lastIndexOf('.') + 1)
- this.dealEchartData(metricsDTO, provider, metric)
- if (typeof metricsDTO.value !== 'string') {
- metricsDTO.value = metricsDTO.value.toFixed(2)
+ if (this.provider.metrics.indexOf(metricsDTO['metric']) !== -1) {
+ let key = this.getKey(metricsDTO['metric'])
+ let data = this.provider[key].series[0].data
+ if (data.length === 10) {
+ data.push(metricsDTO['value'])
+ data.shift()
+ } else {
+ data.push(metricsDTO['value'])
}
- if (this.majorDataMap[provider][metric]) {
- let trending = metric + '_trending'
- this.majorDataMap[provider][trending] = this.dealTrending(this.majorDataMap[provider][metric], metricsDTO.value)
- this.majorDataMap[provider][metric] = metricsDTO.value
+ this.provider[key].series.data = data
+ }
+ if (this.consumer.metrics.indexOf(metricsDTO['metric']) !== -1) {
+ let key = this.getKey(metricsDTO['metric'])
+ let data = this.consumer[key].series[0].data
+ if (data.length === 10) {
+ data.push(metricsDTO['value'])
+ data.shift()
+ } else {
+ data.push(metricsDTO['value'])
}
+ this.consumer[key].series.data = data
}
}
},
- dealEchartData: function (metricsDTO, provider, metric) {
- //这一块
- let timestamp = metricsDTO['timestamp']
- let arr = this.echartMap[provider]
- let lastTime = arr[arr.length - 1]['timestamp']
- if (timestamp > lastTime) {
- arr.push({
- 'timestamp': timestamp,
- metric: metricsDTO['value']
- })
- if (arr.length > 10) {
- arr.shift()
- }
- } else {
- arr[arr.length - 1][metric] = metricsDTO['value']
- }
- },
dealNormal: function (data) {
let serviceMethodMap = {}
for (let index in data) {
@@ -455,13 +476,29 @@
},
mounted: function () {
this.setHeaders()
+ let filter = null
+ let query = this.$route.query
+ Object.keys(query).forEach(function (key) {
+ if (key === 'ip') {
+ filter = query[key]
+ }
+ })
+ if (filter !== null) {
+ this.filter = filter
+ this.searchByIp(this.filter, false)
+ }
setInterval(() => {
- this.submit()
+ this.searchByIp(this.filter, false)
}, 5000)
}
}
</script>
<style scoped>
+ .echarts {
+ width: 105%;
+ height: 68px;
+ }
+
</style>
diff --git a/dubbo-admin-ui/src/main.js b/dubbo-admin-ui/src/main.js
index 181680d..b161680 100644
--- a/dubbo-admin-ui/src/main.js
+++ b/dubbo-admin-ui/src/main.js
@@ -26,6 +26,10 @@
import Notify from './components/public/notify'
import { AXIOS } from './components/http-common'
import i18n from './lang'
+import ECharts from 'vue-echarts/components/ECharts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/title'
import VueClipboard from 'vue-clipboard2'
Vue.use(Vuetify, {
@@ -41,6 +45,7 @@
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)
+Vue.component('chart', ECharts)
/* eslint-disable no-new */
new Vue({
diff --git a/dubbo-admin-ui/src/router/index.js b/dubbo-admin-ui/src/router/index.js
index 35f8a90..f382b2d 100644
--- a/dubbo-admin-ui/src/router/index.js
+++ b/dubbo-admin-ui/src/router/index.js
@@ -30,6 +30,7 @@
import ServiceMock from '@/components/test/ServiceMock'
import ServiceMetrics from '@/components/metrics/ServiceMetrics'
import Management from '@/components/Management'
+import Test from '@/components/metrics/Test'
Vue.use(Router)
@@ -95,6 +96,11 @@
component: ServiceMetrics
},
{
+ path: '/metrics/test',
+ name: 'Test',
+ component: Test
+ },
+ {
path: '/management',
name: 'Management',
component: Management
diff --git a/dubbo-admin-ui/src/util/echart.js b/dubbo-admin-ui/src/util/echart.js
deleted file mode 100644
index cf2bed3..0000000
--- a/dubbo-admin-ui/src/util/echart.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * ECharts Vue Wrapper
- * Michael Wang
- */
-import colors from 'vuetify/es5/util/colors'
-import _object from 'lodash/object'
-
-const ECharts = window.echarts || undefined
-if (ECharts === undefined) {
- console.error('ECharts is not defined')
-}
-// set color palette
-const colorPalette = []
-
-Object.entries(colors).forEach((item) => {
- if (item[1].base) {
- colorPalette.push(item[1].base)
- }
-});
-
-(function () {
- const throttle = function (type, name, obj) {
- obj = obj || window
- let running = false
- let func = function () {
- if (running) { return }
- running = true
- requestAnimationFrame(function () {
- obj.dispatchEvent(new CustomEvent(name))
- running = false
- })
- }
- obj.addEventListener(type, func)
- }
- /* init - you can init any event */
- throttle('resize', 'optimizedResize')
-})()
-export default {
- name: 'v-echart',
-
- render (h) {
- const data = {
- staticClass: 'v-chart',
- style: this.canvasStyle,
- ref: 'canvas',
- on: this.$listeners
- }
- return h('div', data)
- },
-
- props: {
- // args of ECharts.init(dom, theme, opts)
- width: { type: String, default: 'auto' },
- height: { type: String, default: '400px' },
- merged: {
- type: Boolean,
- default: true
- },
- // instace.setOption
- pathOption: [Object, Array],
- option: Object,
- // general config
- textStyle: Object,
- title: Object,
- legend: [Object, Array],
- tooltip: Object,
- grid: { type: [Object, Array] },
- xAxis: [Object, Array],
- yAxis: [Object, Array],
- series: [Object, Array],
- axisPointer: Object,
- dataset: { type: [Object, Array], default () { return {} } }, // option.dataSet
- colors: Array, // echarts.option.color
- backgroundColor: [Object, String],
- toolbox: { type: [Object, Array] },
- // resize delay
- widthChangeDelay: {
- type: Number,
- default: 450
- }
- },
- data: () => ({
- chartInstance: null,
- clientWidth: null,
- allowedOptions: [
- 'textStyle', 'title', 'legend', 'xAxis',
- 'yAxis', 'series', 'tooltip', 'axisPointer',
- 'grid', 'dataset', 'colors', 'backgroundColor'
- ],
- _defaultOption: {
- tooltip: {
- show: true
- },
- title: {
- show: true,
- textStyle: {
- color: 'rgba(0, 0, 0 , .87)',
- fontFamily: 'sans-serif'
- }
- },
- grid: {
- containLabel: true
- },
- xAxis: {
- show: true,
- type: 'category',
- axisLine: {
- lineStyle: {
- color: 'rgba(0, 0, 0 , .54)',
- type: 'dashed'
- }
- },
- axisTick: {
- show: true,
- alignWithLabel: true,
- lineStyle: {
- show: true,
- color: 'rgba(0, 0, 0 , .54)',
- type: 'dashed'
- }
- },
- axisLabel: {
- show: false
- }
- },
- yAxis: {
- show: true,
- type: 'value',
- axisLine: {
- lineStyle: {
- color: 'rgba(0, 0, 0 , .54)',
- type: 'dashed'
- }
- },
- axisLabel: {
- show: false
- },
- splitLine: {
- lineStyle: {
- type: 'dashed'
- }
- },
- axisTick: {
- show: true,
- lineStyle: {
- show: true,
- color: 'rgba(0, 0, 0 , .54)',
- type: 'dashed'
- }
- }
- },
- series: [{
- type: 'line'
- }]
-
- }
- }),
- computed: {
- canvasStyle () {
- return {
- width: this.width,
- height: this.height
- }
- }
- },
- methods: {
- init () {
- // set
- if (this.pathOption) {
- this.pathOption.forEach((p) => {
- _object.set(this.$data._defaultOption, p[0], p[1])
- })
- }
- this.chartInstance = ECharts.init(this.$refs.canvas, 'material')
- this.chartInstance.setOption(_object.merge(this.option, this.$data._defaultOption))
- window.addEventListener('optimizedResize', (e) => {
- setTimeout(_ => {
- this.chartInstance.resize()
- }, this.widthChangeDelay)
- })
- },
-
- resize () {
- this.chartInstance.resize()
- },
- clean () {
- window.removeEventListener('resize', this.chartInstance.resize)
- this.chartInstance.clear()
- }
- },
- mounted () {
- // console.log(this)
- this.init()
- },
- watch: {
- option (cur, old) {
- // console.log("echart", cur, old)
- }
- },
- beforeDestroy () {
- this.clean()
- }
-}
