当前位置: 首页 > Web前端 > vue.js

echartbar分组后自定义tooltip和x轴label

时间:2023-03-31 17:27:21 vue.js

echarts实现分组直方图,自定义组内各条的labeloption={color:['#3e6591','#eb7d22','#d73f45'],grid:{left:100},xAxis:{axisLine:{lineStyle:{color:'#ccc'}},axisLabel:{textStyle:{color:'#777'}}},yAxis:[{inverse:true,splitLine:{show:true},axisTick:{length:0,lineStyle:{color:'#ccc'}},axisLine:{lineStyle:{color:'#ccc'}},数据:['-','-','-','-','-']}],series:[{type:'bar',data:[220,182,191,234,290],label:{normal:{show:true,position:'left',textStyle:{color:'#000'},formatter:'合约金额',}}},{type:'bar',data:[210,132,91,204,220],label:{normal:{show:true,position:'left',textStyle:{color:'#000'},formatter:'received',}}},{type:'bar',数据:[120,132,131,254,278],label:{normal:{show:true,position:'left',textStyle:{color:'#000'},formatter:'AccountsReceivable',}}}]};例如:相关代码:initCharts(){letseriesArr=[]letdetail=this.detail?this.detail:''letarr=[[{name:['钻井总数','射孔总数','压裂总数'],data:[{name:'钻井总数',价值:细节.totalDrilling?detail.totalDrilling-0:0},{name:'Totalnumberofperforations',value:detail.totalPerforate?detail.totalPerforate-0:0},{name:'总压裂次数',value:detail.totalFracture?detail.totalFracture-0:0}]}],[{name:['drilled','perforated','inproduction'],data:[{name:'finisheddrilling',value:detail.finishingDrilling?detail.finishingDrilling-0:0},{name:'perforated',value:detail.fractured?detail.fractured-0:0},{name:'已经投入生产',value:detail.inProduction?detail.inProduction-0:0}]}]]arr.forEach((item,ind)=>{seriesArr.push({//name:item[0].name,type:'bar',label:{正常:{show:true,position:'bottom',textStyle:{color:'#000'},formatter:(params,index)=>{console.log(params,index)returnparams.data.name}}},barWidth:45,color:ind%2===0?'#3FA7DC':'#21a675',barGap:'20%',//每列之间的间距barCategoryGap:'60%',//一组列间距//一个数据是一个颜色蓝色的所有数据data:item[0].data})})//console.log('seriesArr=',seriesArr)//return//根据准备好的dom,初始化echarts实例this.$nextTick(()=>{this.myChartOptions={xAxis:{name:'井数',type:'category',nameGap:30,nameLocation:'middle',boundaryGap:true,//data:['钻井总数','钻完井','射孔总数','射孔总数','压裂总数','在产'],//data:['钻井总数,完钻数','射孔总数,射孔数','压裂总数,投产'],data:['','',''],axisLabel:{show:true,textStyle:{margin:20,fontSize:14},formatter:(value,index)=>{//console.log(222,value,index)返回值}}},tooltip:{trigger:'axis',formatter:function(params){//console.log('params=',params)varresult=''vardotHtml=''vardotHtml2=''result+=params[0].name+','+params[1].name+'
'+dotHtml+params[0].name+':'+params[0].value+'
'+dotHtml2+params[1].name+':'+params[1].value返回结果}},yAxis:{name:'孔数(口)',position:'left',nameGap:30,nameLocation:'center',axisTick:{show:true},axisLine:{onZero:false,show:true//显示坐标线}},series:seriesArr}this.myChart=this.$echarts.init(document.getElementById('main'))this.myChart.setOption(this.myChartOptions)})//this.myChartOptions.dataset.source=this.energyConsumptionDataSource;//使用刚刚指定的配置项和数据显示图表。},