前提：
会简单的绘制柱状图
主要内容：
渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到：
itemStyle: {
normal: {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，右,下,左,上（0，0，0，1）表示从正上开始向下渐变
// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'red' //指0%处的颜色
}, {
offset: 1, color: 'blue' //指100%处的颜色
}], false)
}
}
设计图：
应用：
（一）首先编写简单的html如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>柱状图柱体颜色渐变（每个柱体不同渐变色）</title>
</head>
<style type="text/css">
*{
padding: 0;
margin:0 auto;
}
.wrapper{
width: 1100px;
height: auto;
background: #262A36FF;
}
#container{
width: 960px;
height:500px;
margin-top:5%;
/* background:red; */
}
</style>
<body>
<div class="wrapper">
<div id="container"> </div>
</div>
</body>
<script type = "text/javascript" src="./js/jquery.js"></script>
<script type = "text/javascript" src="./js/echarts.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
}
</script>
</html>
（二）这里将直接介绍图表配置选项option的设置，文末会附上全部代码
1、按照设计图绘制x、y轴
xAxis:{
//是否显示x轴
show:true,
//类型：类目轴
type:'category',
//坐标轴刻度设置
axisTick:{
//隐藏刻度线
show:false,
//设置刻度线与标签对齐
alignWithLabel:true
},
axisLabel:{
//x轴刻度标签字体颜色大小
textStyle:{
fontSize: 20,
color:'#F0F0F0'
}
},
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#6A7594',
//线型
type:'dashed'
}
},
data:['目标职责','制度建设','教育培训','风险管理','职业安全','应急管理','现场管理']
},
yAxis:{
type:'value',
//是否显示y轴
show:true,
//隐藏y轴轴线
axisLine:{
show:false
},
axisTick:{
//隐藏刻度线
show:false
},
splitLine:{
//隐藏网格线
show:false
},
//刻度轴标签
axisLabel:{
textStyle:{
fontSize: 20,
color: '#F0F0F0'
}
}
},
2、设置柱体，先设置统一柱体颜色渐变
//系列列表
series:[
{
name:'test',
//类型：折线图
type:'bar',
//柱体的样式
itemStyle:{
normal:{
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color:"#0F5C7F"
},
{
offset:1,
color:"#99DFFF"
}
],false)
}
},
data: [14,16,19,22,25,30,45]
}
]
对代码稍微调整一下：
itemStyle:{
normal:{
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: function(params){
console.log(params);
return new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color:'#0F5C7F'
},
{
offset:1,
color:'#99DFFF'
}
],false);
}
}
}
通过params.dataIndex得到柱体对应的序号，从0开始，第一个柱体为0，第二个柱体为1。要实现每一个柱体渐变色不一样，可以通过二维数组。
var colorList = [
['#0F5C7F','#99DFFF'],
['#8D3510','#FFA783'],
['#651180','#D099FF'],
['#4B8D10','#83FFC0'],
['#8D104B','#FF83D8'],
['#7F610F','#FFE899'],
['#108D89','#83FFE9']
];七行二列的二维数组，每一行中右两个颜色，第一个是开始渐变时的颜色，第二个时结束渐变时的颜色。这个二维数组的每一行存储的是每个柱体的渐变颜色，一行对应一个柱体。通过params.dataIndex取二维数组colorList每个柱体的颜色，再填入echarts.graphic.LinearGradient中
var colorItem = colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color:colorItem[0]
},
{
offset:1,
color:colorItem[1]
}
],false);
全部代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>柱状图柱体颜色渐变（每个柱体不同渐变色）</title>
</head>
<style type="text/css">
*{
padding: 0;
margin:0 auto;
}
.wrapper{
width: 1100px;
height: auto;
background: #262A36FF;
}
#container{
width: 960px;
height:500px;
margin-top:5%;
/* background:red; */
}
</style>
<body>
<div class="wrapper">
<div id="container"> </div>
</div>
</body>
<script type = "text/javascript" src="./js/jquery.js"></script>
<script type = "text/javascript" src="./js/echarts.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
//实例化echarts对象
var myEcharts = echarts.init(document.getElementById("container"));
//自定义图表配置选项
var option = {
//提示框组件
tooltip:{
//触发类型：坐标轴触发
trigger:'axis',
//坐标轴指示器：指示坐标轴当前刻度的工具。
axisPointer: {
type: 'shadow',
//可指定显示哪个轴的axisPointer，这里指定x轴
axis:'x'
}
},
xAxis:{
//是否显示x轴
show:true,
//类型：类目轴
type:'category',
//坐标轴刻度设置
axisTick:{
//隐藏刻度线
show:false,
//设置刻度线与标签对齐
alignWithLabel:true
},
axisLabel:{
//x轴刻度标签字体颜色大小
textStyle:{
fontSize: 20,
color:'#F0F0F0'
}
},
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#6A7594',
//线型
type:'dashed'
}
},
data:['目标职责','制度建设','教育培训','风险管理','职业安全','应急管理','现场管理']
},
yAxis:{
type:'value',
//是否显示y轴
show:true,
//隐藏y轴轴线
axisLine:{
show:false
},
axisTick:{
//隐藏刻度线
show:false
},
splitLine:{
//隐藏网格线
show:false
},
//刻度轴标签
axisLabel:{
textStyle:{
fontSize: 20,
color: '#F0F0F0'
}
}
},
//系列列表
series:[
{
name:'test',
//类型：折线图
type:'bar',
//柱体的样式
itemStyle:{
normal:{
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: function(params){
console.log(params);
var colorList = [
['#0F5C7F','#99DFFF'],
['#8D3510','#FFA783'],
['#651180','#D099FF'],
['#4B8D10','#83FFC0'],
['#8D104B','#FF83D8'],
['#7F610F','#FFE899'],
['#108D89','#83FFE9']
];
var colorItem = colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color: colorItem[0]
},
{
offset:1,
color: colorItem[1]
}
],false);
}
}
},
data: [14,16,19,22,25,30,45]
}
]
};
//echarts对象绑定配置选项
myEcharts.setOption(option);
});
</script>
</html>