Echarts快速上手
五个步骤
1.引入echarts.js文件
2.准备一个呈现图表的盒子
3.初始化echarts实例对象
4.准备配置项
5.将配置项设置给echarts实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 600px;
height: 400px;
}
</style>
<!-- 引入echarts文件 -->
<script src="lib/echarts.min.js"></script>
<script>
//创建echarts的实例化对象
//参数,dom,决定图标呈现的位置
window.onload = function () {
let mCharts = echarts.init(document.querySelector('div'));
//准备配置项
var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小兰']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 69, 92]
}
]
}
//将配置项设置给echarts实例对象
mCharts.setOption(option)
}
</script>
</head>
<body>
<!-- 呈现视图盒子 -->
<div class="box1"> </div>
</body>
</html>
通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的.