一、echarts簡介

以前的百度echart（echarts.baidu.com），不過現在的ECharts 正在 Apache 開源基金會孵化中，因此域名（echarts.baidu.com）已不再使用，請訪問 echarts.apache.org。

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

現在廢話不多說，官網地址：https://echarts.apache.org/

二、echarts的下載、安裝與使用

點擊上面的網址就來到了echarts的官網了，最新版的Apache Echarts 是5.x的版本了。
官網大概就長下面的這個樣子。

然后點擊快速入門，我們先去把echarts安裝一下，按下圖所示進行操作。

作者的demo環境是用的vue-cli3的腳手架，將Echarts安裝到項目里

運行命令：

npm install echarts --save
//or yarn add echarts  


    

        1
    

    

        2
    

    

        3
    

安裝整個包到項目里

在項目里使用，先寫個測試用例，看看是否安裝成功了。

<template> <div id="charts-container" /> </template> <script> // 引入基本模板 import * as echarts from "echarts"; export default { name: "LineCharts", props: { options: { required: false, type: [Object], default: () => {}, }, }, data() { return { }; }, mounted() { this.init(); }, methods: { /**
         * 初始化charts
         */ init() { // 基于準備好的dom，初始化echarts實例 let myChart = echarts.init(document.getElementById('charts-container')); var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } }] }; myChart.setOption(option); } } }; </script> <style lang="scss" scoped> #charts-container { width: 100%; height: 410px; } </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

我們使用了一個官網示例的代碼，是最簡單版本的Echart原型。

https://echarts.apache.org/examples/zh/editor.html?c=bar-background

三、舉個echarts的需求例子

舉個栗子，假如我們拿到的UI的設計圖如下，需要我們做一個柱狀圖，這個柱狀圖需要下面的這種樣式（本文不做100%的還原，僅做常用屬性的舉例子）。

其實看到這里，可能覺得我們剛剛寫到的測試Demo和UI的設計不一樣。所以才有了我們怎么樣將官網的簡單Demo配置成UI圖一致。

怎么快速完成這個UI圖的還原呢？首先我們要做的是找到這個UI圖所屬的Echarts類，如下圖中所示，找到“示例”，再找到“柱狀圖”。這樣我們就可以在柱狀圖中再找到基礎配置項。就是如Demo中的一樣。

接下來就應該進行下一步的配置了，在配置這些屬性之前，你要先明白一點你的需求是啥。先看UI圖里的柱狀圖哪些地方是需要修改的，目前的肉眼所見“網格的樣式（需要改成虛線，全且顏色有變）、柱狀圖的顏色、需要有圖例、X和Y軸的刻度線不一樣”等等。

下一章節快速記住配置項的屬性。

四、echarts屬性速記

首先我們記住這些屬性，就要對這些屬性進行一個分類。其實在官網中的《配置項手冊》已經分類的很細了，但是由于Echarts的靈活度非常高，就導致了配置項手冊的東西看起來就越來越多了，看久了就會導致“眼睛疲憊”。

廢話不多說，直接開始，其實這些英文單次就對應的屬性，稍微英文好點的就可以輕松點了，
按項目里常用的屬性排序，如下：

一級屬性（options.xxxx）：

• 網格設置 ----- grid
  

 { grid: { borderColor: "rgba(222, 48, 48, 1)", show: true, backgroundColor: "rgba(188, 71, 71, 1)" } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

• X軸設置 ----- xAxis
  

{ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { //坐標文字 color: '#24253B', interval: 0 }, axisLine: { lineStyle: { //坐標軸顏色 color: '#C6C9FF' } }, axisTick: { //坐標軸刻度 inside: true, //朝內 lineStyle: { color: '#A3A8FF' } } } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

• Y軸設置 ----- yAxis
  

 yAxis: { type: 'value', axisLine: { show: !false, lineStyle: { //坐標軸顏色 color: '#E6EAF9' } }, splitLine: { //網格設置 lineStyle: { color: '#DADCFF', type: 'dashed' } } },  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

• 系列設置（系列的數據） ----- series
  
  也不難理解，就是你需要設置哪種圖表的數據樣式，就在里面找到對應的type

• 全局字體樣式設置 ----- textStyle
  
  這個也不難理解，設置的就是當前這個圖表全局的字體樣式，設置之后會覆蓋默認的字體樣式，這個也會有一個優先級別，就是 單獨的子屬性設置 > 全局樣式 > 默認

{ textStyle:{ color:'#f00' //設置全局的字體為紅色 } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

• 圖例設置 ----- legend
  
  圖例就是對應的每項數據的標識符，讓你知道某種顏色對應代表某種數據。

option = { color: ["#003366", "#006699", "#4cabce", "#e5323e"], //這個是四個圖例的樣色。 dataset: { source: [ ["type", "2012", "2013", "2014", "2015", "2016"], ["Forest", 320, 332, 301, 334, 390], ["Steppe", 220, 182, 191, 234, 290], ["Desert", 150, 232, 201, 154, 190], ["Wetland", 98, 77, 101, 99, 40] ] }, legend: { itemStyle: { color: "rgba(249, 0, 0, 1)" //這里的子屬性設置會覆蓋上面的設置 } }, xAxis: { type: "category", axisTick: { show: false } }, yAxis: {}, series: [{ type: "bar", seriesLayoutBy: "row" }, { type: "bar", seriesLayoutBy: "row" }, { type: "bar", seriesLayoutBy: "row" }, { type: "bar", seriesLayoutBy: "row" }] }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

• 標題設置 ----- title
  
  這里的標題可以分為主標題和副標題，可以使用show屬性去控制顯示隱藏。

{ title: { text: "Main Title", subtext: "Sub Title", left: "center", textStyle: { fontSize: 30, color: "rgba(225, 15, 15, 1)" }, subtextStyle: { fontSize: 20 } } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

• 提示設置（鼠標懸浮到圖上的交互樣式）----- tooltip
  
  這個就是提示組件，一般情況下設置的就是鼠標懸浮到圖表上面的樣式。

• 工具欄設置 ----- toolbox
  
  上圖箭頭所指區域就是工具欄了，功能就是配置圖表的常用工具，例如下載、圖表切換等等。

二級屬性（options.xxxx.xxx）

• 是否顯示某個樣式 ----- show（布爾類型）
  
  重點記住這個show就可以了，大部分一級屬性都有這個屬性，就是控制顯示與隱藏的，需要就為true，不需要就為false。

• 坐標軸網格設置----- splitLine（x軸和y軸都有的屬性）
  
  這個屬性也不難理解，就是設置x或者y軸在網格中顯示的樣式，grid在全局就是所有的，這里設置就是針對每個坐標軸的詳細設置。

 yAxis: [{ type: "value", splitLine: { //坐標的網格設置 lineStyle: { width: 5, type: "dashed", color: "rgba(244, 23, 23, 1)" } } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

• 字體設置----- textStyle
  
  這里可能有些誤解了，子屬性的textStyle樣式一般是指在某個具體的熟悉里的字體樣式設置了，同js設置字體樣式的一樣。
  

 yAxis: { type: "value", axisLabel: { //刻度標簽文字設置 fontSize: 18, // color: "rgba(235, 33, 33, 1)" } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

• 圖形樣式設置 ----- itemStyle
  
  這個屬性的設置也是大部分屬性設置都有的，可以理解為設置某個屬性的幾何屬性。

 xAxis: { axisLine: { lineStyle: { //坐標軸軸線樣式設置 color: "rgba(228, 13, 13, 1)", type: "dashed" } } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

• 線的樣式設置 ----- lineStyle
  
  這個屬性主要就是這種這種視覺引導線的樣式的。

series: [{ type: "pie", labelLine: { lineStyle: { //引導線的樣式設置 color: "rgba(231, 16, 16, 1)", width: 2 }, length: 20 } }]  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

• 文本標簽設置 ----- label
  
  文中所標記部分就是為某個標簽的屬性設置，一般是指顯示在圖表數據中的文字。

 series: [{ name: "Sale", type: "bar", data: [5, 20, 36, 10, 10, 20, 4], label: { show: true, fontSize: 16, color: "rgba(65, 215, 35, 1)", fontStyle: "italic", borderWidth: 0 } }]  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

• 標簽的視覺引導線設置 ----- labelLine
  這個屬性前面寫lineStyle的時候就已經提到過了。

• 顯示的位置設置 ----- （left、right、top、bottom）等，都是同定位屬性一樣
  
  這里不難看出我們將原來在頂部居中的圖例移動到了左側往下一點的位置，就是通過這個幾個屬性來控制的，大部分與數據無關的提示類都有這些屬性，如：工具欄、標題、標簽等。

• 透明度設置 ----- opacity
  
  這也很好理解，就是想要哪個部分透明，就往哪里寫。

legend: { itemStyle: { opacity: 0.1 } },  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

• 格式化設置 ----- formatter
  

上面這些都是常用的一些屬性設置，你學廢了嗎？

五、本文總結

其實通過上面的一個小節不難看出，Echarts的一些屬性設置都是很有規律的，只要找到這些規律即可快速的上手Echarts了。這作為一個Echarts的系列的文章，主要目的是讓學習Echart的朋友可以快速上手，會持續進行更新的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn  作者：狼丶宇先生

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務