How to realize the Stripe column Transverse Diagram with vue+echarts

Most people do not understand the knowledge points of this article "vue+echarts how to achieve stripe bar horizontal map", so the editor summarizes the following contents, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue+echarts how to achieve stripe bar horizontal map" article.

Achieve results:

Import {getNoteMatters} from'@ / api/government';const colors = ['rgba (248,75,110,1)', 'rgba (239,142,47,1)', 'rgba (234,202,4,1)', 'rgba (79,224,255,1)', 'rgba (106,196,255,1)',] Export default {data () {return {list: [], list1: [], list2: [], Top5ListName: [], Top5ListValue: []}, mounted () {this.getNoteMatters ();}, methods: {initMap () {var myChart = this.$echarts.init (document.getElementById ('BusinessTop5Chart')) Const option = {grid: {top: 20, bottom: 30, left: 10, right: 150, containLabel: true,}, tooltip: {show: true, trigger: 'axis', axisPointer: {type:' shadow',},} XAxis: {type: 'value', splitLine: {show: false,}, axisLine: {show: false,}, axisLabel: {show: false,}, axisTick: {show: false,} Position: 'top',}, yAxis: {type:' category', data: this.Top5ListName, inverse: true, / / axisLine: {show: false,}, axisTick: {show: false,} AxisLabel: {textStyle: {color: 'rgba', fontSize: 14, fontFamily: 'TencentSans',}, padding: [0,0,20,0], inside: true, verticalAlign:' bottom',},} Series: [{type: 'bar', barGap:'-90%', barMaxWidth: 14, z: 0, label: {normal: {show: false, position: 'right', fontSize: 14 Offset: [16,0],},}, data: this.list,}, {type: 'bar', barGap:'-90% bar', barGap, barMaxWidth: 14, itemStyle: {color: 'rgba (26,49,99,0.5)' }, tooltip: {show: false,}, data: this.list1,}, {type: 'pictorialBar', symbolRepeat:' fixed', symbolMargin: 4, symbol: 'rect', symbolClip: true SymbolSize: [1,14], symbolPosition: 'start', itemStyle: {color:' rgba,}, data: this.list2,},],} MyChart.setOption (option);}, getNoteMatters () {getNoteMatters () .then ((res) = > {const {status, data} = res; const {businessTpo5} = JSON.parse (data) If (status = 200) {/ / this.Top5ListName= [/ / 0: "Sanya Taxation Bureau", / / 1: "Sanya Market Supervision Administration", / / 2: "Sanya Public Security Bureau", / / 3: "Sanya Postal Administration" / / 4: "window of Sanya Social Insurance Service Center"}] this.Top5ListName = businessTpo5.map ((item) = > {return item.agencies }); / / this.Top5ListValue= [{0: 189354, 1: 56933, 2: 13267, 3: 10979, 4: 9054}] this.Top5ListValue= businessTpo5.map ((item) = > {return Number (item.num);}); const max = Math.max.apply (null, this.Top5ListValue) / this.list= [{itemStyle: / / color: "rgba (248,75,110,1)" / / name: "Sanya Taxation Bureau" / / num: "189354" / / rate: "57.03%" / / value: 189354}] this.list= businessTpo5.map ((item) Index) = > {let obj = {name: item.agencies, value: Number (item.num), num: item.num, rate: item.rate, itemStyle: {color: colors [index],},} Return obj;}) / / this.list1= [/ / label: {/ / normal: {/ / color: colors [index] / / fontSize: 14 / / position: "right" / / show: true / / offset: [16Power0] / / name: "Sanya Taxation Bureau" / / formatter () {return (item.num+' unit'+'+ item.rate)} / / rate: "57.03%" / / value: 189354} this.list1 = businessTpo5.map ((item) Index) = > {let obj = {name: item.agencies, value: max, label: item.num, rate: item.rate, label: {normal: {show: true, position: 'right', fontSize: 14 Color: colors [index], offset: [16, 0] Formatter () {return (item.num + 'pieces' + item.rate) },}; return obj;}) / this.list2= [{label: "189354" / / name: "Sanya Taxation Bureau" / / rate: "57.03%" / / value: 189354}] this.list2= businessTpo5.map ((item) = > {let obj = {name: item.agencies, value: Number (item.num), label: item.num Rate: item.rate,} Return obj;});} this.initMap ();},},});},},