echarts正负坐标轴柱子渐变
关键代码:
//负轴样式
var itemStyle1 = {
normal:{
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: "#266E6F" // 0% 处的颜色
},
{
offset: 1,
color: "#51E2D5" // 100% 处的颜色
}], false),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#687284',
fontSize: 9,
}
}
}
};
//正轴样式
var itemStyle2 = {
normal:{
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: "#642925" // 0% 处的颜色
},
{
offset: 1,
color: "#EA4824" // 100% 处的颜色
}], false),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#687284',
fontSize: 9,
}
}
}
}
在option中的位置
series : [
{
name:'生活费',
type:'bar',
stack: '总量',
label: {
normal: {
show: true,
formatter: '{b}'
}
},
data:[
{ value: -0.07,
label: labelleft,
itemStyle:itemStyle1
},
{
value: -0.09,
label: labelleft,
itemStyle:itemStyle1
},
{
value: 0.2,
label: labelRight,
itemStyle:itemStyle2
}
]
}
]
完整代码示例(将代码放在echarts官网示例上可直接看效果):
var labelleft = {
normal: {
position: 'left'
}
};
var labelRight = {
normal: {
position: 'right'
}
};
//负轴样式
var itemStyle1 = {
normal:{
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: "#266E6F" // 0% 处的颜色
},
{
offset: 1,
color: "#51E2D5" // 100% 处的颜色
}], false),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#687284',
fontSize: 9,
}
}
}
};
//正轴样式
var itemStyle2 = {
normal:{
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: "#642925" // 0% 处的颜色
},
{
offset: 1,
color: "#EA4824" // 100% 处的颜色
}], false),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#687284',
fontSize: 9,
}
}
}
}
option = {
title: {
text: '交错正负轴标签',
subtext: 'From ExcelHome',
// sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
show:false,
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: 80,
bottom: 30
},
xAxis: {
type : 'value',
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
position: 'left',
// splitLine: {lineStyle:{type:'dashed'}},
},
yAxis: {
type : 'category',
show:true,
position: 'left',
axisLine: {show: true},
axisLabel: {show: true},
axisTick: {show: false},
splitLine: {show: false},
data : ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
},
series : [
{
name:'生活费',
type:'bar',
stack: '总量',
label: {
normal: {
show: true,
formatter: '{b}'
}
},
data:[
{ value: -0.07,
label: labelleft,
itemStyle:itemStyle1
},
{
value: -0.09,
label: labelleft,
itemStyle:itemStyle1
},
{
value: 0.2,
label: labelRight,
itemStyle:itemStyle2
},{
value: 0.44,
label: labelRight,
itemStyle:itemStyle2
} ,{
value: -0.23,
label: labelleft,
itemStyle:itemStyle1
},{
value: 0.08,
label: labelRight,
itemStyle:itemStyle2
},{
value: -0.17,
label: labelleft,
itemStyle:itemStyle1
},{
value: 0.47,
label: labelRight,
itemStyle:itemStyle2
},{
value: -0.36,
label: labelleft,
itemStyle:itemStyle1
},{
value: 0.18,
label: labelRight,
itemStyle:itemStyle2
}
]
}
]
};