ECharts初体验之使用五部曲
- 1. 下载并引入echarts.js
- 2. 准备一个具备大小的DOM容器
- VScode取色器插件下载
- 3. 初始化echarts实例对象
- 4. 指定图表的配置项和数据(option)
- 5. 把配置项设置给echarts对象
- 完整代码
1. 下载并引入echarts.js
打开ECharts官网,点击文档、教程,进入五分钟上手ECharts界面,选择从官网下载界面下载:
进入后翻到最下面,我使用的是方法三在线定制,点它。
选择好自己需要的突变和组件进行打包下载,点击下载即可,我没有压缩代码,下载的是echarts.js,如果压缩了的话,下载的会是echarts.min.js。
下载完毕,引入:
1 2 3 | <!-- index.html --> <!-- 1. 下载并引入echarts.js文件 --> <script src="script/echarts.js"></script> |
2. 准备一个具备大小的DOM容器
1 2 3 | <!-- index.html --> <!-- 2. 准备一个具备大小的DOM容器 --> <div class="box"></div> |
有容器了,但一定记得要给它大小。
1 2 3 4 5 6 | /* style.css */ .box{ width: 600px; height: 600px; background-color: #7bb0ca; } |
VScode取色器插件下载
为了更方便选择颜色,没有取色器也太不方便了。
- 按Ctrl+Shift+X打开Extension插件面板
- 键入vs color picker
- 下载,点击install
下载好后,文档里说了如何使用:
这两步之后准备工作就做完了:
3. 初始化echarts实例对象
1 2 3 4 | // script.js // 3. 初始化echarts实例对象,利用echarts.init(DOM容器) var myCharts = echarts.init(document.querySelector(".box")) |
4. 指定图表的配置项和数据(option)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // script.js // 4. 指定图表的配置项和数据(option) var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; |
5. 把配置项设置给echarts对象
1 2 3 4 | // script.js // 5. 把配置项设置给echarts对象 myCharts.setOption(option); |
这样就好了~
完整代码
- index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyECharts</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <!-- 2. 准备一个具备大小的DOM容器 --> <div class="box"></div> <!-- 1. 下载并引入echarts.js文件 --> <script src="script/echarts.js"></script> <script src="script/script.js"></script> </body> </html> |
- style.css
1 2 3 4 5 | .box{ width: 600px; height: 600px; background-color: #7bb0ca; } |
- script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // 3. 初始化echarts实例对象,利用echarts.init(DOM容器) var myCharts = echarts.init(document.querySelector(".box")) // 4. 指定图表的配置项和数据(option) var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 5. 把配置项设置给echarts对象 myCharts.setOption(option); |