<!DOCTYPE html>
<meta charset="UTF-8">
<title>机器人报警统计图</title>
<!-- 引入必要的JS库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<!-- 创建一个容器用于显示图表 -->
<div id="chartContainer" style="width: 800px; height: 600px;"></div>
<!-- 创建脚本标签,在其中编写JavaScript代码 -->
<script type="text/javascript">
// 使用ECharts绘制图表
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chartContainer'));
// 定义数据
var data = [
{name: '机器人A', value: 100},
{name: '机器人B', value: 200},
{name: '机器人C', value: 150},
{name: '机器人D', value: 300},
{name: '机器人E', value: 250}
];
// 配置图表选项和数据
var option = {
title : {
text: '机器人报警统计图',
subtext: '各机器人报警数量统计'
},
tooltip : {},
xAxis : {
type : 'category',
data : data.map(function(item) {
return item.name;
})
},
yAxis : {},
series : [{
name: '报警数量',
type:'bar',
data:data.map(function(item) {
return item.value;
})
}]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
内容由零声教学AI助手提供,问题来源于学员提问




