基础配置:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 定义盒子存放echarts可视化数据图 -->
<div style="width: 600px;height: 400px;background: pink;"></div>
<script src="../javascript/echarts-5.5.1/package/dist/echarts.js"></script>
<script>
// 初始化获取盒子
let mCharts = echarts.init(document.querySelector('div'))
// 设置配置项
let option = {
xAxis: { //直角坐标系中的x轴
type: 'category', //类目轴
data: ['8号', '9号', '10号'] //数据
},
yAxis: { //直角坐标系中的y轴
type: 'value' //数值轴
},
series: [ //系列列表,每个系列通过type决定自己的图标类型
{
name: '成绩',
type: 'bar', //type决定图标类型
data: [80, 90, 100] //数据
}
]
}
// 调用配置项
mCharts.setOption(option)
</script>
</body>
</html>