小程序
小游戏
企业微信
微信支付
扫描小程序码分享
实现了不同的数据展示不同的柱状图,如下:
也从网上查看了渐变柱状图,如下:
但是都不是我要的柱状图,我想问一下echarts渐变色怎么样加判断?数值低于1的显示蓝色,数值大于1的显示红色?像这个样子:这是一个柱子,超过部分显示另一个颜色,求解!
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
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: {
}],
yAxis: [{
type: 'value'
series: [{
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: '女生',
label: {
normal: {
position: 'top',
color: 'red',
fontSize: 24,
return mydata[res.dataIndex]
var t = v - split
if (t > 0) {
_d.push(t)
_d.push(0)
}]
};
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
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
})()
}]
};