最近用的echarts的柱狀圖，客戶需要有立體的效果，需要echarts的漸變色生成器echarts.graphic.LinearGradient實現，特記錄一下解決方法：
效果圖如下
代碼如下（主要配置color）：
var myChart = echarts
.init(document.getElementById('main3'), 'macarons');
// 指定圖表的配置項和數據
var jobGrade1Data = [];
var countData = [];
for ( var i = 0; i < data.list.length; i++) {
jobGrade1Data[i] = data.list[i].jobGrade1;
countData[i] = data.list[i].count;
}
option = {
title : {
text : '職級情況分析(人數:'+data.num+')',
subtext : '',
left : 'center'
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'none'
}
},
xAxis : [ {
type : 'category',
data : jobGrade1Data
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '人數',
type : 'bar',
data : countData,
itemStyle : {
normal : {
label : {
show : true,
//開啓顯示
position : 'top',
//在上方顯示
textStyle : { //數值樣式
// fontSize: 16
}
},
color: function (params){
//數組定義的一種顏色
var colorList = [
['#f24a78','#fedce6','#f24a78']
];
var index=params.dataIndex;
if(params.dataIndex >= colorList.length){
index=params.dataIndex%colorList.length;
}
return new echarts.graphic.LinearGradient(1,0, 0, 0,
[
{offset: 0, color: colorList[0][0]},
{offset: 0.5, color: colorList[0][1]},
{offset: 1, color: colorList[0][2]}
]);
},
barBorderRadius: 5 //柱狀角成橢圓形
}
}
} ],
axisLabel : {//座標軸刻度標籤的相關設置。
formatter : function(params) {
var newParamsName = "";// 最終拼接成的字符串
var paramsNameNumber = params.length;// 實際標籤的個數
var provideNumber = 3;// 每行能顯示的字的個數
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話，需要顯示幾行，向上取整
/**
* 判斷標籤的個數是否大於規定的個數， 如果大於，則進行換行處理 如果不大於，即等於或小於，就返回原標籤
*/
// 條件等同於rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循環每一行,p表示行 */
for ( var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 開始截取的位置
var end = start + provideNumber;// 結束截取的位置
// 此處特殊處理最後一行的索引值
if (p == rowNumber - 1) {
// 最後一次不換行
tempStr = params.substring(start,
paramsNameNumber);
} else {
// 每一次拼接字符串並換行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最終拼成的字符串
}
} else {
// 將舊標籤的值賦給新標籤
newParamsName = params;
}
//將最終的字符串返回
return newParamsName
}
}
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
//點擊事件
myChart.on('click', function (params) {
//alert(params.name);
});
多種顏色的demo:
代碼：
var myChart = echarts
.init(document.getElementById('main1'), 'macarons');
// 指定圖表的配置項和數據
option = {
title : {
text : '年齡情況分析(人數:' + data.ageAll + ')',
subtext : '',
left : 'center'
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'shadow'
}
},
xAxis : [ {
type : 'category',
data : [ '30歲及以下', '31-35歲', '36-40歲', '41-45歲', '46-50歲',
'51-55歲', '56-60歲', '60歲以上' ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '人數',
type : 'bar',
data : [ data.age30, data.age31, data.age36, data.age41,
data.age46, data.age51, data.age56, data.age60 ],
itemStyle : {
normal:{
label : {contentType: false,
show : true,
//開啓顯示
position : 'top',
//在上方顯示
textStyle : { //數值樣式
// fontSize: 16
}
},
//每個柱子的顏色即爲colorList數組裏的每一項,如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
color: function (params){
//注意顏色值循環使用
var colorList = [
['#f24a78','#fedce6','#f24a78'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
];
var index=params.dataIndex;
if(params.dataIndex >= colorList.length){
index=params.dataIndex%colorList.length;
}
return new echarts.graphic.LinearGradient(1,0, 0, 0,
[
{offset: 0, color: colorList[index][0]},
{offset: 0.5, color: colorList[index][1]},
{offset: 1, color: colorList[index][2]}
]);
},
barBorderRadius: 5 //柱狀角成橢圓形
}
}
} ],
axisLabel : {//座標軸刻度標籤的相關設置。
formatter : function(params) {
var newParamsName = "";// 最終拼接成的字符串
var paramsNameNumber = params.length;// 實際標籤的個數
var provideNumber = 5;// 每行能顯示的字的個數
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話，需要顯示幾行，向上取整
/**
* 判斷標籤的個數是否大於規定的個數， 如果大於，則進行換行處理 如果不大於，即等於或小於，就返回原標籤
*/
// 條件等同於rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循環每一行,p表示行 */
for ( var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 開始截取的位置
var end = start + provideNumber;// 結束截取的位置
// 此處特殊處理最後一行的索引值
if (p == rowNumber - 1) {
// 最後一次不換行
tempStr = params.substring(start,
paramsNameNumber);
} else {
// 每一次拼接字符串並換行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最終拼成的字符串
}
} else {
// 將舊標籤的值賦給新標籤
newParamsName = params;
}
//將最終的字符串返回
return newParamsName
}
}
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);