option = {
backgroundColor:"#ffffff",
tooltip: {
trigger:"axis",
formatter:"{a1}<br/>{b1}：{c1}%"
},
legend: {
data: [{name:'poise \ndifficulty rate:-186',textStyle: {color:"#bf74a1"}},{name:'havoc \ndifficulty rate:287',textStyle: {color:"#85bed9"}}],
orient: 'vertical',
top:"85px",
left: '12%',
borderWidth:2,
textStyle: {
fontSize: '25px',
fontWeight: 700
},
}, grid: {
show:true,
left:100,
bottom:100,
borderColor: "black",
borderWidth:3
},
xAxis: {
splitLine:{
show:false //去掉网格线
},
type:"value",
name: 'times of tring',
nameGap: 30, // y轴name与横纵坐标轴线的间距
nameLocation: "middle", // y轴name处于y轴的什么位置
"nameTextStyle":{
"fontSize":25,
"fontWeight":700
} ,
max:7.41,
axisLabel:{
show:true,
interval:0,
fontSize:"15px",
formatter: (value) => {
// 1小时=3600秒
if(value==1){
return `${value}try`;
}else if(value!=7.41) return `${value}tries`;
},
}
},
yAxis: {
splitLine:{
show:false //去掉网格线
},
name: 'percentages of socre',
nameGap: 80, // y轴name与横纵坐标轴线的间距
nameLocation: "middle", // y轴name处于y轴的什么位置
"nameTextStyle":{
"fontSize":25
} ,
axisLabel:{
formatter:"{value}%",
fontSize:"15px"
}
},
series: [
{
name: "havoc \ndifficulty rate:287",
type: "bar",
barWidth:"30px",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [[1,0],[2,2],[3,8],[4,16],[5,26],[6,33],[7,14]
],
markLine: {
symbol: "none",//去掉警戒线最后面的箭头
label: {position: "end"},//将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
data: [
{
name: 'x1',
xAxis:5.18,
silent: true,
//鼠标悬停事件 true没有，false有
lineStyle: { //警戒线的样式 ，虚实 颜色
type: "solid",
color: "#85bed9",
width:3,
},
label: {
show: true,
textStyle:{
fontSize:"25px",
color:"#85bed9",
}
},
},
{
name: 'x2',
xAxis:3.72,
silent: true,
textStyle:{
fontSize:"25px",
color:"#bf74a1",
} , //鼠标悬停事件 true没有，false有
lineStyle: { //警戒线的样式 ，虚实 颜色
type: "solid",
color: "#bf74a1",
width:3,
},
label: {
show: true,
textStyle:{
fontSize:"25px",
color:"#bf74a1",
}
},
},
]
},
color:"#85bed9"
},
{
name: "poise \ndifficulty rate:-186",
type: "bar",
barWidth:"30px",
emphasis: {
focus: "series",
},
data: [[1,2],[2,11],[3,34],[4,32],[5,15],[6,6],[7,1]],
color:"#bf74a1",
markLine: {
symbol: "none",//去掉警戒线最后面的箭头
label: {position: "end"},//将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
},
color:"#bf74a1"
},
],
};