(1)引入Echarts的js文件
/
/
/
/
/
(2)编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts</title>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!--准备一个容器div,放置图表-->
<!--Echarts会根据容器的大小来显示图标的大小-->
<div id="demo1" style="width: 600px;height: 400px"></div>
<!--使用javascript绘制图标-->
<script>
//初始化绘制图标的echarts实例
//参数是我们要绘制图标的位置
var myChart = echarts.init(document.querySelector("#demo1"));//我们引入的echarts.min.js会帮我们创建一个echarts对象
//指定图表的配置
var option = {
title:{//标题
text:"echarts Demo1"
},
tooltip:{},//提示框
legend:{//设置我们的标记
data:['人数']
},
xAxis:{//水平轴
data:['vue','react','angular','jquery'] //标记
},
yAxis:{},//垂直轴(我们没有写标记,意味着就会显示数字)
series:[//设置我们的数据
{
name:"人数",//注意与我们设置的标记一致
type:"bar",//设置类型为条形图
data:[2000,1500,500,2200],//设置我们的数据
}
],
}
//给我们的myChart图标实例设置他的配置
myChart.setOption(option);
</script>
</body>
</html>
/
/
/
/
/
(3)显示效果