<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2019</title> </style> </head> <body> <div id="main" style=" 100%;height: 600px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { type: 'value', splitLine:{ show:false }, axisTick: { show: false, }, axisLine:{ show: false, lineStyle:{ color:'transparent', } }, boundaryGap: [0, 0.01], }, yAxis: { type: 'category', splitLine:{ show:false }, axisTick: { show: false, }, axisLabel:{ margin:5, fontWeight: 'bold', fontSize: 15, interval: 0,// 横轴信息全部显示 rotate: 0 // 0度角倾斜显示 }, axisLine:{ show: false, lineStyle:{ color:'#FFFFFF', } }, data:['隔壁泰山','夜空中最亮的星夜空中最亮的星','串烧','说学逗唱','猴子说','创意走秀','兔耳朵舞','咖喱咖喱+我爱你'] }, series: [{ name: '评论量(QTY)', type: 'bar', data: [55,77,88,99,11,22,33,44], barWidth:30, itemStyle: { normal: { barBorderRadius: [0, 5, 5, 0], color: function (params){ var colorList = [ ['#14c3a2','#14c3a2','#22e8c3','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'], ['#0679e3','#3d97ed','#90c1fc','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'], ['#0679e3','#3d97ed','#90c1fc','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'], ['#0679e3','#3d97ed','#90c1fc','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'] ]; var index = params.dataIndex; if(params.dataIndex >= colorList.length) { index = params.dataIndex - colorList.length; } return new echarts.graphic.LinearGradient(0,0,0,1, [ {offset: 0, color: colorList[index][0]}, {offset: 0.3, color: colorList[index][1]}, {offset: 0.6, color: colorList[index][2]}, {offset: 1, color: colorList[index][3]} ]); }, label: { show: true, position: 'insideLeft', distance: 20, textStyle: { color: '#ffffff', fontSize: '16' } } }, }, }] }; console.log(option.yAxis.data); // 使用刚指定的配置项和数据显示图表。 if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>