开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
掘金的第一篇文章,欢迎大家指导写作,本人也会在发表文章前多次检查尽量减少错误。
个人认为对于编程来说知识的广度有时比知识的深度更重要,当我们需要完成一个项目时,选择一个好的工具或者开源项目可以使我们事半功倍。就画图表而言,使用ECharts来实现会节省非常多的时间精力。
ECharts介绍
ECharts官网首页给了自己一个简单明了的介绍,一个基于 JavaScript 的开源可视化图表库。它主要有如下优点
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】
ECharts快速上手
ECharts官网有详细的教程 5 分钟上手 ECharts
这里简单来介绍,总共可以分为三个部分
- 获取 ECharts
- 引入 ECharts
- 绘制图表
获取ECharts,就是官网下载源码就好,需要注意的是要在dist目录下找到我们需要的js文件。
基础的引入ECharts方法有以下两种
绘制图表操作主要有如几步
- 为 ECharts 准备一个DOM 容器(div标签即可)。
- 通过 echarts.init 方法以DOM 容器为参数初始化一个 echarts 实例(可以通过id获取DOM元素,vue中推荐使用ref)
- 编写option指定图表的配置项和数据
- 通过 setOption 方法使用指定的配置项和数据显示图表,生成一个简单的柱状图
下面是官网的示例代码
下面是上述代码的运行结果展示