echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient
最近用的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);