实现了不同的数据展示不同的柱状图,如下:
也从网上查看了渐变柱状图,如下:
但是都不是我要的柱状图,我想问一下echarts渐变色怎么样加判断?数值低于1的显示蓝色,数值大于1的显示红色?像这个样子:
这是一个柱子,超过部分显示另一个颜色,求解!
var mydata = [0.6, 1.01, 1.1, 2],
split = 1, // 超过多少显示另一种颜色
option = {
backgroundColor: “#ffffff”,
color: ["#37A2DA", “#FF9F7F”],
tooltip: {
trigger: ‘axis’,
formatter: function (res) {
return res[0].seriesName + “:” + mydata[res[0].dataIndex]
},
axisPointer: {
type: ‘shadow’
}
},
grid: {
containLabel: true
},
xAxis: [{
type: ‘category’,
data: [‘篮球’, ‘排球’, ‘足球’, ‘羽毛球’],
axisTick: {
show: true,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: ‘#132C57’
}
},
axisLabel: {
color: ‘#132C57’
}
}],
yAxis: [{
type: ‘value’
}],
series: [{
tooltip: {
show: false
},
type: ‘bar’,
stack: ‘总量’,
barWidth: ‘70%’,
data: (function () {
var _d = []
mydata.forEach(function (v, i) {
if (v > split ) {
_d.push(split)
} else {
_d.push(v)
}
})
return _d
})()
}, {
name: ‘女生’,
type: ‘bar’,
stack: ‘总量’,
barWidth: ‘70%’,
label: {
normal: {
show: true,
position: ‘top’,
color: ‘red’,
fontSize: 24,
formatter: function (res) {
return mydata[res.dataIndex]
}
}
},
data: (function () {
var _d = []
mydata.forEach(function (v, i) {
var t = v - split
if (t > 0) {
_d.push(t)
} else {
_d.push(0)
}
})
return _d
})()
}]
};