效果图：
代码：
<template> <div class="chart" id="chart"></div></template><script> export default { name : "Bar", data() { return { }; }, mounted() { this.bar(); }, methods: { bar() { this.myChart = this.$echarts.init(document.getElementById("chart")); var data = [100, 200, 300]; var titlename = ["苹果", "香蕉", "橙子"]; var option = { backgroundColor:"#17326b",//如果设置图片背景，在外层div设置css款式 grid: { left: "10", top: "10", right: "0", bottom: "10", containLabel: true, }, xAxis: { type: "value", splitLine: { show: false }, axisLabel: { show: false }, axisTick: { show: false }, axisLine: { show: false }, }, yAxis: [ { type: "category", axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: "black", fontSize: 12, textStyle: { color: "#fff", }, }, data: titlename, // max:10, 设置y刻度最大值，相当于设置总体行高 inverse: true,//横向进度条的要害 }, { type: "category", axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: "black", fontSize: 12, textStyle: { color: "#fff", }, }, data: data, // max:10, inverse: true, }, ], series: [ { name: "条", type: "pictorialBar", symbolRepeat: "fixed", symbolMargin: 1, symbol: "rect",//外部类型（方块，圆，svg，base64图片） symbolClip: true, symbolSize: [6, 8],//进度条的宽高 symbolOffset: [5,0],//柱子的地位偏移 data: data, z: 2, // barCategoryGap:0, itemStyle: { normal: { barBorderRadius: 7, //柱体的色彩 //右，下，左，上（1，0，0，0）示意从正右开始向左突变 color: function (params) { // console.log(params); var colorList = [ ["#02f0fe", "#02B8EC"], ["#02f0fe", "#02B8EC"], ["#02f0fe", "#02B8EC"], ["#02f0fe", "#02B8EC"], ["#02f0fe", "#02B8EC"], ]; var colorItem = colorList[params.dataIndex]; return new that.$echarts.graphic.LinearGradient( 1, 0, 0, 0, [ { offset: 0, color: colorItem[0], }, { offset: 1, color: colorItem[1], }, ], false ); }, }, }, zlevel: 1, }, { name: "进度条背景", type: "bar", barGap: "-100%", barWidth:16, symbolOffset: [5, 0],//柱子的地位 data: [100, 100, 100], color: "#2e5384", itemStyle: { normal: { barBorderRadius:4, }, }, }, ], }; this.myChart.setOption(option); //尺寸自适应 window.addEventListener("resize", () => { this.myChart.resize();}); }, }</script><style> .panel { height: 340px; background: rgba(255, 255, 255, 0.04); padding: 10px; }</style>