配置项如下
var ck = [220, 182, 191, 134];//常考
var cck = [122, 165, 122, 220];//次常考
var bck = [120, 110, 165, 122];//不常考
//以上是数据
//格式化数据
var data1 = function () {
return ck;
};
var data2 = function () {
var madata2 = [];
var l = ck.length + cck.length;
for (var i = 0; i < l; i++) {
if (i < ck.length) {
if (i == ck.length - 1) {
madata2[i] = ck[i];
} else {
madata2[i] = '';
}
} else {
madata2[i] = cck[i - ck.length];
}
}
return madata2
}
var data3 = function () {
var madata3 = [];
var l = ck.length + cck.length + bck.length;
for (var i = 0; i < l; i++) {
if (i < (ck.length + cck.length)) {
if (i == (ck.length + cck.length - 1)) {
madata3[i] = cck[cck.length - 1];
} else {
madata3[i] = '';
}
} else {
madata3[i] = bck[i - ck.length - cck.length];
}
}
return madata3;
}
option = {
backgroundColor: '#fff',
title: {
text: '测试概率谱',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#333'
},
left: 'center',
bottom: '25'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
formatter: "{b}<br/>测试概率 {c}"
},
grid: {
left: '5%',
right: '10%',
bottom: '30%',
top:'15%',
containLabel: true
},
xAxis: [{
name: '知识点',
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
nameTextStyle: {
color: '#999'
},
axisLabel: {
color: '#999',
show: false
},
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']
}],
yAxis: [{
type: 'value',
name: '测试概率',
axisLine: {
lineStyle: {
color: '#ccc'
}
},
nameTextStyle: {
color: '#999'
},
splitLine: {
lineStyle: {
color: '#ebebeb'
}
},
axisLabel: {
color: '#999'
},
}],
series: [{
name: '常考',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 153, 153, 0.8)'
}, {
offset: 0.8,
color: 'rgba(255, 153, 153, 0)'
}], false),
shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(255,102,127)',
borderColor: 'rgba(255,102,127,0.3)',
borderWidth: 12
}
},
data: data1()
}, {
name: '次常考',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(123, 212, 116, 0.8)'
}, {
offset: 0.8,
color: 'rgba(123, 212, 116, 0)'
}], false),
shadowColor: 'rgba(255,255, 255, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(63, 204, 116)',
borderColor: 'rgba(63, 204, 116, 0.3)',
borderWidth: 12
}
},
data: data2()
}, {
name: '不常考',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 204, 138, 0.8)'
}, {
offset: 0.8,
color: 'rgba(255, 204, 138, 0)'
}], false),
shadowColor: 'rgba(255, 255, 255, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(253, 149, 0)',
borderColor: 'rgba(253,149,0,0.3)',
borderWidth: 12
}
},
data: data3()
}, ]
};