echarts.js文件下载地址:Apache ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小(宽高)的DOM--->
<div id="main" style="width: 900px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM,初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ['red','green'],
title: { x:33, text: '男性与女性身高、体重分布', subtext: '抽样调查来自:FLQ 2020'},
legend: { data: ['女性','男性']}, //配置图例组件
toolbox: { //配置工具箱组件
x: 600, show: true,
feature: {
mark: { show: true },
dataZoom: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value}cm' } } ],
yAxis: [{ type: 'value', scala: true, axisLabel: { formatter: '{value}kg' } } ],
series: [ //配置数据系列
{ //设置女性数据
name: '女性', type: 'scatter', symbolSize: 8,
data: [[161.2,51.6],[167.5,59.0],[159.5,49.2],[157,63.0],[155.8,53.6],
[173.0,59.0],[159.1,47.6],[156.0,69.8],[166.2,66.8],[160.2,75.2],
[167.6,61.0],[160.7,69.1],[163.2,55.9],[152.0,46.5],[157.5,54.3],
[156.0,52.7],[160.0,74.3],[163.0,62.0],[165.7,73.1],[161.0,80.0]],
markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]},
markLine: { data: [{ type: 'average', name: '平均值'}]}
},
{ //设置男性数据
name: '男性', type: 'scatter', symbolSize: 8,
data: [[174.0,65.6],[175.3,71.8],[163.5,80.0],[186.5,72.6],[187.2,78.8],
[167.0,64.6],[177.8,74.8],[164.5,70.0],[182.0,101.5],[165.5,63.2],
[171.2,79.1],[181.6,78.9],[167.4,67.7],[181.1,66.0],[177.0,68.2],
[161.5,74.8],[164.0,86.4],[164.5,78.4],[175.0,62.0],[164.0,81.6]],
markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]},
markLine: { data: [{ type: 'average', name: '平均值' }]}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>