var myChart = echarts.init(document.getElementById('weixiu'));
var cost = [0.42, 0.53, 0.62, 0.83, 0.96]//柱状图长度
var dataCost = [420,760,810,760,810]//
var totalCost = [1, 1, 1, 1, 1]//
var visits = [420, 530, 602, 853, 963]//数据
var grade = ['AP', '低压配电室', '风机', '空调', '摄像头']
var colorList = [
['#BC3535','#FF5B79'],
['#8D3510','#FFA783'],
['#651180','#D099FF'],
['#00CCFF','#2953B4'],
['#8D104B','#FF83D8'],
['#7F610F','#FFE899'],
['#00CCFF','#2953B4']
];
var data = {
title: "设备",
grade: grade,
cost: cost,
totalCost: totalCost,
visits: visits,
dataCost:dataCost,
colorlist1:colorlist1
};
var option = {
// backgroundColor: '#05274C',
/* title: {
top: '5%',
left: 'center',
text: data.title + '维修次数统计',
textStyle: {
align: 'center',
color: '#4DCEF8',
fontSize: 18
}
}, */
grid: {
left: '240',
right: '100'
},
xAxis: {
show: false,
},
yAxis: {
type: 'category',
axisLabel: {
margin: 100,
show: true,
color: '#4DCEF8',
fontSize: 14
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.grade
},
series: [{
type: 'bar',
barGap: '-98%',
barWidth: '25%',
label: {
normal: {
show: true,
position: 'right',
color: '#fff',
fontSize: 14,
formatter:
function(param) {
return data.visits[param.dataIndex] ;
},
}
},
itemStyle: {
normal: {
barBorderRadius: 16,
color: function(params){
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);
}
},
},
max: 1,
labelLine: {
show: true,
},
z: 2,
data: data.cost,
}]
}
myChart.setOption(option);
echarts图柱状图颜色渐变样式
最新推荐文章于 2025-05-14 18:00:00 发布