效果图
代码
setOptions(chartData = []) {
const label = []
const data = []
\
chartData.map(el => {
label.push(el.key)
data.push(el.value)
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
// formatter: '{b}：' + '{c0}' + ''
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
height: '80%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: label,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [{ name: `GB`, type: 'value' }],
series: [
{
name: '存储情况',
type: 'bar',
barWidth: '50%',
data: data.map(item => {
// console.log(item, 'item')
return {
value: item,
label: {
show: true,
fontSize: 12,
position: 'top',
distance: 10,
color: '#666',
padding: [4, 4],
formatter: '{c}'
},
itemStyle: {
normal: {
barBorderRadius: item > 0 ? [8, 8, 0, 0] : [0, 0, 8, 8], // 动态设置柱状图圆角
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5B8FF9'
},
{
offset: 1,
color: '#5B8FF9'
}
]),
label: {
show: true,
position: 'top',
formatter: (el) => {
return el.value
}
},
itemStyle: {
color: '#5B8FF9'
// color: (data) => {
// if (data.data > 90 && data.data < 99) {
// return "rgba(255, 121, 70, 0.85)";
// } else if (data.data >= 99) {
// return "red";
// } else {
// return "rgba(106, 165, 244, 0.85)";
// }
// },
// borderRadius: [8, 8, 0, 0]
}
}
}
}
})
\
}]
})
}
