import * as ECharts from 'echarts';
|
|
export default {
|
chart: null,
|
exportChart: null,
|
data() {
|
return {
|
fullScreenFlag: false
|
};
|
},
|
methods: {
|
/**
|
* 设置echarts图表的配置项
|
* @param option echarts标准的配置项
|
*/
|
setOption(option) {
|
const chart = this.$options.chart;
|
if (chart) {
|
chart.setOption(option);
|
}
|
},
|
getChart() {
|
return this.$options.chart;
|
},
|
/**
|
* 全屏
|
*/
|
fullScreen() {
|
this.fullScreenFlag = !this.fullScreenFlag;
|
this.$nextTick().then(() => {
|
this.resize();
|
});
|
},
|
handleClick() {
|
this.$emit('click', true);
|
},
|
/**
|
* 对echarts进行缩放
|
*/
|
resize() {
|
const chart = this.$options.chart;
|
if (chart) {
|
chart.resize();
|
}
|
},
|
/**
|
* 导出echarts600*400的图片
|
* @returns {string} 图片的base64字符串
|
*/
|
getDataURL() {
|
const chart = this.$options.chart;
|
const exportChart = this.$options.exportChart;
|
let base64 = '';
|
|
if (exportChart) {
|
const option = chart.getOption();
|
// x轴样式
|
option.xAxis[0].axisLine.lineStyle = {
|
color: '#000'
|
};
|
option.xAxis[0].axisLabel.textStyle.color = '#000';
|
|
// y轴样式
|
option.yAxis[0].axisLine.lineStyle = {
|
color: '#000'
|
};
|
option.yAxis[0].axisLabel.textStyle.color = '#000';
|
|
exportChart.setOption(option);
|
|
base64 = exportChart.getDataURL({
|
pixelRatio: 1,
|
backgroundColor: '#fff'
|
});
|
}
|
return base64;
|
}
|
},
|
/**
|
* 销毁echarts实例释放内存
|
* @return {[type]} [return description]
|
*/
|
dispose() {
|
// 销毁chart
|
const chart = this.$options.chart;
|
this.disposeChart(chart);
|
|
// 销毁chart
|
const exportChart = this.$options.exportChart;
|
this.disposeChart(exportChart);
|
},
|
/**
|
* 销毁echarts实例释放内存
|
* @param chart echarts实例
|
*/
|
disposeChart(chart) {
|
if (chart) {
|
chart.dispose(); // 销毁实例
|
this.$options.chart = '';
|
}
|
},
|
mounted() {
|
this.$options.chart = ECharts.init(this.$refs.chart, 'transparent');
|
this.$options.exportChart = ECharts.init(
|
this.$refs.exportChart,
|
'transparent'
|
);
|
// 监听windows窗口的缩放,绑定resize事件
|
window.addEventListener('resize', this.resize);
|
},
|
beforeUnmount() {
|
// 销毁resize事件
|
window.removeEventListener('resize', this.resize);
|
this.dispose();
|
}
|
};
|
