echarts解決一些大屏圖形配置方案匯總
阿新 • • 發佈：2018-06-25
mage pac 線圖 head slab 組成 sla png 間隔
本文主要記錄使用echarts解決各種大屏圖形配置方案。
1、說在前面
去年經常使用echarts解決一些可視化大屏項目，一直想記錄下使用經驗，便於日後快速實現。正好最近在整理文檔，順道一起記錄在博客中。詳見：http://webhmy.com/2018/06/23/echarts/
2、基本使用
Echarts3.0是通過配置實現圖形的，根據不同的配置或者組合配置生成想要的圖形。後面主要介紹options中的配置內容。
setOption
// dom表示對應的dom節點，必須指定寬高
var ec = echart.init(dom);
// 根據配置初始化圖形，其中options就是配置核心
ec.setOption tooltip
用於顯示提示框
| 名稱 | 效果 |
|---|---|
| trigger | 觸發類型：item表示數據項，axis表示坐標軸觸發（柱狀圖/折線圖用的多） |
| formatter | 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。 |
tooltip: {
trigger: ‘item‘,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
散點圖（氣泡）圖 : {a}（系列名稱），{b}（數據名稱），{c}（數值數組）, {d}（無）
地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合並數值）, {d}（無）
餅圖、儀表盤、漏鬥圖: {a}（系列名稱），{b}（數據項名稱），{c}（數值）, {d}（百分比）
legend
用於顯示圖例。
legend: {
data: data,
itemGap: 0,
itemWidth: 15,
itemHeight: 10,
bottom: -5,
left: 30,
width: ‘500px‘,
textStyle: {
color: "#fff",
fontSize: 14
} axis
用於顯示坐標。
| 名稱 | 效果 |
|---|---|
| type | 坐標軸類型：‘value‘ 數值軸，適用於連續數據。‘category‘ 類目軸，適用於離散的類目數據，為該類型時必須通過 data 設置類目數據 |
| boundaryGap | 坐標軸兩邊留白策略 |
| splitNumber | 坐標軸的分割段數 |
| axisLine | 坐標軸軸線相關設置 |
| axisTick | 坐標軸刻度相關設置 |
| axisLabel | 坐標軸文本相關設置 |
//縱坐標設置相似
xAxis: [{
type: ‘category‘,
boundaryGap: false,
splitNumber: 5,
data: xAxis,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: ‘#fff‘,
fontSize: 14
}
}
}]更多基礎使用，詳見官網配置項文檔
3、圖形配置
餅圖疊加
餅圖是echart的自帶的圖形，這裏只要把顏色設置一下就可以了。難點在於在圖上再覆蓋一個半透明的圓環，圓環是不可以有hover效果的。
| 名稱 | 效果 |
|---|---|
| name | 圖標名稱 |
| type | 指明圖形的類型‘pie‘,‘line‘等 |
| hoverAnimation | 鼠標hover是否需要動畫 |
| radius | 餅圖的半徑，數組的第一項是內半徑，第二項是外半徑 |
| center | 餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。 |
| label | 餅圖圖形上的文本標簽，可用於說明圖形的一些數據信息 |
| labelLine | 標簽的視覺引導線樣式 |
| data | 渲染數據 |
series: [{
name: ‘主要致貧原因‘,
type: ‘pie‘,
hoverAnimation: false,
radius: [10, radiusMax],
center: [‘50%‘, ‘50%‘],
label: {
normal: {
formatter: "{b} {d}%",
color: ‘#fff‘,
fontSize: 14
}
},
labelLine: {
normal: {
lineStyle: {
color: ‘#fff‘,
opacity: 0.5
},
length: 1
}
},
data: data
},
{
type: ‘pie‘,
radius: [10, 18],
hoverAnimation: false,
center: [‘50%‘, ‘50%‘],
cursor: ‘text‘,
tooltip: {
show: false
},
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
//透明圓
value: 100,
itemStyle: {
normal: {
color: ‘#000‘,
opacity: 0.3
}
}
}]
}
]漸變折線
折線圖是echart的自帶的圖形，這裏的難點在於漸變色的設置
| 名稱 | 效果 |
|---|---|
| itemStyle | 圖形樣式（3.0內部必須加入normal） |
| areaStyle | 區域填充樣式。 |
var option = {
//僅列舉一個，其他2個類似
series: [{
name: type === ‘訪問用戶數(人)‘,
type: ‘line‘,
itemStyle: {
normal: {
color: "#cefe56",
borderWidth: 2,
areaStyle: {
//漸變色的設置
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: ‘#cefe56‘
}, {
offset: 0.5,
color: ‘#6d703d‘
}, {
offset: 1,
color: ‘#4d513a‘
}]
)
},
lineStyle: {
color: "#cefe56",
width: 2
}
}
},
data: data
}
]
}疊加刻度線（儀表盤）
圖示的圖形在echarts中是沒有原型的，由於是顯示的刻度，因此可以考慮使用type:‘gauge‘ （即儀表盤）來實現，然後隱藏所有只顯示儀表盤分割線；通過分析可知該圖形是由2個刻度圓形組成，藍色刻度表示背景，綠色刻度表示具體的占比，總比100%。
| 名稱 | 效果 |
|---|---|
| radius | 儀表盤半徑 |
| startAngle | 儀表盤起始角度 |
| endAngle | 儀表盤結束角度 |
| clockwise | 儀表盤刻度是否是順時針增長 |
| min | 最小的數據值 |
| max | 最大的數據值 |
| axisTick | 刻度樣式 |
| splitNumber | 儀表盤刻度的分割段數 |
| splitLine | 儀表盤分割線樣式 |
| axisLine | 儀表盤軸線相關配置 |
| pointer | 儀表盤指針 |
| detail | 儀表盤詳情 |
series: [
{
//綠色刻度，藍色刻度precent值是1
name: ‘脫貧人數占比‘,
type: ‘gauge‘,
animation: true,
radius: ‘80%‘,
startAngle: 359.99 * precent / 100,
endAngle: 0,
clockwise: false,
min: 0,
max: 100,
axisTick: {
show: false
},
axisLabel: {
show: false,
},
splitNumber: 30 * precent / 100,
splitLine: {
show: true,
length: 7,
lineStyle: {
color: ‘#30c3a7‘,
width: 2
},
},
axisLine: {
show: false,
lineStyle: {
width: 0,
opacity: 0
}
},
pointer: {
show: false
},
detail: {
color: ‘#32cfaf‘,
formatter: ‘{value}%‘,
fontSize: 14,
offsetCenter: [‘0%‘, ‘-20%‘]
},
title: {
show: true,
color: "#fff",
fontSize: 14,
offsetCenter: [‘0%‘, ‘20%‘]
},
data: [{ value: precent, name: ‘占比‘ }],
}
]刻度柱狀圖
圖示的圖形在echarts中是沒有原型的，其實它提供了另外一個類型：象形柱圖，這裏可以通過與柱狀圖的結合疊加組合成效果圖。即使用柱狀圖（type:bar）實現帶漸變的柱狀圖，使用象形柱圖（type:pictorialBar）實現中間的間隔，間隔的顏色與背景色相同，造成中間柱狀圖“缺失”的假象。
| 名稱 | 效果 |
|---|---|
| barWidth | 柱狀圖顯示寬度 |
| itemStyle | 柱狀圖樣式 |
| symbol | 圖形類型提供的標記類型包括 ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘，也可以自定義指定圖片 |
| symbolSize | 圖形的大小 |
| symbolMargin | 圖形的兩邊間隔 |
| symbolRepeat | 指定圖形元素是否重復 |
series: [{
name: ‘貧困戶人均純收入‘,
type: ‘bar‘,
barWidth: ‘15‘,
itemStyle: {
normal: {
//柱狀圖漸變
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [
{ offset: 0, color: ‘#55c8fe‘ },
{ offset: 0.3, color: ‘#4dbcf6‘ },
{ offset: 0.5, color: ‘#3ca3e6‘ },
{ offset: 0.7, color: ‘#3193db‘ },
{ offset: 1, color: ‘#2683d0‘ }
]
),
//刻度顯示在頂部
label: {
show: true,
color: ‘#fff‘,
position: ‘top‘
}
},
},
data: data
}, {
type: ‘pictorialBar‘,
symbol: ‘rect‘,
symbolSize: [15, 2],
symbolMargin: 2,
symbolRepeat: true,
itemStyle: {
normal: {
color: ‘#101634‘
}
},
tooltip: {
show: false
},
data: data
}]echarts解決一些大屏圖形配置方案匯總