你們要的Echart系列，今天它來了，教你一招快速上手echarts的屬性設(shè)置，手把手教程系列

2021-6-1    前端達(dá)人

一、echarts簡介

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

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

現(xiàn)在廢話不多說，官網(wǎng)地址：https://echarts.apache.org/

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

點擊上面的網(wǎng)址就來到了echarts的官網(wǎng)了，最新版的Apache Echarts 是5.x的版本了。
官網(wǎng)大概就長下面的這個樣子。
在這里插入圖片描述
然后點擊快速入門，我們先去把echarts安裝一下，按下圖所示進行操作。
在這里插入圖片描述
作者的demo環(huán)境是用的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() { // 基于準(zhǔn)備好的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
    
    •

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

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

三、舉個echarts的需求例子

舉個栗子，假如我們拿到的UI的設(shè)計圖如下，需要我們做一個柱狀圖，這個柱狀圖需要下面的這種樣式（本文不做100%的還原，僅做常用屬性的舉例子）。
UI圖例子
其實看到這里，可能覺得我們剛剛寫到的測試Demo和UI的設(shè)計不一樣。所以才有了我們怎么樣將官網(wǎng)的簡單Demo配置成UI圖一致。

怎么快速完成這個UI圖的還原呢？首先我們要做的是找到這個UI圖所屬的Echarts類，如下圖中所示，找到“示例”，再找到“柱狀圖”。這樣我們就可以在柱狀圖中再找到基礎(chǔ)配置項。就是如Demo中的一樣。
官網(wǎng)示例
接下來就應(yīng)該進行下一步的配置了，在配置這些屬性之前，你要先明白一點你的需求是啥。先看UI圖里的柱狀圖哪些地方是需要修改的，目前的肉眼所見“網(wǎng)格的樣式（需要改成虛線，全且顏色有變）、柱狀圖的顏色、需要有圖例、X和Y軸的刻度線不一樣”等等。
測試圖表
下一章節(jié)快速記住配置項的屬性。

四、echarts屬性速記

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

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

一級屬性（options.xxxx）：

  • 網(wǎng)格設(shè)置 ----- grid
    變色的部分就是網(wǎng)格 
 { grid: { borderColor: "rgba(222, 48, 48, 1)", show: true, backgroundColor: "rgba(188, 71, 71, 1)" } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •
  • X軸設(shè)置 ----- xAxis
    x橫軸設(shè)置 
{ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { //坐標(biāo)文字 color: '#24253B', interval: 0 }, axisLine: { lineStyle: { //坐標(biāo)軸顏色 color: '#C6C9FF' } }, axisTick: { //坐標(biāo)軸刻度 inside: true, //朝內(nèi) 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軸設(shè)置 ----- yAxis
    y軸 
 yAxis: { type: 'value', axisLine: { show: !false, lineStyle: { //坐標(biāo)軸顏色 color: '#E6EAF9' } }, splitLine: { //網(wǎng)格設(shè)置 lineStyle: { color: '#DADCFF', type: 'dashed' } } },  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    •
  • 系列設(shè)置（系列的數(shù)據(jù)） ----- series
    系列數(shù)據(jù)
    也不難理解，就是你需要設(shè)置哪種圖表的數(shù)據(jù)樣式，就在里面找到對應(yīng)的type
  • 全局字體樣式設(shè)置 ----- textStyle
    全局的文字
    這個也不難理解，設(shè)置的就是當(dāng)前這個圖表全局的字體樣式，設(shè)置之后會覆蓋默認(rèn)的字體樣式，這個也會有一個優(yōu)先級別，就是 單獨的子屬性設(shè)置 > 全局樣式 > 默認(rèn) 
{ textStyle:{ color:'#f00' //設(shè)置全局的字體為紅色 } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •
  • 圖例設(shè)置 ----- legend
    這個位置就是圖例
    圖例就是對應(yīng)的每項數(shù)據(jù)的標(biāo)識符，讓你知道某種顏色對應(yīng)代表某種數(shù)據(jù)。 
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)" //這里的子屬性設(shè)置會覆蓋上面的設(shè)置 } }, 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
    
    •
  • 標(biāo)題設(shè)置 ----- title
    標(biāo)題設(shè)置
    這里的標(biāo)題可以分為主標(biāo)題和副標(biāo)題，可以使用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
    
    •
  • 提示設(shè)置（鼠標(biāo)懸浮到圖上的交互樣式）----- tooltip
    提示組件
    這個就是提示組件，一般情況下設(shè)置的就是鼠標(biāo)懸浮到圖表上面的樣式。
  • 工具欄設(shè)置 ----- toolbox
    工具欄
    上圖箭頭所指區(qū)域就是工具欄了，功能就是配置圖表的常用工具，例如下載、圖表切換等等。

二級屬性（options.xxxx.xxx）

  • 是否顯示某個樣式 ----- show（布爾類型）
    是否顯示
    重點記住這個show就可以了，大部分一級屬性都有這個屬性，就是控制顯示與隱藏的，需要就為true，不需要就為false。
  • 坐標(biāo)軸網(wǎng)格設(shè)置----- splitLine（x軸和y軸都有的屬性）
    坐標(biāo)網(wǎng)格樣式設(shè)置
    這個屬性也不難理解，就是設(shè)置x或者y軸在網(wǎng)格中顯示的樣式，grid在全局就是所有的，這里設(shè)置就是針對每個坐標(biāo)軸的詳細(xì)設(shè)置。 
 yAxis: [{ type: "value", splitLine: { //坐標(biāo)的網(wǎng)格設(shè)置 lineStyle: { width: 5, type: "dashed", color: "rgba(244, 23, 23, 1)" } } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •
  • 字體設(shè)置----- textStyle
    text屬性
    這里可能有些誤解了，子屬性的textStyle樣式一般是指在某個具體的熟悉里的字體樣式設(shè)置了，同js設(shè)置字體樣式的一樣。
    設(shè)置舉例 
 yAxis: { type: "value", axisLabel: { //刻度標(biāo)簽文字設(shè)置 fontSize: 18, // color: "rgba(235, 33, 33, 1)" } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •
  • 圖形樣式設(shè)置 ----- itemStyle
    樣式舉例
    這個屬性的設(shè)置也是大部分屬性設(shè)置都有的，可以理解為設(shè)置某個屬性的幾何屬性。 
 xAxis: { axisLine: { lineStyle: { //坐標(biāo)軸軸線樣式設(shè)置 color: "rgba(228, 13, 13, 1)", type: "dashed" } } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    •
  • 線的樣式設(shè)置 ----- lineStyle
    視覺引導(dǎo)線
    這個屬性主要就是這種這種視覺引導(dǎo)線的樣式的。 
series: [{ type: "pie", labelLine: { lineStyle: { //引導(dǎo)線的樣式設(shè)置 color: "rgba(231, 16, 16, 1)", width: 2 }, length: 20 } }]  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •
  • 文本標(biāo)簽設(shè)置 ----- label
    label標(biāo)簽屬性設(shè)置
    文中所標(biāo)記部分就是為某個標(biāo)簽的屬性設(shè)置，一般是指顯示在圖表數(shù)據(jù)中的文字。 
 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
    
    •
  • 標(biāo)簽的視覺引導(dǎo)線設(shè)置 ----- labelLine
    這個屬性前面寫lineStyle的時候就已經(jīng)提到過了。
  • 顯示的位置設(shè)置 ----- （left、right、top、bottom）等，都是同定位屬性一樣
    位置設(shè)置
    這里不難看出我們將原來在頂部居中的圖例移動到了左側(cè)往下一點的位置，就是通過這個幾個屬性來控制的，大部分與數(shù)據(jù)無關(guān)的提示類都有這些屬性，如：工具欄、標(biāo)題、標(biāo)簽等。
  • 透明度設(shè)置 ----- opacity
    設(shè)置某個顯示的透明度
    這也很好理解，就是想要哪個部分透明，就往哪里寫。 
legend: { itemStyle: { opacity: 0.1 } },  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •
  • 格式化設(shè)置 ----- formatter
    格式化顯示

上面這些都是常用的一些屬性設(shè)置，你學(xué)廢了嗎？

五、本文總結(jié)

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




藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

存檔