132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartRef" class="chart-container"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'EChartsCompareBars',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chart: null,
|
||
|
|
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||
|
|
seriesA: [120, 200, 150, 80, 70, 110, 130],
|
||
|
|
seriesB: [90, 160, 100, 60, 50, 80, 95],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
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()
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initChart()
|
||
|
|
window.addEventListener('resize', this.resize)
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
window.removeEventListener('resize', this.resize)
|
||
|
|
if (this.chart) {
|
||
|
|
this.chart.dispose()
|
||
|
|
this.chart = null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.chart-container {
|
||
|
|
width: 1400px;
|
||
|
|
height: 280px;
|
||
|
|
/* color: #76fbc4; */
|
||
|
|
}
|
||
|
|
</style>
|