今天在面试的时候面试官问到了有没有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
