echarts解決一些大屏圖形配置方案匯總
本文主要記錄使用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 (options)
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解決一些大屏圖形配置方案匯總