117 lines
2.8 KiB
Plaintext
117 lines
2.8 KiB
Plaintext
<template>
|
|
<view class="chart-wrap" :style="{ height: heightPx }">
|
|
<EChartsView :option="chartOption" class="chart" />
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
|
|
|
export default {
|
|
components: {
|
|
EChartsView
|
|
},
|
|
props: {
|
|
xLabels: { type: Array, default: () => [] },
|
|
gmv: { type: Array, default: () => [] },
|
|
orders: { type: Array, default: () => [] },
|
|
height: { type: Number, default: 320 }
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
heightPx: '320px',
|
|
chartOption: {} as any
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
xLabels: { handler() { this.updateOption() }, deep: true },
|
|
gmv: { handler() { this.updateOption() }, deep: true },
|
|
orders: { handler() { this.updateOption() }, deep: true },
|
|
height: {
|
|
handler() {
|
|
this.heightPx = `${this.height}px`
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.heightPx = `${this.height}px`
|
|
this.updateOption()
|
|
},
|
|
|
|
methods: {
|
|
updateOption() {
|
|
const x = (this.xLabels as Array<any>).map((s) => String(s))
|
|
const bar = (this.gmv as Array<any>).map((v) => {
|
|
const n = Number(v)
|
|
return isFinite(n) ? n : 0
|
|
})
|
|
const line = (this.orders as Array<any>).map((v) => {
|
|
const n = Number(v)
|
|
return isFinite(n) ? n : 0
|
|
})
|
|
|
|
this.chartOption = {
|
|
grid: { left: 44, right: 44, top: 24, bottom: 36 },
|
|
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
|
legend: { top: 0, left: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 12 } },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: x,
|
|
axisTick: { show: false },
|
|
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.12)' } },
|
|
axisLabel: { color: 'rgba(0,0,0,0.55)' }
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'GMV',
|
|
axisLine: { show: false },
|
|
splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } },
|
|
axisLabel: { color: 'rgba(0,0,0,0.55)' }
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '订单',
|
|
axisLine: { show: false },
|
|
splitLine: { show: false },
|
|
axisLabel: { color: 'rgba(0,0,0,0.55)' }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'GMV',
|
|
type: 'bar',
|
|
data: bar,
|
|
barWidth: 14,
|
|
itemStyle: { borderRadius: [6, 6, 0, 0] }
|
|
},
|
|
{
|
|
name: '订单数',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: line,
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
lineStyle: { width: 2 }
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.chart-wrap {
|
|
width: 100%;
|
|
}
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|