今天在面試的時候面試官問到了有沒有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
來運作我們的服務了。