代码语言：javascript复制
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象第一步
网上下载echarts的js文件，因为我们要用人家的东西，所以要下载人家的东西，最后根据人家的规范进行写代码。
以上的这个就是我下载的js文件。
第二步
创建一个html文件，里面将这个echarts的js文件导入
代码语言：javascript复制 <!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>第三步
创建一个div，也就是最后 的图形要放到哪里，我们就自己创建一个div，之后的图形我们就创建到这个div里面
代码语言：javascript复制 <!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px"></div>第四步
如何告诉echarts，我们创建的图形要放到这个div里面，这个时候就要创建echarts的对象，利用这个对象将div和图形关联起来。
因为我们要用echarts 的东西，所以我们要创建人间的对象，现在就是要创建echarts的对象
因为是js代码，所以要放到script里面
代码语言：javascript复制 // 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));以上代码的意思就是我创建了echarts的对象，并且这个对象和div这个区域已经绑定了，以后用echarts创建的图形，就会放到这个div里面。
第五步
我们要创建什么图形呢？这个时候就需要配置项了，在这个配置项里面进行配置写代码，也就是用代码画图，写出我们需要展示的什么图形。
代码语言：javascript复制 // 步骤4：准备配置项
var option = { //这个是创建一个配置对象，里面的参数就是我们要画的图形
xAxis: { //这个是设置x轴
type: 'category',
data: ['小明', '小红', '小王'] //设置X轴的值
},
yAxis: { //这个是设置Y轴
type: 'value'
},
series: [
{
name: '语文',
type: 'bar', //设置我们要画的图形，这个是柱状图
data: [70, 92, 87] //设置Y轴的值
}
]
}第六步
已经用代码画出东西了，也就是完成了配置项，那么如何将这个图形放到div里面了？
之后已经创建了echarts的对象，并且这个对象和div关联，所以我们使用这个对象就可以将配置放到div里面了
代码语言：javascript复制 // 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)完整代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));
// 步骤4：准备配置项
var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小王']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 92, 87]
}
]
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>最后展示的图形就是
