效果图
var chartDom = document.getElementById('contenterZF');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['符合', '限期整改', '停止经营'],
axisLine: {
lineStyle: {
type: 'solid',//x轴线条类型
color: '#708ACC',//x轴线条颜色
width: '1'//x轴线条宽度
}
},
axisLabel: {
textStyle: {
color: '#708ACC'//x轴文本颜色
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
type: 'solid',//y轴线条类型
color: '#708ACC',//y轴线条颜色
width: '1'//y轴线条宽度
}
},
axisLabel: {
interval: 1,
textStyle: {
color: '#708ACC'//y轴文本颜色
}
}
},
grid: {
height: 100,//内容区高度
top: 10//图标距离左边的位置
},
series: [{
data: [data.fh, data.xqzg, data.tzjy],
type: 'bar',
barWidth: 44,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#0EFCFF',
fontSize: 12
}
},
//这里是重点
color: function (params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
//var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
//return colorList[params.dataIndex]
var colorList = [
['#29F19C', '#02A1F9'],
['#FC9501', '#FED701'],
['#FE411B', '#FE9B1A'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: colorList[index][0] },
{ offset: 1, color: colorList[index][1] }
]);
}
}
}
}]
数据格式
{"fh":16,"xqzg":1,"tzjy":0}