echarts 进度条类型柱状图-编程知识

echarts 进度条类型柱状图

在这里插入图片描述

父组件：

<barChartProfit :opt="avgProfit" />import barChartProfit from "./components/barChartProfit";data() {return {avgProfit: {xData: ['2019', '2020', '2021', '2022', '2023'],totalData: [30,30,30,30,30],seriesData: [10,11,12,21,15]}}
}

子组件：

<template><div style="width: 100%;height: 100%;"><ChartPanel ref="chart" :option="options" :style="opt.yAxisName ? 'height:calc(100% - 16px)' : ''"></ChartPanel></div>
</template><script>
import * as echarts from 'echarts'
import ChartPanel from '@/components/ChartPanel';
export default {components: {ChartPanel},props: {opt: {type: Object,default() {return {}}}},data() {return {options: null}},watch: {opt: {deep: true,immediate: true,handler(val) {// if (val && val.seriesData) {this.getOpt(val)// }}}},methods: {getOpt(val) {let {seriesData,xData,totalData} = valthis.options =  {title: {text: '年人均利润',x: 'left',y: 0,textStyle: {color: 'rgba(35, 35, 56, 1)',fontSize: 16,fontWeight: '700',},},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: params => {let i = params.length - 1let result = `<div>${params[i].name}年<span style="color:#336CFF;font-weight:700">${params[i].value}万元</span>  </div>`return result}},xAxis: {type: 'value',max: totalData[0],axisLabel: {show: true,textStyle: {color: "#595D64",fontSize: 14,}},splitLine: {show: false,}},grid: {left: '40',right: '16',bottom: '0',top: 32,containLabel: true},yAxis: [{type: "category",inverse: false,axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},data: xData,}],series: [{// 灰色背景type: "bar",barWidth: 12,legendHoverLink: false,silent: true,itemStyle: {normal: {color: 'rgba(242, 244, 247, 1)',}},label: {normal: {show: true,position: "left",formatter: "{b}",textStyle: {color: "rgba(89, 93, 100, 1)",fontSize: 14,}}},data: totalData,z: 1,animationEasing: "elasticOut"},{// 灰色背景分隔线type: "pictorialBar",itemStyle: {normal: {color: "#fff"}},symbolRepeat: "fixed",symbolMargin: 4,symbol: "rect",symbolClip: true,symbolSize: [2, 14],symbolPosition: "start",symbolOffset: [1, -1],data: totalData,z: 2,animationEasing: "elasticOut"}, {// 蓝色背景type: "bar",barWidth: 12,barGap: '-100%',legendHoverLink: false,silent: true,itemStyle: {normal: {color: 'rgba(53, 98, 212, 1)',}},label: {normal: {show: true,position: "right",formatter: "{c}万元",textStyle: {color: "#595D64",fontSize: 14}}},data: seriesData,z: 3,animationEasing: "elasticOut"},{// 分隔线type: "pictorialBar",itemStyle: {normal: {color: "#fff"}},symbolRepeat: "fixed",symbolMargin: 4,symbol: "rect",symbolClip: true,symbolSize: [2, 14],symbolPosition: "start",symbolOffset: [1, -1],data: seriesData,z: 4,animationEasing: "elasticOut"},]};this.$nextTick(() => {this.$refs.chart.initChart(echarts, chart => {// chart.setOption(this.options)this.options && chart.setOption(this.options, true);});})}}
}
</script>