前言
各位同事大家好！下面是我使用echarts中總結的一些個人經驗，僅供參考。
echarts的能力、優(yōu)劣等特點大家應該在技術選型階段已經有所了解，這里主要分享使用、設計等經驗。
一、最簡單的步驟概述
echarts由無到有一共只需要四步：
- 引入echarts資源：支持模塊化項目使用npm下載引入，老項目使用script方式鏈接引入，只是試用、演示且互聯網環(huán)境，可以使用cdn方式引入。
- 創(chuàng)建一個div容器：echarts圖表在頁面中顯示，需要有一個容器來盛放，告訴瀏覽器應該在哪渲染，注意這個容器一定是有寬、高的dom元素，否則有可能圖表渲染成功，但是高度為0，導致無法顯示。
- 初始化一個echarts實例：echarts所有的屬性、方法都封裝在我們引入的資源里，這個初始化的實例，就是一個帶著所有屬性和方法的對象，方便我們通過這個對象直接調用echarts提供的所有屬性和方法。
- 設置echarts參數：獲得echarts實例后，我們就能為它設置各種參數，來實現各種圖表樣式。
二、最簡單的demo
引入官網的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!--第一步：引入echarts資源-->
<script src="echarts.js"></script>
</head>
<body>
<!--第二步：創(chuàng)建定義了寬高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 第三步：初始化實例，并告訴實例應該渲染到哪個DOM
var myChart = echarts.init(document.getElementById('main'));
//第四步：指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
三、工作流程
大屏開發(fā)工作一般要經歷以下幾個主要流程節(jié)點：
用戶需求 -> 大屏設計 -> 美工優(yōu)化-> 前端開發(fā) -> 后端接口提供。
單純的前端開發(fā)，主要對接人員是美工與后端，并在大屏設計節(jié)點，提供技術難度、可行性等參數。
3.1 與美工合作
美工主要負責大屏頁面設計與交互設計等工作，輸出為設計稿文件，前端開發(fā)依稿開發(fā)。這里要注意的是美工提供的動畫設計，實現方案可選以下幾種：
- 簡單動畫效果，使用純CSS實現。例如：幾何變化、大小變化、顏色變化、透明度變化等。
- 復雜動畫效果，推薦使用lottie動畫插件。由美工設計實現動畫，輸出動畫json文件，前端負責渲染、控制動畫。
- 另一種動畫插件補充——svga：其實就是svg+animation，只不過不需要前端手動寫svg動畫，而是由美工生成svga文件，前端負責渲染svga文件。與lottie相比各有優(yōu)劣。
- 復雜動畫手動實現，推薦gsap插件。由flash動畫插件原班人馬開發(fā)，可以理解為flash的js實現。除了開發(fā)成本高，學習成本高，其它都是優(yōu)點。
各位同事大部分是經驗豐富的前輩，應該比我更清楚，項目中，能力最強大的插件，不一定是最適合的。所以對于要求一般的場景，止步于lottie動畫即可。
3.2 與后端合作
數據化大屏與后端的交互主要是數據的交互。
樣式+渲染+數據，即是大屏。樣式由美工負責，數據由后端負責，渲染由前端負責。
echarts需要使用的數據格式，更多的是一維、二維的純數組（并不是json數組）。而后端提供的，大多為json數組。這里就會產生一個問題，究竟應該由后端生成最終數據，前端負責拿過來做頁面渲染的工作，還是應該由前端負責處理數據，得到自己需要的格式。
我這里建議由前端負責處理數據，理由如下：
- 這部分工作量不管放到前后端，對于團隊而言，工作量是不變的，不存在放在哪端更方便的問題。
- 由后端處理數據，最終前端得到的數據是沒有任何描述的數組，不利于前端閱讀與后期優(yōu)化維護。
- 同一接口的數據，可能會被使用到不同的echarts圖表中，需要處理成不同格式的數組。由前端處理，利于一次請求，渲染成不同維度、不同場景的圖表。
- 當數據處理產生分歧，應該遵守一個原則，那就是最大限度保持數據在描述對象原型時的完整性，增強可讀性，以便于后期維護與優(yōu)化。
3.3 前端具體在做什么
前面講過，渲染echarts只需要四步，其實我們的主要工作連四步也沒有，拋開機械化的工作內容，我們主要就是在做三件事：
- 通過設置options，設置echarts的樣式。
- 在復雜圖標中，處理后端數據得到echarts規(guī)定的數據格式，然后設置options中的data屬性，渲染數據。
- 通過調用echarts實例提供的api，增強交互能力。
得益于echarts的強大，大部分常用的交互，例如動畫、圖例選擇等，并不需要調用api，都可以通過設置options實現。所以我們大部分場景下，都只需要做前兩件事，就能實現一個不錯的圖表。
總結
第一天開發(fā)，你需要知道四步完成一個報表。
第二天開發(fā)，你只需要去寫一些循環(huán)和判斷，處理后端提供的數據，然后到官網查詢更多的options參數。
echarts官網使用頻率最高頁面：文章來源：http://www.zghlxwxcb.cn/news/detail-428058.html
- options配置項頁面：https://echarts.apache.org/zh/option.html#title
- 基礎的示例頁面：https://echarts.apache.org/examples/zh/index.html，雖然基礎，但是你能通過它們排列組合，支撐百分之九十九的場景。
無聊時可瀏覽頁面：文章來源地址http://www.zghlxwxcb.cn/news/detail-428058.html
- 快速上手頁面：https://echarts.apache.org/handbook/zh/get-started/
- 術語速查頁面：https://echarts.apache.org/zh/cheat-sheet.html
到了這里，關于數據可視化大屏——基于echarts的開發(fā)經驗分享的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
