今天在面试的时候面试官问到了有没有Echarts的开发经验,后来了解到面试官所在的部门主要就是负责数据可视化平台的搭建,以Echart和HighCharts为基础。
虽然Echarts诞生的时间已经挺久了,但是随着最近数据分析等岗位越来越热门,很多公司将数据可视化平台的搭建提上日程。
今天我们就随着Echart的文档先跑个Demo,顺便避一下坑。
引入Echarts
首先Echarts的官方文档是https://echarts.apache.org/zh/index.html。
Echarts作为第三方库,我们首先要先获取这个库的资源文件,官方提供了很多的办法。
- 从 Apache ECharts 官网下载界面 获取官方源码包后构建。
- 在Echarts的 GitHub 获取。
- 通过 npm 获取 echarts,
npm install echarts --save
。 - 通过 jsDelivr 等CDN引入
构建项目
这里我使用的是第三种,通过npm获取。
在终端输入指令:
npm init -y
npm install echarts --save
然后新建一个index.html
,一个index.js
。
做好准备工作后,我们就着手写一个最简单的折线图的Demo。
进行编码
index.html
内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
index.js
代码如下:
import * as echarts from 'echarts';
var charDom = document.getElementById('main');
var myChart = echarts.init(charDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150,230,224,218,135,147,260],
type: 'line'
}]
}
option && myChart.setOption(option);
代码解析
稍微解析一下代码。
html
部分,我们就单纯的声明了一个div
在承载一会儿生成的Echarts
图表。
因为引入的script
文件中有使用ESModule
的语法,所以script
的type
属性一定要设置成module
。
js
部分的话,官方的文档都有给示例,简单解析一下就是,先通过import
引入echarts
的模块,然后拿到我们要搭载Echarts
图片的那个DOM
节点,通过提供的init
方法进行初始化,然后就是对数据的声明,option
是一个包含要渲染图表中数据的对象,目前是跑Demo
,所以暂时写成为静态的数据即可。然后根据提供的setOption
方法对其进行挂载。
我们似乎也没有做太多的工作,只是基于Echarts
提供的轮子并按照其规则来进行编码即可。
Echarts
为我们提供了大量的Demo
,使用的方法都大同小异,基于官方给的示例代码进行修改即可,这几乎就可以满足我们日常开发中的所有工作了。
运行程序 + 踩坑提示
说了这么多,我们先跑一下页面吧,看看会不会有意想不到的坑存在。
果然
页面上没有任何显示,而且通过控制台可以发现报错了。通过报错信息的提示和百度查询可知,它跨域了!因为我只是在本地跑的一个Demo,没有搭载任何服务支持。
解决问题 + 运行程序
那我们就创建一个服务,应用一下现在最流行的vite
来构建,因为我们之前已经通过npm init -y
进行过初始化,所以我们现在只需要yarn add vite -d
即可。
然后我们需要改一下package.json
中的scripts
属性
这样我们就可以通过npm run dev
来运行我们的服务了。
ok,我们通过访问http://localhost:3000
,成功跑起来这个Demo
。
QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:http://rayblog.ltd