<template>
|
<div
|
class="e-chart-root"
|
:class="{'full-screen': fullScreenFlag}"
|
@dblclick="fullScreen">
|
<div class="e-chart-container">
|
<div class="e-chart" ref="chart"></div>
|
</div>
|
<div class="export-chart-wrapper">
|
<div class="export-chart" ref="exportChart"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 引入 ECharts 主模块
|
import ECharts from "echarts";
|
// 引入自定义主题
|
import "./theme/transparent";
|
export default {
|
name: "BaseChart",
|
chart: "",
|
exportChart: "",
|
data() {
|
return {
|
fullScreenFlag: false,
|
};
|
},
|
methods: {
|
/**
|
* 设置echarts图表的配置项
|
* @param option echarts标准的配置项
|
*/
|
setOption(option) {
|
let chart = this.$options.chart;
|
if (chart) {
|
chart.setOption(option);
|
}
|
},
|
/**
|
* 全屏
|
*/
|
fullScreen() {
|
this.fullScreenFlag = !this.fullScreenFlag;
|
this.$nextTick(()=>{
|
this.resize();
|
});
|
},
|
/**
|
* 导出echarts600*400的图片
|
* @returns {Base64} 图片的base64字符串
|
*/
|
getDataURL() {
|
let chart = this.$options.chart;
|
let exportChart = this.$options.exportChart;
|
let base64 = "";
|
|
if(exportChart) {
|
let 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进行缩放
|
*/
|
resize() {
|
let chart = this.$options.chart;
|
if (chart) {
|
chart.resize();
|
}
|
},
|
/**
|
* 销毁echarts实例释放内存
|
* @return {[type]} [return description]
|
*/
|
dispose() {
|
// 销毁chart
|
let chart = this.$options.chart;
|
this.disposeChart(chart);
|
|
// 销毁chart
|
let exportChart = this.$options.exportChart;
|
this.disposeChart(exportChart);
|
},
|
/**
|
* 销毁echarts实例释放内存
|
* @param chart echarts实例
|
*/
|
disposeChart(chart) {
|
if (chart) {
|
chart.dispose(); // 销毁实例
|
this.$options.chart = "";
|
}
|
},
|
getChart() {
|
return 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);
|
},
|
beforeDestroy() {
|
// 销毁resize事件
|
window.removeEventListener("resize", this.resize);
|
this.dispose();
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* chart wrapper css */
|
.e-chart-root,
|
.e-chart-container,
|
.e-chart {
|
height: 100%;
|
box-sizing: border-box;
|
}
|
|
.e-chart-root.full-screen .e-chart-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-size: 100% 100%;
|
z-index: 9999;
|
}
|
|
/* export chart wrapper css */
|
.export-chart-wrapper {
|
position: relative;
|
width: 0;
|
height: 0;
|
overflow: hidden;
|
}
|
.export-chart {
|
position: absolute;
|
width: 600px;
|
height: 400px;
|
}
|
</style>
|
