zhj
2 months ago
8 changed files with 515 additions and 57 deletions
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts' |
|||
require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
autoResize: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
if(this.chart) |
|||
this.chart.dispose() |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions(data=[]) { |
|||
let series = [] |
|||
data.data.forEach((item,idx) => { |
|||
series.push({ |
|||
name: data.legend[idx], |
|||
smooth: true, |
|||
type: 'line', |
|||
data: item, |
|||
areaStyle: {}, |
|||
animationDuration: 2800, |
|||
animationEasing: 'cubicInOut' |
|||
}) |
|||
}) |
|||
this.chart.setOption({ |
|||
xAxis: { |
|||
data: data.xAxis, |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 15, |
|||
right: 35, |
|||
bottom: 20, |
|||
top: 30, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
}, |
|||
padding: [5, 10] |
|||
}, |
|||
yAxis: { |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
legend: { |
|||
data: data.legend |
|||
}, |
|||
series: series |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<div style="display: flex; justify-content: space-between; width: 100%"> |
|||
<el-radio-group @input="handleDateTypeChg" v-model="dataType" size="small"> |
|||
<el-radio-button label="day">按日</el-radio-button> |
|||
<el-radio-button label="week">按周</el-radio-button> |
|||
<el-radio-button label="month">按月</el-radio-button> |
|||
<el-radio-button label="year">按年</el-radio-button> |
|||
</el-radio-group> |
|||
<el-date-picker |
|||
@change="datePeriodChg" |
|||
v-model="datePeriodCp" |
|||
:type="datePeriodType" |
|||
align="right" |
|||
unlink-panels |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts' |
|||
|
|||
require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
datePeriod: { |
|||
type: Array, |
|||
default: ()=>{[]} |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (!this.datePeriodCp || this.datePeriodCp.length === 0) { |
|||
if(!this.datePeriodCp){ |
|||
this.datePeriodCp = [] |
|||
} |
|||
let bgDate = new Date(); |
|||
bgDate.setDate(bgDate.getDate() - 7); |
|||
this.datePeriodCp.push(bgDate); |
|||
this.datePeriodCp.push(new Date()); |
|||
} |
|||
}, |
|||
watch:{ |
|||
datePeriod:{ |
|||
deep: true, |
|||
immediate: true, |
|||
handler(newVal, oldVal){ |
|||
this.datePeriodCp = newVal; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dataType: 'day', |
|||
datePeriodType: 'daterange', |
|||
valueFormat: 'yyyy-MM-dd', |
|||
datePeriodCp: null |
|||
} |
|||
}, |
|||
methods: { |
|||
handleDateTypeChg(type) { |
|||
if (type === 'month' || type === 'year') { |
|||
this.datePeriodType = 'monthrange' |
|||
this.valueFormat = 'yyyy-MM' |
|||
} else { |
|||
this.datePeriodType = 'daterange' |
|||
this.valueFormat = 'yyyy-MM-dd' |
|||
} |
|||
this.$emit('change', this.dataType, this.datePeriodCp) |
|||
}, |
|||
datePeriodChg(date) { |
|||
this.$emit('change', this.dataType, this.datePeriodCp) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts' |
|||
require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
autoResize: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
if(this.chart) this.chart.dispose() |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions(data={}) { |
|||
let series = [] |
|||
let tooltip = {} |
|||
let grid = {} |
|||
let xAxis = {} |
|||
let yAxis = {} |
|||
data.data.forEach((item,idx) => { |
|||
series.push({ |
|||
name: data.legend[idx], |
|||
smooth: true, |
|||
type: data.type, |
|||
barWidth: data.type==='bar' && data.barWidth ? data.barWidth : 0, |
|||
data: item, |
|||
animationDuration: 2800, |
|||
animationEasing: idx%2 === 0 ? 'cubicInOut': 'quadraticOut' |
|||
}) |
|||
}) |
|||
if(data.type === 'line'){ |
|||
tooltip = { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
}, |
|||
padding: [5, 10] |
|||
} |
|||
grid = { left: 15, right: 35, bottom: 20, top: 30, containLabel: true |
|||
} |
|||
xAxis = { |
|||
data: data.xAxis, |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
} |
|||
yAxis={ |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
} |
|||
}else if(data.type === 'bar'){ |
|||
tooltip = { |
|||
trigger: 'axis', |
|||
axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
} |
|||
grid = { |
|||
top: 10, |
|||
left: '2%', |
|||
right: '2%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
} |
|||
xAxis = [{ |
|||
type: 'category', |
|||
data: data.xAxis, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
} |
|||
}] |
|||
yAxis = [{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}] |
|||
} |
|||
|
|||
this.chart.setOption({ |
|||
xAxis: xAxis, |
|||
grid: grid, |
|||
tooltip: tooltip, |
|||
yAxis: yAxis, |
|||
legend: { |
|||
data: data.legend |
|||
}, |
|||
series: series |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue