<template>
|
<div
|
class="e-chart-root"
|
:class="{ 'full-screen': fullScreenFlag }"
|
@click="handleClick"
|
@dblclick="fullScreen"
|
>
|
<div class="e-chart-container">
|
<div class="e-chart" ref="chart"></div>
|
<slot name="tools"></slot>
|
</div>
|
<div class="export-chart-wrapper">
|
<div class="export-chart" ref="exportChart"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 引入 ECharts 主模块
|
import * as ECharts from 'echarts';
|
// 引入自定义主题
|
import './theme/transparent';
|
export default {
|
name: 'BaseChart',
|
chart: '',
|
exportChart: '',
|
data() {
|
return {
|
fullScreenFlag: false
|
};
|
},
|
methods: {
|
/**
|
* 设置echarts图表的配置项
|
* @param option echarts标准的配置项
|
*/
|
setOption(option) {
|
const chart = this.$options.chart;
|
if (chart) {
|
chart.setOption(option);
|
}
|
},
|
/**
|
* 全屏
|
*/
|
fullScreen() {
|
this.fullScreenFlag = !this.fullScreenFlag;
|
this.$nextTick(() => {
|
this.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 = '';
|
}
|
},
|
getChart() {
|
return this.$options.chart;
|
},
|
handleClick() {
|
this.$emit('click', true);
|
}
|
},
|
mounted() {
|
this.$options.chart = ECharts.init(this.$refs.chart, 'transparent');
|
this.$options.exportChart = ECharts.init(
|
this.$refs.exportChart,
|
'transparent'
|
);
|
this.$nextTick(() => {
|
this.$options.chart.resize();
|
});
|
}
|
};
|
</script>
|
|
<style scoped>
|
.e-chart-root {
|
position: relative;
|
}
|
/* chart wrapper css */
|
.e-chart-root,
|
.e-chart {
|
height: 100%;
|
box-sizing: border-box;
|
}
|
.e-chart-container {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
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>
|
