使用js echarts 绘制一个频率分布图
以下是一个使用js echarts绘制频率分布图的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts Frequency Distribution Chart</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
</head>
<body>
<!-- 绘制图表的容器 -->
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 频率分布数据
var data = [
{score: '0-10', freq: 25},
{score: '10-20', freq: 30},
{score: '20-30', freq: 45},
{score: '30-40', freq: 60},
{score: '40-50', freq: 55},
{score: '50-60', freq: 40},
{score: '60-70', freq: 30},
{score: '70-80', freq: 20},
{score: '80-90', freq: 10},
{score: '90-100', freq: 5}
];
// x轴数据，即 分数区间
var xAxisData = data.map(item => item.score);
// y轴数据，即 频数
var yAxisData = data.map(item => item.freq);
// 指定图表的配置项和数据
var option = {
title: {
text: 'Frequency Distribution Chart',
left: 'center'
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
axisLabel: {
show: true,
interval: 0,
rotate: -30,
textStyle: {
fontSize: 10
}
}
},
yAxis: {},
series: [{
name: 'Frequency',
type: 'bar',
data: yAxisData,
itemStyle: {
normal: {
color: '#1E90FF'
}
},
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
在这个示例中，我们使用echarts绘制了一个频率分布图。首先，我们定义了一个包含分数区间和频数的数据数组。然后，我们使用map函数将分数区间和频数分别提取到两个数组中。接着，我们定义了一个echarts实例，并使用setOption方法将我们定义的图表配置应用到图表中。最后，我们在页面中添加了一个div元素，作为图表的容器，并在页面底部引入了echarts.js文件。
原文地址: https://www.cveoy.top/t/topic/b5Y8 著作权归作者所有。请勿转载和采集!