由于项目中运用echarts可能较多。因此对同一种类型的echarts进行一个封装，页面调用根据传入不同的状态生成不同样式，例如横向柱状图和纵向柱状图。
话不多说上代码
父页面
checkOptionData:function(){ let xDate=["测试1","测试2","测试3",'测试4','测试5','测试6','测试7']; let y1=[100,600,200,100,100,100,100]; let y2=[200,100,300,100,100,100,100]; let series=[y1,y2]; let legendDate=["数量1",'数量2']; this.optionData={ id:"opraStatistics", title:"测试", legendDate:legendDate, xDate:xDate, xName:"", yName:"", series:series, owner:{ colorList:[], type:'',//控制横向或是纵向显示'transverse'为横向，默认不传为纵向 stack:'a',//控制是否叠加，默认不传是不叠加 //如果是横向柱状图可添加Y轴滑动 // dataZoom:[{type:'slider',start:0,end:10,right:0,show:true,width:10,height:'100%',top:-2,yAxisIndex:0}] //这里是纵向添加x轴滑动 dataZoom:[{type:'slider',start:0,end:60,bottom:20,show:true,width:'70%',height:10,left:'center', backgroundColor:'rgb(60,114,209)', height:'4', fillerColor:'#fff', borderColor:'rgb(60,114,209)', textStyle:{ color:'transparent' }, } ] } }; },子页面
setOption({id, title, legendDate, xDate, xName, yName, series,owner}) { var that=this const ownertype=owner.type=='transverse' const colorList =owner.colorList.length ? owner.colorList:['rgb(45,185,186)', 'rgb(24,146,147)', '#009fc1']; const optionData = { dataZoom:owner.dataZoom?owner.dataZoom:[],//数据过大加入滑动 tooltip: { trigger: 'axis' }, title: { text: title, // left: 'left', top:'20', left:'20', textStyle: { fontSize: 14, 'color':"rgb(56,116,220)" } }, color: colorList,//颜色 legend: { data: legendDate, left: '40%', top:'15%', textStyle:{ //设置右上角标题文字大小 fontSize:12, color:'#fff' }, itemWidth:16, itemHeight:12, itemGap:6,//设置文字和图标间距 }, calculable: true, textStyle: { 'fontSize': 8, 'fontFamily': 'Source Han Sans CN Bold', 'color':"#666666" }, grid: {//设置图距离 left: 20, right:15, bottom:30, top:'30%', containLabel: true }, xAxis: [ { type: ownertype?'value':'category', data:ownertype?'':xDate, name: xName, splitLine:{show:false }, //去除网格线 axisLine: { // 坐标 轴线 show: true, // 是否显示坐标轴轴线 lineStyle: {//设置轴线 type: 'solid' , color: 'rgb(211,211,211)' , width: '1' } }, axisTick: { // 坐标 轴线 show: false // 是否显示坐标轴轴线 }, axisLabel: { interval:0, //显示全 //设置横轴文字大小 fontSize:12, 'color':"#fff" }, nameTextStyle:{ //设置横轴类型文字大小 fontSize:12 } } ], yAxis: [ { type: ownertype?'category':'value', data:ownertype?xDate:'', name: yName, splitLine:{show:true }, //去除网格线 axisLine: { // 坐标 轴线 show: true, // 是否显示坐标轴轴线 lineStyle: {//设置轴线 type: 'solid' , color: 'rgb(211,211,211)' , width: '1' } }, axisTick: { // 坐标 轴线 show: false // 是否显示坐标轴轴线 }, axisLabel: { //设置纵轴文字大小 fontSize:12, 'color':"#fff", }, nameTextStyle:{ //设置纵轴数量文字大小 fontSize:12, // fontWeight:'bold'数量 } } ] } optionData.series = []; if(series){ for (let i = 0; i < series.length; i++) { const scolor = colorList[i] optionData.series[i] = { name: legendDate[i], type: 'bar', data: series[i], stack:owner.stack,//设置柱状图叠加 // barWidth:30, barMaxWidth:35,//设置柱形图柱子宽度 smooth: true, itemStyle: { fontSize:12, emphasis: { barBorderRadius: 30, textStyle: { // fontWeight: 'bolder', fontSize: '12', fontFamily: '微软雅黑' } }, normal: { // 柱形图圆角，初始化效果 barBorderRadius: [2, 2, 0, 0], //渐变色0,0,0,1表示从上向下渐变（右，下，左，上） color:i==1?'rgb(253,192,42)':new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgb(1,242,252)'},{offset:0.5,color:'rgb(55,144,241)'},{offset:1,color:'rgb(76,105,235)'}]), label: { show: true, // 是否展示 // color: ownertype?'#fff':scolor, color:'#fff', position:ownertype?'insideRight':'top', barMaxWidth:30, // backgroundColor:'rgb(246,189,21)', itemStyle: { padding:5, }, textStyle: { // fontWeight: 'bolder', //设置柱状图上文字大小 fontSize: '11', fontFamily: '微软雅黑' } } } } } } } this.chart = echarts.init(document.getElementById(id)) this.chart.clear() this.chart.setOption(optionData); // dblclick双击 this.chart.on('click', function (params) { //柱状图点击事件 console.log(that.chartData.id) //触发父组件方法，传入点击参数判断掉不同接口 that.$emit('alert',params) console.log(params,"单击了"+params.name+"柱状图"); }); }看图