<template>
|
<div class="e-chart-root" @dblclick="fullScreen" :class="{'full-screen': fullScreenState}">
|
<div class="e-chart-container">
|
<div class="e-chart" :id="id" :ref="id"></div>
|
<object ref="resizeBox"
|
tabindex="-1"
|
type="text/html"
|
aria-hidden='true'
|
data="about:blank"
|
class="resize-box"></object>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 引入 ECharts 主模块
|
import ECharts from "echarts/lib/echarts";
|
//引入折线图
|
import "echarts/lib/chart/pie";
|
//引入提示框
|
import "echarts/lib/component/tooltip";
|
//引入标题
|
import "echarts/lib/component/title";
|
//引入图例标志
|
import "echarts/lib/component/legend";
|
//区域缩放
|
import "echarts/lib/component/dataZoom";
|
|
// 引入自定义主题
|
import "./theme/transparent"
|
|
export default {
|
props: {
|
id: {
|
type: String,
|
required: true,
|
}
|
},
|
data() {
|
return {
|
fullScreenState: false,
|
}
|
},
|
methods:{
|
setOption(opt) {
|
// 整体配置项
|
let option = {
|
animation: false,
|
color: this.getColor(opt),
|
title: this.getTitle(opt),
|
tooltip: {
|
trigger: 'item',
|
confine: true,
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
},
|
legend: {
|
show: false,
|
},
|
series: this.getSeries(opt)
|
};
|
// 设置配置项
|
this.$G.chartManage.get(this.id).setOption(option);
|
},
|
getColor(opt) { // 配置自定义颜色
|
// 未配置自定义颜色
|
if(!opt || !opt.color) {
|
return []
|
}
|
|
return opt.color;
|
},
|
getTitle(opt) { // 配置标题
|
// 未配置标题
|
if(!opt || !opt.title) {
|
return {
|
show: false,
|
};
|
}
|
|
// 返回标题
|
return opt.title;
|
},
|
getSeries(opt) { // 设置series
|
// 未配置series
|
if(!opt || !opt.series) {
|
return [];
|
}
|
|
// 设置配置项
|
let series = opt.series.map(item=>{
|
item.type='pie';
|
item.radius = "55%";
|
item.center = ['50%', '50%'];
|
item.emphasis = {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
};
|
return item;
|
});
|
return series;
|
},
|
fullScreen() {
|
this.fullScreenState = this.fullScreenState?false:true;
|
this.$nextTick(()=>{
|
// 重置大小
|
this.$G.chartManage.get(this.id).resize();
|
});
|
},
|
resize() {
|
// 重置大小
|
this.$G.chartManage.get(this.id).resize();
|
}
|
},
|
mounted() {
|
// 基于准备好的dom，初始化echarts实例
|
let chart = ECharts.init(this.$refs[this.id], 'transparent');
|
// 将图表添加到图表管理
|
this.$G.chartManage.set(this.id, chart);
|
// 设置配置项
|
this.setOption({
|
title: {
|
text: '数据初始化',
|
},
|
series:[{
|
name: '初始化',
|
data:[
|
{value: 0, name: '初始化数据'}
|
]
|
}]
|
});
|
// 容器大小发生变化
|
this.$refs.resizeBox.contentDocument.defaultView.addEventListener('resize',()=>{
|
chart.resize();
|
});
|
}
|
}
|
</script>
|
|
<style scoped>
|
.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;
|
}
|
.resize-box {
|
display: block;
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
width: 100%;
|
height: 100%;
|
border: none;
|
padding: 0px;
|
margin: 0px;
|
opacity: 0;
|
z-index: -1000;
|
pointer-events: none
|
}
|
</style>
|
