江苏龙网

  1. 首页 > 人文 > >

带你入门前端图表插件ECharts

前言在前端项目开发中 ， 有很多地方会遇到绘制图表的需求 ， 一般的图表可以通过canvas来绘制 ， 但是遇到复杂一点的图表怎么办呢？不要慌 ， 在下今天就给大家推荐一个前端大佬们用的非常火的图表插件——ECharts 。
ECharts特性简介ECharts是一个使用 JavaScript 实现的开源可视化库， 啥叫开源呢 ， 通俗点说 ， 就是免费！不要钱！小伙伴们可以大胆放心的使用 ， 可视化工具呢 ， 就是将一系列的数据 ， 转化成非常直观的图表 ， 来供大家查看 ， ECharts可谓是制作图表的良心之选 ， 并且可以流畅的运行在 PC 和移动设备上 ， 兼容当前绝大部分浏览器（IE8/9/10/11 ， Chrome ， Firefox ， Safari等） ， 所以 ， 基本完全不用担心兼容性的问题 ， 底层依赖轻量级的矢量图形库 ZRender ， 提供直观 ， 交互丰富 ， 可高度个性化定制的数据可视化图表 。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图 ， 用于统计的盒形图 ， 用于地理数据可视化的地图、热力图、线图 ， 用于关系数据可视化的关系图、treemap、旭日图 ， 多维数据可视化的平行坐标 ， 还有用于 BI 的漏斗图 ， 仪表盘 ， 并且支持图与图之间的混搭 。
具体的还有的优点 ， 我就不一一介绍了 ， 需要用到更多功能的小伙伴呢 ， 可以去ECharts官网查找更多的特性（） 。
ECharts的下载在使用ECharts之前呢 ， 我们需要先去官网下载最新版本的ECharts的依赖包（） ， 在这呢 ， 我推荐大家下载源代码 ， 因为你源代码里面包含了所有图表组件以及常见的警告和错误 。 如果你觉得源代码文件太大 ， 而且项目中用到的图表功能很简单的话呢 ， 那就使用精简版的好啦 。
带你入门前端图表插件ECharts文章插图
ECharts在普通项目中的使用下面呢 ， 重点来啦 ， 大家准备好编译器哈 ， 准备和小编一起完成图表代码的实现啊！
首先呢 ， 给大家讲一下ECharts图表在普通项目中的使用 ， 后面还会讲到如何在vue项目里面使用 ， 其他的开源框架里面如何使用我就不一一讲解了哈 。
第一步老规矩 ， 首先将下载好的ECharts.js放在项目的js文件夹下面 ， 之后呢 ， 在需要用到的页面 ， 引入,然后就可以开始写代码啦
第二步准备好一个dom元素 ， 当然啦 ， 需要给该dom元素一个id ， 方便我们去找到它 ， 而且 ， 还要给这个元素一个宽高 ， 作为表格的视口 ， 至于宽高给多少呢 ， 各位大佬们高兴就好.
第三步开始写js代码啦,js代码有三个步骤：
FIRST初始化ECharts实例：
var myChart = ECharts.init(document.getElementById('main'));SECOND指定图表的配置项和数据：
var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};THIRD使用刚指定的配置项和数据显示图表：
myChart.setOption(option);这样子就OK啦 ， 在浏览器打开你的代码吧 ， 我们就得到了一个带动画效果的柱状图哦
带你入门前端图表插件ECharts文章插图
当然 ， 不只是只有柱状图 ， 还有各种其他的图表 ， 怎么使用呢 ， 首先点击实例 ， 我们就来到了这个页面
带你入门前端图表插件ECharts文章插图
【带你入门前端图表插件ECharts】看上哪个图表了吗？不要犹豫啦 ， 点击进去 ， 我们就来到了如下页面


推荐阅读


上一篇：iPhone12致敬锤子手机引罗永浩神评，网友：马化腾坐不住

下一篇：关于List集合，这份总结很全面