1、html
<div id="main" style="width:98%; height: 255px;"></div>
2、JS代码
//生产节拍
function GetChart5() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var todayMonth = new Date().getDate();
$.ajax({
url: "/Home/getData5",
contentType: "application/json; charset=utf-8",
type: "get",
dataType: "json",
data: {
// queryJson: []
},
success: function (data) {
var xList = new Array();
var ylist = new Array();
for (var i = 0; i < data.length; i++) {
xList[i] = data[i].StationCode;
ylist[i] = data[i].Qty;
}
option = {
title: {
text: '生产节拍'
},
dataset: {
source: data
},
legend: {
data: ylist,
type: 'scroll'
},
toolbox: {
show: true,
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
xAxis: { type: 'category', data: xList },
yAxis: {},
itemStyle: {
borderWidth: 10
},
label: {
//显示数字标签,以及标签的位置
show: true,
position: 'top',
},
series: {
type: 'bar',
data: ylist,
itemStyle: {
normal: {
color: function (params) {
//定义一组颜色,可以自己添加新的颜色
var colorList = ['#E87C25', '#27727B', '#C1232B', '#D7504B', '#C6E579', '#F4E001', '#F0805A',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#B5C334', '#FCCE10', '#26C0C0'
];
return colorList[params.dataIndex]
}
}
}
}
};
option && myChart.setOption(option);
}
});
}
柱状图需要设置不同颜色,需要在series中设置
itemStyle: {
normal: {
color: function (params) {
//首先定义一个数组
var colorList = ['#E87C25', '#27727B', '#C1232B', '#D7504B', '#C6E579', '#F4E001', '#F0805A',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#B5C334', '#FCCE10', '#26C0C0'
];
return colorList[params.dataIndex]
}
}
最终结果