目标
使用 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);
小结
以上就是使用 ECharts
进行绘图的第一个例子。休息一下,马上开始下一次学习~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。