<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts 基本使用</title>
<style>
#box {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<!-- 2.容器 -->
<div id="box"></div>
<!-- 1.引入echarts.js -->
<script src="libs/echarts.js"></script>
<script>
// 3.初始化echarts对象
function initEcharts(selector){
const box = document.querySelector(selector)
if(box) return echarts.init(box)
return
}
var mecharts = initEcharts('#box')
if(!mecharts) alert('echarts实例初始化失败！')
// 4.准备配置项
var option = {
xAxis: {
type: 'category',
data: ['小明','小红', '小王']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type:'bar',
data: [70, 92, 87]
}
]
}
//5.设置echarts对象的配置项
mecharts.setOption(option)
</script>
</body>
</html>
1.引入echarts.js
2.准备容器
3.初始化echarts对象:
使用echarts.init(selector), 返回一个echarts对象
【参考：https://echarts.apache.org/zh/api.html#echarts.init】
4.准备配置项
【参考：https://echarts.apache.org/zh/option.html#title】
5.设置echarts对象的配置项：echartsObj.setOption(optionObj)
【参考：https://echarts.apache.org/zh/api.html#echartsInstance.setOption】