效果图
相干代码
<template>
<div class="center_bottom_wrap">
<div class="centerbar" :class="domClass"></div>
</div>
</template>
<script>
export default {
props: {
barWidth: {
type: Number,
default: 14
},
domClass: {
type: String,
default: 'centerbar'
}
},
computed: {hdzcdData () {return this.hhkfzlData.HDZCD},
yzlhdcdData () {return this.hhkfzlData.YZLHDCD},
cityArr () {let arr = []
this.hhkfzlData.HDZCD.forEach(item => {arr.push(item.name)
})
return arr
}
},
data () {return { hhkfzlData: {} }
},
created () {this.getData()
},
mounted () {this.initCharts()
},
methods: {getData () {
this.hhkfzlData = {HDZCD: [{ name: '2017', value: 182}, {name: '2018', value: 132}, {name: '2019', value: 232}, {name: '2020', value: 322}, {name: '2021', value: 132}, {name: '2022', value: 332}],
YZLHDCD: [{name: '2017', value: 182}, {name: '2018', value: 132}, {name: '2019', value: 332}, {name: '2020', value: 422}, {name: '2021', value: 182}, {name: '2022', value: 432}]
}
},
initCharts () {
let cityArr = this.cityArr
let barWidth = this.barWidth
var optionData = {
item0: {
data: this.hdzcdData,
name: '支出',
freq: '年度',
axis: []},
item1: {
data: this.yzlhdcdData,
name: '人均可摆布支出',
freq: '年度',
axis: []},
legend: [
'支出',
'人均可摆布支出'
],
dates: cityArr
}
// 初始化 option 的办法
function initVisualizer (xValue) {
return {
tooltip: {
trigger: 'item',
formatter: function (params) {
var res =
params.name + '<br/>' + params.seriesName + ':' + params.value
return res
}
},
grid: {
left: '10%',
top: '12%',
right: '2%',
bottom: '15%'
},
legend: {
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
itemGap: 30,
x: '60%',
textStyle: {
// 图例文字的款式
color: '#fff',
fontSize: 12,
padding: [2, 0, 0, 2],
fontFamily: '微软雅黑',
fontWeight: 'normal'
},
data: optionData.legend,
show: true
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {color: '#464849'}
},
axisTick: {show: false},
nameTextStyle: {fontSize: 14},
axisLabel: {
textStyle: {
color: '#DAF4FF',
fontSize: 14,
fontFamily: '微软雅黑',
fontWeight: 'normal'
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#194A78'
}
}
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {color: '#464849'}
},
axisTick: {show: false},
axisLabel: {
interval: 0,
textStyle: {
color: '#DAF4FF',
fontSize: 14
}
},
splitLine: {show: false},
interval: false,
data: cityArr
},
series: [
{
// 指标 1
name: optionData.item0.name,
type: 'bar',
z: 1,
barWidth: barWidth,
barGap: '30%',
symbolOffset: [0, -6],
offset: 0,
data: optionData.item0.data,
itemStyle: {
normal: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 1,
color: 'rgba(38,149,237,0.1)'
},
{
offset: 0,
color: '#365aa5'
}
]
},
opacity: 0.8
}
}
},
{
name: '',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {color: '#365aa5'},
symbolOffset: [-8, -1],
symbolPosition: 'end',
symbolSize: [barWidth, 3],
data: optionData.item0.data
},
{
// 指标 2
type: 'bar',
z: 2,
barWidth: barWidth,
barGap: '20%',
symbolOffset: [0, 6],
offset: 20,
name: optionData.item1.name,
data: optionData.item1.data,
itemStyle: {
normal: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 1,
color: 'rgba(237, 194, 100, 0.1)'
},
{
offset: 0,
color: 'rgba(237, 194, 100, 1)'
}
]
},
opacity: 0.8
}
}
},
{
name: '',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {color: 'rgba(237, 194, 100, 1)'
},
symbolOffset: [8, -12],
symbolPosition: 'end',
symbolSize: [barWidth, 3],
data: optionData.item1.data
}
]
}
}
// 首次初始化 option
var chart0 = this.$echarts.init(document.getElementsByClassName(this.domClass)[0]
)
chart0.setOption(initVisualizer([-21.5, 0, 21.5]))
}
}
}
</script>
<style lang="scss" scoped>
.center_bottom_wrap {
display: flex;
width: 96%;
height: 200px;
margin: auto;
padding: 0 0 0 20px;
}
.centerbar {
display: flex;
width: 100%;
height: 100%;
}
</style>