vue+echarts怎么实现条纹柱状横向图

vue+echarts怎么实现条纹柱状横向图

这篇“vue+echarts怎么实现条纹柱状横向图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue+echarts怎么实现条纹柱状横向图”文章吧。

实现效果：

<template><divid="BusinessTop5Chart"></div></template><script>import{getNoteMatters}from'@/api/government';constcolors=['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)',];exportdefault{data(){return{list:[],list1:[],list2:[],Top5ListName:[],Top5ListValue:[]};},mounted(){this.getNoteMatters();},methods:{initMap(){varmyChart=this.$echarts.init(document.getElementById('BusinessTop5Chart'));constoption={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(255,255,255,0.85)',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%',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(0,0,0,1)',},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:"三亚市税务局",//1:"三亚市市场监督管理局",//2:"三亚市公安局",//3:"三亚市邮政管理局",//4:"三亚市社会保险服务中心窗口"}]this.Top5ListName=businessTpo5.map((item)=>{returnitem.agencies;});//this.Top5ListValue=[{0:189354,1:56933,2:13267,3:10979,4:9054}]this.Top5ListValue=businessTpo5.map((item)=>{returnNumber(item.num);});constmax=Math.max.apply(null,this.Top5ListValue);//this.list=[{itemStyle://color:"rgba(248,75,110,1)"//name:"三亚市税务局"//num:"189354"//rate:"57.03%"//value:189354}]this.list=businessTpo5.map((item,index)=>{letobj={name:item.agencies,value:Number(item.num),num:item.num,rate:item.rate,itemStyle:{color:colors[index],},};returnobj;});//this.list1=[//label:{//normal:{//color:colors[index],//fontSize:14//position:"right"//show:true//offset:[16,0]//name:"三亚市税务局"//formatter(){return(item.num+'单位'+''+item.rate)}//rate:"57.03%"//value:189354}}this.list1=businessTpo5.map((item,index)=>{letobj={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+'件'+''+''+''+''+''+''+''+''+''+''+''+item.rate);},},},};returnobj;});//this.list2=[{label:"189354"//name:"三亚市税务局"//rate:"57.03%"//value:189354}]this.list2=businessTpo5.map((item)=>{letobj={name:item.agencies,value:Number(item.num),label:item.num,rate:item.rate,};returnobj;});}this.initMap();});},},};</script>

以上就是关于“vue+echarts怎么实现条纹柱状横向图”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。