效果
代码
myEcharts(){// 基于准备好的dom，初始化echarts实例this.myChart = echarts.init(this.$refs.rankingList);// 指定图表的配置项和数据var option = { title: { }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['数据'] }, grid: { top: '0', left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] ,axisLine: { // 控制坐标轴线 show: false // 隐藏轴线 }, axisTick: { // 控制刻度线 show: false // 隐藏刻度线 }, splitLine: { // 控制网格线 show: false // 隐藏网格线 }, axisLabel: { // 控制坐标轴标签 show: false // } }, yAxis: { type: 'category', data: ['项目5', '项目4', '项目3', '项目2', '项目1'] ,axisLine: { // 控制坐标轴线 show: false // 隐藏轴线}, axisTick: { // 控制刻度线 show: false // 隐藏刻度线 }, splitLine: { // 控制网格线 show: false // 隐藏网格线 }, axisLabel: { // 控制坐标轴标签 show: true, inside: true,interval: 0, //横轴信息全部显splitNumber: 50,textStyle: {color: '#585858',verticalAlign: 'bottom',fontSize: 13,align: 'left',padding: [0, 0, 15, -5]}} }, series: [ { name: '数值', type: 'bar', stack: '总量', barWidth: 15, // 条形的宽度 label: { show: true, position: 'right' }, itemStyle: { borderRadius: 4,// 设置颜色为线性渐变 color: function (params) { var startIndex = params.dataIndex % 5; //var colors = [ ['#B4B4B4', '#FFFFFF'], // 第三种渐变色 ['#B4B4B4', '#FFFFFF'], // 第四种渐变色 ['#6C88FC', '#FFFFFF'], // 第四种渐变色 ['#FFB44D', '#FFFFFF'], // 第二种渐变色 ['#FF4D4D', '#FFFFFF'], // 第一种渐变色 ]; var startColor = colors[startIndex][0]; var endColor = colors[startIndex][1]; return new echarts.graphic.LinearGradient( 1, 0, 0, 0, // 渐变方向从上到下 [ {offset: 0, color: startColor}, {offset: 1, color: endColor} ], false // 是否为对象模式，这里用数组模式 ); }, } ,data: [120, 200, 150, 80, 70] } ] }; // 使用刚指定的配置项和数据显示图表。this.myChart .setOption(option);}因为是在y轴名字在上方展示，看下面代码
axisLabel: { // 控制坐标轴标签 show: true, inside: true,interval: 0, //横轴信息全部显splitNumber: 50,textStyle: {color: '#585858',verticalAlign: 'bottom',fontSize: 13,align: 'left',padding: [0, 0, 15, -5]}} 
