Echarts 背景漸變柱狀圖

 

var dom = document.getElementById("container"); var myChart1 = echarts.init(dom); var app = {}; option1 = null; //初始化數據 var category = ['深圳市', '東莞市', '廣州市', '惠州市', '北京市', '上海市', '武漢市']; var barData = [7913, 4910, 3810, 2054, 988, 3979, 818]; var option1 = { title: { text: '柱狀圖示例', textStyle: { color: '#03a9f4' } }, legend: { data:['用戶數'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '16%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', axisLine: { show: false, lineStyle: { color: "#ff0" } }, axisLabel: { rotate:45, //傾斜度 -90 至 90 默認爲0 show: false }, axisTick: { show: false }, splitLine: { // 分隔線 show: false, // 默認顯示，屬性show控制顯示與否  }, }, yAxis: { type: 'category', data: category, splitLine: { // 分隔線 show: false, // 默認顯示，屬性show控制顯示與否  }, axisLine: { show: false, lineStyle: { color: "#ff0" } }, axisTick: { show: false }, offset: 10, }, series: [ { name: '數量', type: 'bar', data: barData, barWidth: 14, // barGap: 10, // smooth: true,  label: { normal: { show: true, position: 'right', offset: [5, -2], textStyle: { color: '#F68300', fontSize: 13 } } }, itemStyle: { emphasis: { barBorderRadius: 7 }, normal: { barBorderRadius: 7, color: function(params){ var colorList = [ ['#3977E6','#37BBF8'], ['#E8576C','#661C5A'] ] for(let i=0;i<barData.length;i++){ if(barData[params.dataIndex] <= 3000){ return new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 0, color: '#3977E6'}, {offset: 1, color: '#37BBF8'} ]) }else{ return new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 0, color: '#E8576C'}, {offset: 1, color: '#661C5A'} ]) } } } }, }, }, ] }; if (option1 && typeof option1 === "object") { myChart1.setOption(option1, true); }