效果图
相干代码
<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>