console
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Hum VS Orc', 'Hum VS Ud', 'Hum VS Ne', 'Orc VS Ud', 'Orc VS Ne', 'Ud VS Ne']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1.32.5', '1.32.6', '1.32.8', '1.32.9', '1.32.10', '1.35.0', '1.36.0', '1.36.1', '1.36.2']
},
yAxis: {
type: 'value',
name: '胜率（%）',
// axisLabel: {
// formatter: '{value} %'
// },
// 设置y轴的上下限
min: 40, // 最小值
max: 60 // 最大值
},
series: [
{
name: 'Hum VS Orc',
type: 'line',
// 为该系列设置特定的颜色
lineStyle: {
color: '#FF6347' // 橙色
},
data: [52.4, 45.1, 54.3, 47.9, 44.0, 48.0, 48.6, 50.0, 53.8, 55.2, 56.4, 57.0]
},
{
name: 'Hum VS Ud',
type: 'line',
// 为该系列设置特定的颜色
lineStyle: {
color: '#4682B4' // 橙色
},
data: [49.5, 48.2, 47.7, 46.8, 45.0, 44.0, 43.6, 45.0, 46.8, 47.5, 48.2, 49.0]
},
{
name: 'Hum VS Ne',
type: 'line',
// 为该系列设置特定的颜色
lineStyle: {
color: '#32CD32' // 橙色
},
data: [51.5, 50.2, 51.7, 50.8, 51.0, 52.0, 53.6, 55.0, 56.8, 57.5, 58.2, 59.0]
},
{
name: 'Orc VS Ud',
type: 'line',
// 为该系列设置特定的颜色
lineStyle: {
color: '#90EE90' // 橙色
},
data: [48.5, 47.2, 46.7, 45.8, 44.0, 43.0, 42.6, 44.0, 45.8, 46.5, 47.2, 48.0]
},
{
name: 'Orc VS Ne',
type: 'line',
// 为该系列设置特定的颜色
lineStyle: {
color: '#FFD700' // 橙色
},
data: [50.5, 49.2, 50.7, 49.8, 50.0, 51.0, 52.6, 54.0, 55.8, 56.5, 57.2, 58.0]
},
{
name: 'Ud VS Ne',
type: 'line',
// 为该系列设置特定的颜色
lineStyle: {
color: '#8B4513' // 橙色
},
data: [53.5, 52.2, 53.7, 52.8, 53.0, 54.0, 55.6, 57.0, 58.8, 59.5, 60.2, 61.0]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<script src="https://cdn.bootcss.com/echarts/4.8.0/echarts-en.common.js">
</script>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script type="text/javascript"></script>
</body>
</html>