154 lines
3.5 KiB
Vue
154 lines
3.5 KiB
Vue
<template>
|
|
<div ref="chartRef" class="chart-container"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import { getStatByTypeAndAgeByCityApi } from '@/api/wsScreen/index'
|
|
|
|
export default {
|
|
name: 'EChartsCompareBars',
|
|
props: {
|
|
type: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
categories: [],
|
|
seriesA: [],
|
|
seriesB: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getInfo()
|
|
window.addEventListener('resize', this.resize)
|
|
},
|
|
methods: {
|
|
async getInfo() {
|
|
try {
|
|
const res = await getStatByTypeAndAgeByCityApi({ type: this.type })
|
|
console.log('🚀 ~ 地市装备 ~ res:', res)
|
|
if (!res.data || res.data.length == 0) return
|
|
this.categories = res.data.map((item) => item.name)
|
|
this.seriesA = res.data.map((item) => item.useCount)
|
|
this.seriesB = res.data.map((item) => item.count)
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
} catch (error) {
|
|
console.log('err', error)
|
|
}
|
|
},
|
|
buildGradient(colorFrom) {
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: colorFrom },
|
|
{ offset: 1, color: '#0D203C' },
|
|
])
|
|
},
|
|
toDataArray(arr, borderRadius = [6, 6, 0, 0]) {
|
|
return arr.map((v) => ({
|
|
value: v,
|
|
itemStyle: {
|
|
borderRadius,
|
|
},
|
|
}))
|
|
},
|
|
initChart() {
|
|
if (!this.$refs.chartRef) return
|
|
this.chart = echarts.init(this.$refs.chartRef)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
},
|
|
legend: {
|
|
right: 80,
|
|
top: 0,
|
|
orient: 'horizontal',
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#fff', // 图例字体颜色设置
|
|
},
|
|
},
|
|
grid: {
|
|
left: '6%',
|
|
right: '6%',
|
|
top: '20%',
|
|
bottom: '8%',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.categories,
|
|
axisTick: { alignWithLabel: true },
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位：台',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '在用装备',
|
|
type: 'bar',
|
|
barMaxWidth: 14,
|
|
barGap: '100%',
|
|
data: this.toDataArray(this.seriesA),
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
},
|
|
itemStyle: {
|
|
color: this.buildGradient('#76fbc4'),
|
|
},
|
|
},
|
|
{
|
|
name: '装备总数',
|
|
type: 'bar',
|
|
barMaxWidth: 14,
|
|
barGap: '100%',
|
|
data: this.toDataArray(this.seriesB),
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
},
|
|
itemStyle: {
|
|
color: this.buildGradient('#5C94D9'),
|
|
},
|
|
},
|
|
],
|
|
}
|
|
this.chart.setOption(option)
|
|
},
|
|
resize() {
|
|
if (this.chart) this.chart.resize()
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.resize)
|
|
if (this.chart) {
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 280px;
|
|
/* color: #76fbc4; */
|
|
}
|
|
</style>
|