今天开发项目的时候,有个需求是显示一个柱状统计图,要求是:不同的区间段的值显示不同的颜色。
比如:0-59分 --> 不及格; 60-79分 --> 及格; 80-89分 --> 好样; 90-100分 --> 棒呆。
下面写一个简单的Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嘿嘿嘿~请叫我丘耳</title>
<script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1553896255267"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'XX班级各科平均分'
},
tooltip: {},
legend: {},
xAxis: {
'axisLabel':{'interval':0},
data: ["语文","数学","英语","物理","化学","生物","地理","历史","政治","体育"]
},
yAxis: {},
visualMap: {
top: 24,
x: 'center',
orient: 'horizontal',
textStyle: {
color: '#000'
},
pieces: [
// min-不包含, max-包含
{min: 0, max: 59, label: '不及格', color: '#C1232B'},
{min: 59, max: 69, label: '及格', color: '#FE8463'},
{min: 69, max: 89, label: '好样', color: '#FCCE10'},
{min: 89, max: 100, label: '棒呆', color: '#B5C334'},
],
outOfRange: {
color: '#999'
}
},
series: [{
type: 'bar',
data: [60, 98, 75, 55, 86, 54, 61, 70, 34, 87],
itemStyle: {
normal: {
color: function(params){
if(params.data < 60){
return '#C1232B';
}else if(params.data>=60 && params.data<70){
return '#FE8463';
}else if(params.data>=70 && params.data<90){
return '#FCCE10';
}else if(params.data>=90 && params.data<=100){
return '#B5C334';
}
}
}
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
效果图如下:
嘿嘿嘿~完成啦...欢迎指教~