jiangyy
3 years ago
6 changed files with 774 additions and 5 deletions
|
After Width: | Height: | Size: 846 B |
@ -0,0 +1,159 @@ |
|||
<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) |
|||
}) |
|||
}, |
|||
// 配置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> |
|||
@ -0,0 +1,130 @@ |
|||
import * as echarts from 'echarts' |
|||
export function barOption () { |
|||
|
|||
return { |
|||
title: { |
|||
text: '单位（户）', |
|||
left: 5, |
|||
textStyle: { |
|||
|
|||
fontSize: 14, |
|||
color: " rgba(255,255,255,0.65)", |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
// legend: {},
|
|||
grid: { |
|||
top:40, |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: 19, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisLine: { |
|||
lineStyle: { |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
max : 1000, |
|||
splitNumber : 5, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle:{ |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
} |
|||
], |
|||
series: [ |
|||
|
|||
{ |
|||
name: '自住房屋', |
|||
type: 'bar', |
|||
stack: 'Ad', |
|||
barWidth:12, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#6FDEFF' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '出租房屋', |
|||
type: 'bar', |
|||
barWidth:12, |
|||
stack: 'Ad', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#1A95FF' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '闲置房屋', |
|||
type: 'bar', |
|||
barWidth:12, |
|||
stack: 'Ad', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#FFAA00' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
|
|||
|
|||
] |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
import * as echarts from 'echarts' |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
title: { |
|||
text: "0", |
|||
top: 45, |
|||
left: "center", |
|||
textStyle: { |
|||
width: "100%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
fontWeight: 400, |
|||
}, |
|||
itemGap: 5, |
|||
// subtext: "总数",
|
|||
// subtextStyle: {
|
|||
// fontSize: 20,
|
|||
// color: "#fff",
|
|||
// fontWeight: 400,
|
|||
// },
|
|||
}, |
|||
tooltip: { |
|||
show: false, |
|||
}, |
|||
// legend: {
|
|||
// top: 350,
|
|||
// bottom: 0,
|
|||
// itemWidth: 20,
|
|||
// itemHeight: 10,
|
|||
// textStyle: {
|
|||
// color: '#D2E7FF',
|
|||
// fontSize: 16,
|
|||
// lineHeight: 20,
|
|||
// },
|
|||
|
|||
// },
|
|||
series: [ |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['60%', '90%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
// emphasis: {
|
|||
// label: {
|
|||
// show: true,
|
|||
// fontSize: 40,
|
|||
// fontWeight: 'bold'
|
|||
// }
|
|||
// },
|
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: (list) => { |
|||
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
|
|||
var colorList = [ |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#6FDEFF' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#FFAA00' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#1A95FF' |
|||
}, |
|||
|
|||
] |
|||
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
|
|||
offset: 0, |
|||
color: colorList[list.dataIndex]['colorStart'] |
|||
}, { |
|||
offset: 1, |
|||
color: colorList[list.dataIndex]['colorEnd'] |
|||
}]) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
data: [ |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
Loading…
Reference in new issue