共计 928 个字符，预计需要花费 3 分钟才能阅读完成。
目标
使用 echarts 绘制简单的柱状图, 示例如下
搭建环境
新建文件夹 note01, 并新建 index.html, index.css, index.css 文件
获取 echarts 下载源代码版本, 保存为 ./note01/echarts.js
至此, note01 的目录结构应该是这样的
./note01/
|—index.html
|—index.js
|—index.css
|—echarts.js
编写 index.html
编写一个普通的 html5 文件即可, 然后引入我们的 js, css 文件
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>echarts note01</title>
<link rel=”stylesheet” href=”index.css”>
</head>
<body>
<main></main>
</body>
<script src=”echarts.js”></script>
<script src=”index.js”></script>
</html>
编写 css 文件
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
main{
width: 600px;
height: 400px;
}
编写 js 文件
我们需要通过 echarts.init(domElement) 方法初始化一个 echarts 实例, 然后通过 setOption() 方法绘图。
‘use strict’;
// 初始化 echarts 实例
var myEChart = echarts.init(document.getElementsByTagName(‘main’)[0]);
// 设定图表的配置项和数据
var option = {
title:{
text: ‘ 柱状图 ’
},
tooltip:{
},
legend:{
data:[‘ 销量 ’]
},
xAxis:{
data:[‘ 衬衫 ’, ‘ 裤子 ’, ‘ 袜子 ’]
},
yAxis:{
},
series:[{
name: ‘ 销量 ’,
type: ‘bar’,
data: [5, 36, 20]
}],
};
// 显示图表
myEChart.setOption(option);
小结
以上就是使用 echart 进行绘图的第一个例子。休息一下，马上开始下一次学习~
