tianq
3 years ago
8 changed files with 300 additions and 224 deletions
@ -1,163 +1,163 @@ |
|||||
<template> |
<template> |
||||
<div class="screenEchartsFrame" |
<div class="screenEchartsFrame" ref="screenEchartsFrame"></div> |
||||
ref="screenEchartsFrame"></div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import * as echarts from 'echarts'; |
import * as echarts from 'echarts'; |
||||
export default { |
export default { |
||||
name: 'screen-echarts-frame', |
name: 'screen-echarts-frame', |
||||
data () { |
data() { |
||||
return { |
return { |
||||
myChart: '' |
myChart: '' |
||||
} |
}; |
||||
}, |
}, |
||||
props: { |
props: { |
||||
chartMethod: { |
chartMethod: { |
||||
type: Function |
type: Function |
||||
} |
} |
||||
}, |
}, |
||||
mounted () { |
mounted() { |
||||
this.initChart() |
this.initChart(); |
||||
window.onresize = () => { |
window.onresize = () => { |
||||
this.myChart.resize() |
this.myChart.resize(); |
||||
} |
}; |
||||
}, |
}, |
||||
beforeDestroy () { |
beforeDestroy() { |
||||
// 销毁echarts实例对象 |
// 销毁echarts实例对象 |
||||
if (this.myChart) this.myChart.dispose() |
if (this.myChart) this.myChart.dispose(); |
||||
}, |
}, |
||||
watch: {}, |
watch: {}, |
||||
methods: { |
methods: { |
||||
initChart () { |
initChart() { |
||||
this.$nextTick(() => { |
this.$nextTick(() => { |
||||
const dom = this.$refs.screenEchartsFrame |
const dom = this.$refs.screenEchartsFrame; |
||||
this.myChart = echarts.init(dom) |
this.myChart = echarts.init(dom); |
||||
// this.myChart.setOption(this.chartMethod()) |
// this.myChart.setOption(this.chartMethod()) |
||||
this.$emit('myChartMethod', this.myChart) |
this.$emit('myChartMethod', this.myChart); |
||||
}) |
}); |
||||
}, |
}, |
||||
// 配置option |
// 配置option |
||||
setOption (option) { |
setOption(option) { |
||||
this.myChart.setOption(option) |
this.myChart.setOption(option); |
||||
let than = this |
let than = this; |
||||
this.myChart.on('click',function(param){ |
this.myChart.off('click'); |
||||
than.$emit('handelClickMyPei',param) |
this.myChart.on('click', function(param) { |
||||
}) |
than.$emit('handelClickMyPei', param); |
||||
}, |
}); |
||||
// 获取option |
}, |
||||
getOption () { |
// 获取option |
||||
if (this.myChart) { |
getOption() { |
||||
return this.myChart.getOption() |
if (this.myChart) { |
||||
} else { |
return this.myChart.getOption(); |
||||
return null |
} else { |
||||
} |
return null; |
||||
}, |
} |
||||
// |
}, |
||||
resize () { |
// |
||||
if (this.myChart) { |
resize() { |
||||
this.myChart.resize() |
if (this.myChart) { |
||||
} |
this.myChart.resize(); |
||||
}, |
} |
||||
clear () { |
}, |
||||
if (this.myChart) { |
clear() { |
||||
this.myChart.clear() |
if (this.myChart) { |
||||
} |
this.myChart.clear(); |
||||
}, |
} |
||||
showLoading () { |
}, |
||||
if (this.myChart) { |
showLoading() { |
||||
this.$nextTick(() => { |
if (this.myChart) { |
||||
this.myChart.showLoading({ |
this.$nextTick(() => { |
||||
text: '', |
this.myChart.showLoading({ |
||||
color: '#29cdff', |
text: '', |
||||
textColor: '#29cdff', |
color: '#29cdff', |
||||
maskColor: 'rgba(255, 255, 255, 0)', |
textColor: '#29cdff', |
||||
zlevel: 0 |
maskColor: 'rgba(255, 255, 255, 0)', |
||||
}) |
zlevel: 0 |
||||
}) |
}); |
||||
} |
}); |
||||
}, |
} |
||||
hideLoading () { |
}, |
||||
if (this.myChart) { |
hideLoading() { |
||||
this.myChart.hideLoading() |
if (this.myChart) { |
||||
} |
this.myChart.hideLoading(); |
||||
}, |
} |
||||
// 启动动画时使用 |
}, |
||||
tooltipAnimate (chart, length) { |
// 启动动画时使用 |
||||
// 清除上一次动画 |
tooltipAnimate(chart, length) { |
||||
this.timeTicket && clearInterval(this.timeTicket) |
// 清除上一次动画 |
||||
const count = 0 |
this.timeTicket && clearInterval(this.timeTicket); |
||||
// 启动动画 |
const count = 0; |
||||
this._action(chart, count, length) |
// 启动动画 |
||||
chart && // 移除动画 |
this._action(chart, count, length); |
||||
chart.on('mouseover', params => { |
chart && // 移除动画 |
||||
this._cleanAction(chart, params) |
chart.on('mouseover', params => { |
||||
}) |
this._cleanAction(chart, params); |
||||
// 重写启动动画 |
}); |
||||
chart && |
// 重写启动动画 |
||||
chart.on('mouseout', () => { |
chart && |
||||
this._action(chart, count, length) |
chart.on('mouseout', () => { |
||||
}) |
this._action(chart, count, length); |
||||
}, |
}); |
||||
// tooltip动画action |
}, |
||||
_action (chart, count, length) { |
// tooltip动画action |
||||
this.timeTicket && clearInterval(this.timeTicket) |
_action(chart, count, length) { |
||||
this.timeTicket = setInterval(() => { |
this.timeTicket && clearInterval(this.timeTicket); |
||||
if (!chart) { |
this.timeTicket = setInterval(() => { |
||||
clearInterval(this.timeTicket) |
if (!chart) { |
||||
return |
clearInterval(this.timeTicket); |
||||
} |
return; |
||||
chart && |
} |
||||
chart.dispatchAction({ |
chart && |
||||
type: 'downplay', |
chart.dispatchAction({ |
||||
seriesIndex: 0 |
type: 'downplay', |
||||
}) |
seriesIndex: 0 |
||||
chart && |
}); |
||||
chart.dispatchAction({ |
chart && |
||||
type: 'highlight', |
chart.dispatchAction({ |
||||
seriesIndex: 0, |
type: 'highlight', |
||||
dataIndex: count % length |
seriesIndex: 0, |
||||
}) |
dataIndex: count % length |
||||
chart && |
}); |
||||
chart.dispatchAction({ |
chart && |
||||
type: 'showTip', |
chart.dispatchAction({ |
||||
seriesIndex: 0, |
type: 'showTip', |
||||
dataIndex: count % length |
seriesIndex: 0, |
||||
}) |
dataIndex: count % length |
||||
count++ |
}); |
||||
}, 1000 * 3) |
count++; |
||||
}, |
}, 1000 * 3); |
||||
_cleanAction (chart, params) { |
}, |
||||
this.timeTicket && clearInterval(this.timeTicket) |
_cleanAction(chart, params) { |
||||
if (!chart) { |
this.timeTicket && clearInterval(this.timeTicket); |
||||
clearInterval(this.timeTicket) |
if (!chart) { |
||||
return |
clearInterval(this.timeTicket); |
||||
} |
return; |
||||
chart && |
} |
||||
chart.dispatchAction({ |
chart && |
||||
type: 'downplay', |
chart.dispatchAction({ |
||||
seriesIndex: 0 |
type: 'downplay', |
||||
}) |
seriesIndex: 0 |
||||
chart && |
}); |
||||
chart.dispatchAction({ |
chart && |
||||
type: 'highlight', |
chart.dispatchAction({ |
||||
seriesIndex: 0, |
type: 'highlight', |
||||
dataIndex: params.dataIndex |
seriesIndex: 0, |
||||
}) |
dataIndex: params.dataIndex |
||||
chart && |
}); |
||||
chart.dispatchAction({ |
chart && |
||||
type: 'showTip', |
chart.dispatchAction({ |
||||
seriesIndex: 0, |
type: 'showTip', |
||||
dataIndex: params.dataIndex |
seriesIndex: 0, |
||||
}) |
dataIndex: params.dataIndex |
||||
} |
}); |
||||
} |
} |
||||
} |
} |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.screenEchartsFrame { |
.screenEchartsFrame { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue