ECharts數據可視化學習
數據可視化
- 數據可視化
主要目的：藉助於圖形化手段，清晰有效地傳達與溝通信息 - 數據可視化可以把數據從冰冷的數字轉換成圖形，揭示蘊含在數據中的規律和道理
可視化面板介紹
- 應對現在數據可視化的趨勢，越來越多企業需要在很多場景(
營銷數據，生產數據，用戶數據)下使用，可視化圖表來展示體現數據，讓數據更加直觀，數據特點更加突出。
01- 可視化適配方案
- 設計稿是1920px
flexible.js把屏幕分爲24 等份flexible.js是淘寶官方H5移動適配解決方案
px2rwd插件的基準值是80pxwebstorm中將px轉換爲rem的插件Preferences中的Px to Rwd設置基準值重新啓動webstorm
02-Echarts-介紹
- 常見的
數據可視化庫：D3.js目前Web端評價最高的Javascript可視化工具庫(入手難)ECharts.js百度出品的一個開源Javascript數據可視化庫Highcharts.js國外的前端數據可視化庫，非商用免費，被許多國外大公司所使用AntV螞蟻金服全新一代數據可視化解決方案Highcharts和Echarts就像是Office和WPS的關係
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
總結：
-
是一個J
S插件 -
性能好可流暢運行
PC與移動設備 -
兼容主流瀏覽器 -
提供很多常用圖表，且可
定製
03-Echarts-體驗
官方教程：[五分鐘上手ECharts]
使用步驟：
- 引入
echarts插件文件到html頁面中 - 準備一個具備大小的
DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
初始化echarts實例對象
var myChart = echarts.init(document.getElementById('main'));
指定配置項和數據(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
將配置項設置給echarts實例對象
myChart.setOption(option);
04-Echarts-基礎配置
需要了解的主要配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
-
series系列列表，每個系列通過type決定自己的圖表類型圖標數據，指定什麼類型的圖標，可以多個圖表重疊。
-
xAxis直角座標系 grid 中的 x 軸boundaryGap- 座標軸兩邊留白策略
true，這時候刻度只是作爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間
- 座標軸兩邊留白策略
-
yAxis-----直角座標系 grid 中的 y 軸 -
grid-----直角座標系內繪圖網格 -
title-----標題組件 -
tooltip-----提示框組件 -
legend-----圖例組件 -
color-----調色盤顏色列表 -
數據堆疊，同個類目軸上系列配置相同的stack值後 後一個系列的值會在前一個系列的值上相加。
option = {
// color設置我們線條的顏色 注意後面是個數組
color: ['pink', 'red', 'green', 'skyblue'],
// 設置圖表的標題
title: {
text: '折線圖堆疊123'
},
// 圖表的提示框組件
tooltip: {
// 觸發方式
trigger: 'axis'
},
// 圖例組件
legend: {
// series裏面有了 name值則 legend裏面的data可以刪掉
},
// 網格配置 grid可以控制線形圖 柱狀圖 圖表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否顯示刻度標籤 如果是true 就顯示 否則反之
containLabel: true
},
// 工具箱組件 可以另存爲圖片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 設置x軸的相關配置
xAxis: {
type: 'category',
// 是否讓我們的線條和座標軸有縫隙
boundaryGap: false,
data: ['星期一', '週二', '週三', '週四', '週五', '週六', '週日']
},
// 設置y軸的相關配置
yAxis: {
type: 'value'
},
// 系列圖表配置 它決定着顯示那種類型的圖表
series: [
{
name: '郵件營銷',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯盟廣告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視頻廣告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接訪問',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
05- 柱狀圖圖表（兩大步驟）
- 官網找到類似實例， 適當分析，並且引入到HTML頁面中
- 根據需求定製圖表
引入到html頁面中
// 柱狀圖1模塊
(function() {
// 實例化對象
let myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和數據
let option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 座標軸指示器，座標軸觸發有效
type: "shadow" // 默認爲直線，可選爲：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "直接訪問",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// 把配置給實例對象
myChart.setOption(option);
})();
根據需求定製
- 修改圖表柱形顏色 #2f89cf
- 修改圖表大小 top 爲 10px bottom 爲 4% grid決定我們的柱狀圖的大小
color: ["#2f89cf"],
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
X軸相關設置 xAxis- 文本顏色設置爲 rgba(255,255,255,.6) 字體大小爲 12px
- X軸線的樣式 不顯示
// 設置x軸標籤文字樣式
// x軸的文字顏色和大小
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// x軸樣式不顯示
axisLine: {
show: false
// 如果想要設置單獨的線條樣式
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
}
Y 軸相關定製- 文本顏色設置爲 rgba(255,255,255,.6) 字體大小爲 12px
- Y 軸線條樣式 更改爲 1像素的 rgba(255,255,255,.1) 邊框
- 分隔線的顏色修飾爲 1像素的 rgba(255,255,255,.1)
// y 軸文字標籤樣式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// y軸線條樣式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
5232},
// y 軸分隔線樣式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
- 修改柱形爲圓角以及柱子寬度
series裏面設置
series: [
{
name: "直接訪問",
type: "bar",
// 修改柱子寬度
barWidth: "35%",
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
// 修改柱子圓角
barBorderRadius: 5
}
}
]
};
更換對應數據
// x軸中更換data數據
data: [ "旅遊行業","教育培訓", "遊戲行業", "醫療行業", "電商行業", "社交行業", "金融行業" ],
// series 更換數據
data: [200, 300, 300, 900, 1500, 1200, 600]
讓圖表跟隨屏幕自適應
window.addEventListener("resize", function() {
myChart.resize();
});
06-柱狀圖2定製
- 官網找到類似實例， 適當分析，並且引入到HTML頁面中
- 根據需求定製圖表
修改圖形大小 grid
// 圖標位置
grid: {
top: "10%",
left: "22%",
bottom: "10%"
},
不顯示x軸
xAxis: {
show: false
},
y軸相關定製
- 不顯示y軸線和相關刻度
//不顯示y軸線條
axisLine: {
show: false
},
// 不顯示刻度
axisTick: {
show: false
},
- y軸文字的顏色設置爲白色
axisLabel: {
color: "#fff"
},
修改第一組柱子相關樣式（條狀）
name: "條",
// 柱子之間的距離
barCategoryGap: 50,
//柱子的寬度
barWidth: 10,
// 柱子設爲圓角
itemStyle: {
normal: {
barBorderRadius: 20,
}
},
- 設置第一組柱子內百分比顯示數據
// 圖形上的文本標籤
label: {
normal: {
show: true,
// 圖形內顯示
position: "inside",
// 文字的顯示格式
formatter: "{c}%"
}
},
- 設置第一組柱子不同顏色
// 聲明顏色數組
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 給 itemStyle 裏面的color 屬性設置一個 返回值函數
itemStyle: {
normal: {
barBorderRadius: 20,
// params 傳進來的是柱子對象
console.log(params);
// dataIndex 是當前柱子的索引號
return myColor[params.dataIndex];
}
},
- 修改第二組柱子的相關配置（框狀）
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
},
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
- 給y軸添加第二組數據
yAxis: [
{
type: "category",
data: ["印尼", "美國", "印度", "中國", "世界人口(萬)"],
// 不顯示y軸的線
axisLine: {
show: false
},
// 不顯示刻度
axisTick: {
show: false
},
// 把刻度標籤裏面的文字顏色設置爲白色
axisLabel: {
color: "#fff"
}
},
{
show: true,
data: [702, 350, 610, 793, 664],
// 不顯示y軸的線
axisLine: {
show: false
},
// 不顯示刻度
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
}
}
],
- 設置兩組柱子層疊以及更換數據
// 給series 第一個對象裏面的 添加
yAxisIndex: 0,
// 給series 第二個對象裏面的 添加
yAxisIndex: 1,
// series 第一個對象裏面的data
data: [70, 34, 60, 78, 69],
// series 第二個對象裏面的data
data: [100, 100, 100, 100, 100],
// y軸更換第一個對象更換data數據
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// y軸更換第二個對象更換data數據
data:[702, 350, 610, 793, 664],
07-折線圖1 人員變化模塊製作
- 官網找到類似實例， 適當分析，並且引入到HTML頁面中
- 根據需求定製圖表
- 修改折線圖大小，顯示邊框設置顏色：#012f4a，並且顯示刻度標籤。
// 設置網格樣式
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
show: true,// 顯示邊框
borderColor: '#012f4a',// 邊框顏色
containLabel: true // 包含刻度文字在內
},
- 修改圖例組件中的文字顏色 #4c9bfd， 距離右側 right 爲 10%
// 圖例組件
legend: {
textStyle: {
color: '#4c9bfd' // 圖例文字顏色
},
right: '10%' // 距離右邊10%
},
- x軸相關配置
- 刻度去除
- x軸刻度標籤字體顏色：#4c9bfd
- 剔除x座標軸線顏色（將來使用Y軸分割線)
- 軸兩端是不需要內間距 boundaryGap
xAxis: {
type: 'category',
data: ["週一", "週二"],
axisTick: {
show: false // 去除刻度線
},
axisLabel: {
color: '#4c9bfd' // 文本顏色
},
axisLine: {
show: false // 去除軸線
},
boundaryGap: false // 去除軸內間距
},
- y軸的定製
- 刻度去除
- 字體顏色：#4c9bfd
- 分割線顏色：#012f4a
yAxis: {
type: 'value',
axisTick: {
show: false // 去除刻度
},
axisLabel: {
color: '#4c9bfd' // 文字顏色
},
splitLine: {
lineStyle: {
color: '#012f4a' // 分割線顏色
}
}
},
- 兩條線形圖定製
- 顏色分別：#00f2f1 #ed3f35
- 把折線修飾爲圓滑 series 數據中添加 smooth 爲 true
color: ['#00f2f1', '#ed3f35'],
series: [{
name:'新增粉絲',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
// 折線修飾爲圓滑
smooth: true,
},{
name:'新增遊客',
data: [100, 331, 200, 123, 233, 543, 400],
type: 'line',
smooth: true,
}]
- 配置數據
// x軸的文字
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 圖標數據
series: [{
name:'新增粉絲',
data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
type: 'line',
smooth: true
},{
name:'新增遊客',
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
type: 'line',
smooth: true
}
}]
- 新增需求 點擊 2020年 2021年 數據發生變化
以下是後臺送過來數據（ajax請求過來的）
var yearData = [
{
year: '2020', // 年份
data: [ // 兩個數組是因爲有兩條線
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: '2021', // 年份
data: [ // 兩個數組是因爲有兩條線
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
- tab欄切換事件
- 點擊2020按鈕 需要把 series 第一個對象裏面的data 換成 2020年對象裏面data[0]
- 點擊2020按鈕 需要把 series 第二個對象裏面的data 換成 2020年對象裏面data[1]
- 2021 按鈕同樣道理
08-折線圖2 播放量模塊製作
- 官網找到類似實例， 適當分析，並且引入到HTML頁面中
- 根據需求定製圖表
- 更換圖例組件文字顏色 rgba(255,255,255,.5) 文字大小爲12
legend: {
top: "0%",
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
- 修改圖表大小
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
- 修改x軸相關配置
- 修改文本顏色爲rgba(255,255,255,.6) 文字大小爲 12
- x軸線的顏色爲 rgba(255,255,255,.2)
// 文本顏色爲rgba(255,255,255,.6) 文字大小爲 12
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// x軸線的顏色爲 rgba(255,255,255,.2)
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
},
- 修改y軸的相關配置
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
// 修改分割線的顏色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
- 修改兩個線模塊配置(注意在series 裏面定製)
//第一條 線是圓滑
smooth: true,
// 單獨修改線的樣式
lineStyle: {
color: "#0184d5",
width: 2
},
// 填充區域
areaStyle: {
// 漸變色，只需要複製即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // 漸變色的起始顏色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)" // 漸變線的結束顏色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
},
// 設置拐點 小圓點
symbol: "circle",
// 拐點大小
symbolSize: 8,
// 設置拐點顏色以及邊框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 開始不顯示拐點， 鼠標經過顯示
showSymbol: false,
name: "轉發量",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887",
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
// 設置拐點 小圓點
symbol: "circle",
// 拐點大小
symbolSize: 5,
// 設置拐點顏色以及邊框
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 開始不顯示拐點， 鼠標經過顯示
showSymbol: false,
- 更換數據
// x軸更換數據
data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
// series 第一個對象data數據
data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
// series 第二個對象data數據
data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
09-餅形圖 1年齡分佈模塊製作
- 官網找到類似實例， 適當分析，並且引入到HTML頁面中
- 根據需求定製圖表
定製圖表需求1：
- 修改圖例組件在底部並且居中顯示。
- 每個小圖標的寬度和高度修改爲 10px
- 文字大小爲12 顏色 rgba(255,255,255,.5)
legend: {
// 距離底部爲0%
bottom: "0%",
// 小圖標的寬度和高度
itemWidth: 10,
itemHeight: 10,
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'],
// 修改圖例組件的文字爲 12px
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
定製需求2：
- 修改水平居中 垂直居中
- 修改內圓半徑和外圓半徑爲 [“40%”, “60%”] pink老師友情提示，帶有直角座標系的比如折線圖柱狀圖是 grid修改圖形大小，而我們餅形圖是通過 radius 修改大小
series: [
{
name: "年齡分佈",
type: "pie",
// 設置餅形圖在容器中的位置
center: ["50%", "50%"],
// 修改內圓半徑和外圓半徑爲 百分比是相對於容器寬度來說的
radius: ["40%", "60%"],
// 不顯示標籤文字
label: { show: false },
// 不顯示連接線
labelLine: { show: false },
}
]
定製需求3：更換數據
// legend 中的data 可省略
data: ["0歲以下", "20-29歲", "30-39歲", "40-49歲", "50歲以上"],
// series 中的數據
data: [
{ value: 1, name: "0歲以下" },
{ value: 4, name: "20-29歲" },
{ value: 2, name: "30-39歲" },
{ value: 2, name: "40-49歲" },
{ value: 1, name: "50歲以上" }
] ,
定製需求4： 更換顏色
color: [
"#065aab",
"#066eab",
"#0682ab",
"#0696ab",
"#06a0ab",
],
// 4. 讓圖表跟隨屏幕自動的去適應
window.addEventListener("resize", function() {
myChart.resize();
});
10-餅形圖2 地區分佈模塊製作（南丁格爾玫瑰圖）
- 官網找到類似實例， 適當分析，並且引入到HTML頁面中
- 根據需求定製圖表
第二步：按照需求定製
- 需求1：顏色設置
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
- 需求2：修改餅形圖大小 ( series對象)
radius: ['10%', '70%'],
- 需求3： 把餅形圖的顯示模式改爲 半徑模式
roseType: "radius",
- 需求4：數據使用更換（series對象 裏面 data對象）
{ value: 20, name: '雲南' },
{ value: 26, name: '北京' },
{ value: 24, name: '山東' },
{ value: 25, name: '河北' },
{ value: 20, name: '江蘇' },
{ value: 25, name: '浙江' },
{ value: 30, name: '四川' },
{ value: 42, name: '湖北' }
-
需求5：字體略小些 10 px ( series對象裏面設置 )
餅圖圖形上的文本標籤可以控制餅形圖的文字的一些樣式。 label 對象設置
series: [
{
name: "面積模式",
type: "pie",
radius: [30, 110],
center: ["50%", "50%"],
roseType: "radius",
// 文本標籤控制餅形圖文字的相關樣式， 注意它是一個對象
label: {
fontSize: 10
},
}
]
};
- 需求6：防止縮放的時候，引導線過長。引導線略短些 (series對象裏面的 labelLine 對象設置 )
- 連接圖表 6 px
- 連接文字 8 px
+ // 文字調整
+ label:{
+ fontSize: 10
+ },
+ // 引導線調整
+ labelLine: {
+ // 連接扇形圖線長
+ length: 6,
+ // 連接文字線長
+ length2: 8
+ }
+ }
+ ],
- 需求6：瀏覽器縮放的時候，圖表跟着自動適配。
// 監聽瀏覽器縮放，圖表對象調用縮放resize函數
window.addEventListener("resize", function() {
myChart.resize();
});
11-Echarts-社區介紹
社區就是一些，活躍的echart使用者，交流和貢獻定製好的圖表的地方。
- 在這裏可以找到一些基於echart的高度定製好的圖表，相當於基於jquery開發的插件，這裏是基於echarts開發的第三方的圖表。
12-Echarts-map使用（擴展）
參考社區的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM
(模擬飛機航線)
實現步驟：
- 第一需要下載
china.js提供中國地圖的js文件 - 第二個因爲裏面代碼比較多，我們新建一個新的js文件 myMap.js 引入
- 使用社區提供的配置即可。
需要修改：
- 去掉標題組件
- 去掉背景顏色
- 修改地圖省份背景 #142957 areaColor 裏面做修改
- 地圖放大通過 zoom 設置爲1.2即可
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4'
},
emphasis: {
areaColor: '#0b1c2d'
}
}
},
總結：這例子是擴展案例，大家以後可以多看看社區裏面的案例。
13- 最後約束縮放
/* 約束屏幕尺寸 */
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
14-總結
- 偶然的機會，在做自己項目的時候想添加一個百度地圖的功能，就在B站搜學習視頻，搜到了pink老師的ECharts的視頻，覺得很有意思，就記錄一下學習過程，以後有機會再更加深入學習一下😊