<template>
<div id="Line" style="width: 400px; height: 400px;">22222</div>
</template>
<script>
import * as echarts from 'echarts';
export default{
data() {
return {
}
},
mounted() {
this.getInt()
window.addEventListener('visibilitychange', this.handleVisibilityChange);
},
methods: {
getInt() {
var chartDom = document.getElementById('Line');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {},
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{offset: 0, color: 'red'}, // 0% 处的颜色
{offset: 1, color: 'blue'} // 100% 处的颜色
])
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{offset: 0, color: 'red'}, // 0% 处的颜色
{offset: 1, color: 'blue'} // 100% 处的颜色
]),
borderColor: "#646ace",
},
}
]
};
myChart.setOption(option);
}
},
handleVisibilityChange() {
if (document.visibilityState === 'visible') {
// 窗口获得焦点,重绘ECharts图表
this.handleResize();
} else if (document.visibilityState === 'hidden') {
// 窗口失去焦点,再次重绘可能会导致图表消失,因此可以选择不做处理
}
}
}
</script>