13176889840
4 years ago
4 changed files with 541 additions and 51 deletions
@ -0,0 +1,164 @@ |
|||
|
|||
export function pieOption () { |
|||
const center= ['50%', '250px'] |
|||
return { |
|||
title: { |
|||
text: '0', |
|||
top: 220, |
|||
left: 'center', |
|||
textStyle: { |
|||
width: '100%', |
|||
fontSize: 32, |
|||
color: '#FFFFFF', |
|||
fontWeight: 400 |
|||
}, |
|||
itemGap: 5, |
|||
subtext: '总数', |
|||
subtextStyle: { |
|||
fontSize: 20, |
|||
color: '#fff', |
|||
fontWeight: 400 |
|||
} |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
legend: { |
|||
top: 500, |
|||
bottom: 0, |
|||
itemWidth: 20, |
|||
itemHeight: 10, |
|||
textStyle: { |
|||
color: '#D2E7FF', |
|||
fontSize: 16, |
|||
lineHeight: 20, |
|||
}, |
|||
|
|||
}, |
|||
series: [ |
|||
// 外侧圆环
|
|||
{ |
|||
type: 'pie', |
|||
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|||
startAngle: 0, |
|||
hoverAnimation: false, |
|||
// tooltip: {
|
|||
// },
|
|||
center: center, |
|||
radius: ['55%', '55.3%'], |
|||
label: { |
|||
normal: { |
|||
show: false |
|||
} |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
show: false |
|||
} |
|||
}, |
|||
data: [{ |
|||
value: 360, |
|||
itemStyle: { |
|||
normal: { |
|||
color: 'rgba(40, 101, 250, 0)', |
|||
width:0, |
|||
borderColor: 'rgba(40, 101, 250, 0.5)', |
|||
borderWidth: 1, |
|||
borderType: 'dotted' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
|
|||
// 突出的
|
|||
{ |
|||
hoverAnimation: false, |
|||
// name: 'Access From',
|
|||
type: 'pie', |
|||
center: center, |
|||
radius: ['40%', '60%'], |
|||
avoidLabelOverlap: false, |
|||
// top: top + '%',
|
|||
// height: '80%',
|
|||
selectedMode: 'single', |
|||
left: 'center', |
|||
width: 400, |
|||
label: { |
|||
position: 'outer', |
|||
// alignTo: 'edge',
|
|||
formatter: '{a|{c}}\n\n{name|{b}}', |
|||
// minMargin: 100,
|
|||
// edgeDistance: 0,
|
|||
// lineHeight: 20,
|
|||
color: '#fff', |
|||
fontSize: 12, |
|||
distanceToLabelLine: -60, |
|||
rich: { |
|||
a: { |
|||
fontSize: '30px', |
|||
color: ' #00F5FE', |
|||
|
|||
}, |
|||
b: { |
|||
lineHeight: 0, |
|||
fontSize: '20px', |
|||
color: ' #FFFFFF' |
|||
|
|||
} |
|||
} |
|||
}, |
|||
labelLine: { |
|||
smooth: 0.2, |
|||
length: 30, |
|||
length2: 90 |
|||
}, |
|||
// itemStyle: {
|
|||
// normal:{
|
|||
// color:function(params) {
|
|||
// //自定义颜色
|
|||
// var colorList = [
|
|||
// '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
|
|||
// ];
|
|||
// return colorList[params.dataIndex]
|
|||
// }
|
|||
// }
|
|||
// },
|
|||
data: [], |
|||
|
|||
}, |
|||
// 中间圆环
|
|||
{ |
|||
type: 'pie', |
|||
// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
|
|||
startAngle: 0, |
|||
hoverAnimation: false, |
|||
center: center, |
|||
// tooltip: {
|
|||
// },
|
|||
radius: ['0%', '25%'], |
|||
label: { |
|||
|
|||
show: false |
|||
|
|||
}, |
|||
labelLine: { |
|||
|
|||
show: false |
|||
|
|||
}, |
|||
data: [{ |
|||
value: 360, |
|||
itemStyle: { |
|||
normal: { |
|||
color: 'rgba(8, 37, 134, 1)', |
|||
|
|||
} |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
] |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<div class="screenEchartsFrame" |
|||
ref="screenEchartsFrame"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
name: 'screen-echarts-frame', |
|||
data () { |
|||
return { |
|||
myChart: '' |
|||
} |
|||
}, |
|||
props: { |
|||
chartMethod: { |
|||
type: Function |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.initChart() |
|||
window.onresize = () => { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
beforeDestroy () { |
|||
// 销毁echarts实例对象 |
|||
if (this.myChart) this.myChart.dispose() |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
initChart () { |
|||
|
|||
this.$nextTick(() => { |
|||
const dom = this.$refs.screenEchartsFrame |
|||
this.myChart = echarts.init(dom) |
|||
|
|||
// this.myChart.setOption(this.chartMethod()); |
|||
this.$emit('myChartMethod', this.myChart) |
|||
}) |
|||
}, |
|||
//点击pie事件 |
|||
handleClick (fun) { |
|||
this.myChart.on('click', fun); |
|||
}, |
|||
|
|||
//高亮 |
|||
highLight (index) { |
|||
this.myChart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 1, |
|||
dataIndex: index |
|||
}); |
|||
}, |
|||
|
|||
// 配置option |
|||
setOption (option) { |
|||
this.myChart.setOption(option) |
|||
}, |
|||
// 获取option |
|||
getOption () { |
|||
if (this.myChart) { |
|||
return this.myChart.getOption() |
|||
} else { |
|||
return null |
|||
} |
|||
}, |
|||
// |
|||
resize () { |
|||
if (this.myChart) { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
clear () { |
|||
if (this.myChart) { |
|||
this.myChart.clear() |
|||
} |
|||
}, |
|||
showLoading () { |
|||
if (this.myChart) { |
|||
this.$nextTick(() => { |
|||
this.myChart.showLoading({ |
|||
text: '', |
|||
color: '#29cdff', |
|||
textColor: '#29cdff', |
|||
maskColor: 'rgba(255, 255, 255, 0)', |
|||
zlevel: 0 |
|||
|
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
hideLoading () { |
|||
|
|||
if (this.myChart) { |
|||
this.myChart.hideLoading() |
|||
} |
|||
}, |
|||
// 启动动画时使用 |
|||
tooltipAnimate (chart, length) { |
|||
// 清除上一次动画 |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
const count = 0 |
|||
// 启动动画 |
|||
this._action(chart, count, length) |
|||
chart && // 移除动画 |
|||
chart.on('mouseover', params => { |
|||
this._cleanAction(chart, params) |
|||
}) |
|||
// 重写启动动画 |
|||
chart && |
|||
chart.on('mouseout', () => { |
|||
this._action(chart, count, length) |
|||
}) |
|||
}, |
|||
// tooltip动画action |
|||
_action (chart, count, length) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
this.timeTicket = setInterval(() => { |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
count++ |
|||
}, 1000 * 3) |
|||
}, |
|||
_cleanAction (chart, params) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screenEchartsFrame { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue