Effect:
Code:
<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 = [" apple ", "banana "," orange "]; Grid: {left: "10", top: "10", right: "0", bottom: "1 "; grid: {left: "10", top: "10", right: "0" "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, sets Y scale maximum, equivalent to setting overall row height inverse: true,// key for horizontal progress bar}, {type: "category", axisTick: {show: false }, axisLine: { show: false }, axisLabel: { color: "black", fontSize: 12, textStyle: { color: "#fff", }, }, data: Data, // Max :10, inverse: true,},], series: [{name: "bar ", type: "pictorialBar", symbolRepeat: "fixed", symbolMargin: 1, Symbol: "rect",// inner type (block, circle, SVG, base64 image) SymbolClip: true, symbolSize: [6, 8],// the width and height of the progress bar symbolOffset: BarCategoryGap :0, itemStyle: {normal: {barBorderRadius: (1,0,0,0) The left gradient starts from right to left. 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: "Progress bar background ", type: "bar", barGap: "-100%", barWidth:16, symbolOffset: [5, 0],// Symboloffset: [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>