echarts 實現柱狀圖漸變色
阿新 • • 發佈：2019-03-19
和數 obj ack length distance als slab 全部 fun
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2019</title> </style> </head> <body> <div id="main" style="width: 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>
echarts 實現柱狀圖漸變色