Echarts基礎 (pink老師)
可視化面板介紹
應對如今數據可視化的趨勢，愈來愈多企業須要在不少場景(營銷數據，生產數據，用戶數據)下使用，可視化圖表來展現體現數據，讓數據更加直觀，數據特色更加突出。javascript
01-使用技術
完成該項目須要具有如下知識：css
- div + css 佈局
- flex 佈局
- Less
- 原生js + jquery 使用
- rem適配
- echarts基礎
02- 案例適配方案
-
設計稿是1920pxhtml
- flexible.js 把屏幕分爲 24 等份
- cssrem 插件的基準值是 80px
插件-配置按鈕---配置擴展設置--Root Font Size 裏面 設置。 前端
可是別忘記重啓vscode軟件保證生效java
03-基礎設置
- body 設置背景圖 ，縮放爲 100% ， 行高1.15
- css初始化
04-header 佈局
- 高度爲100px
- 背景圖，在容器內顯示
- 縮放比例爲 100%
- h1 標題部分 白色 38像素 居中顯示 行高爲 80像素
- 時間模塊 showTime 定位右側 right 爲 30px 行高爲 75px 文字顏色爲：rgba(255, 255, 255, 0.7) 而文字大小爲 20像素
// 格式： 當前時間：2020年3月17-0時54分14秒
<script>
var t = null;
t = setTimeout(time, 1000);//開始運行
function time() {
clearTimeout(t);//清除定時器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();//獲取時
var m = dt.getMinutes();//獲取分
var s = dt.getSeconds();//獲取秒
document.querySelector(".showTime").innerHTML = '當前時間：' + y + "年" + mt + "月" + day + "-" + h + "時" + m + "分" + s + "秒";
t = setTimeout(time, 1000); //設定定時器，循環運行
}
</script>
- header部分css樣式
header {
position: relative;
height: 1.25rem;
background: url(../images/head_bg.png) no-repeat top center;
background-size: 100% 100%;
h1 {
font-size: 0.475rem;
color: #fff;
text-align: center;
line-height: 1rem;
}
.showTime {
position: absolute;
top: 0;
right: 0.375rem;
line-height: 0.9375rem;
font-size: 0.25rem;
color: rgba(255, 255, 255, 0.7);
}
}
05-mainbox 主體模塊
- 須要一個上左右的10px 的內邊距
- column 列容器，分三列，佔比 3：5：3
css樣式：jquery
.mainbox {
padding: 0.125rem 0.125rem 0;
display: flex;
.column {
flex: 3;
}
&:nth-child(2) {
flex: 5;
}
}
06-公共面板模塊 panel
- 高度爲 310px
- 1像素的 1px solid rgba(25, 186, 139, 0.17) 邊框
- 有line.jpg 背景圖片
- padding爲 上爲 0 左右 15px 下爲 40px
- 下外邊距是 15px
- 利用panel 盒子 before 和after 製做上面兩個角 大小爲 10px 線條爲 2px solid #02a6b5
- 新加一個盒子before 和after 製做下側兩個角 寬度高度爲 10px
.panel {
position: relative;
height: 3.875rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: url(../images/line\(1\).png);
padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
&::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&::after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&::after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
}
}
07-柱形圖 bar 模塊(佈局)
- 標題模塊 h2 高度爲 48px 文字顏色爲白色 文字大小爲 20px
- 圖標內容模塊 chart 高度 240px
- 以上能夠做爲panel公共樣式部分
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 400;
}
.chart {
height: 3rem;
background-color: pink;
}
08-中間佈局
- 上面是no 數字模塊
- 下面是map 地圖模塊
- 數字模塊 no 有個背景顏色 rgba(101, 132, 226, 0.1); 有個15像素的內邊距
- 注意中間列 column 有個 左右 10px 下 15px 的外邊距
- no 模塊裏面上下劃分 上面是數字（no-hd) 下面 是 相關文字說明(no-bd)
- no-hd 數字模塊 有一個邊框 1px solid rgba(25, 186, 139, 0.17)
- no-hd 數字模塊 裏面分爲兩個小li 每一個小li高度爲 80px 文字大小爲 70px 顏色爲 #ffeb7b 字體是圖標字體 electronicFont
- no-hd 利用 after 和 before製做2個小角， 邊框 2px solid #02a6b5 寬度爲 30px 高度爲 10px
- 小豎線 給 第一個小li after 就能夠 1px寬 背景顏色爲 rgba(255, 255, 255, 0.2); 高度 50% top 25% 便可
- no-bd 裏面也有兩個小li 高度爲 40px 文字顏色爲 rgba(255, 255, 255, 0.7) 文字大小爲 18px 上內邊距爲 10px
/* 聲明字體*/
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
地圖模塊製做：git
- 地圖模塊高度爲 810px 裏面包含4個盒子 chart 放圖表模塊 球體盒子 旋轉1 旋轉2
- 球體圖片模塊 map1 大小爲 518px 要加背景圖片 由於要縮放100% 定位到最中央 透明度 .3
- 旋轉1 map 2 大小爲 643px 要加背景圖片 由於要縮放100% 定位到中央 透明度 .6 作旋轉動畫 利用z-index壓住球體
- 旋轉2 map3 大小爲 566px 要加背景圖片 由於要縮放100% 定位到中央 旋轉動畫 注意是逆時針
<div class="no">
<div class="no-hd">
<ul>
<li>125811</li>
<li>104563</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>前端需求人數</li>
<li>市場供應人數</li>
</ul>
</div>
</div>
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
中間樣式github
/* 聲明字體*/
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
.no {
background: rgba(101, 132, 226, 0.1);
padding: 0.1875rem;
.no-hd {
position: relative;
border: 1px solid rgba(25, 186, 139, 0.17);
&::before {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
top: 0;
left: 0;
}
&::after {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
}
ul {
display: flex;
li {
position: relative;
flex: 1;
text-align: center;
height: 1rem;
line-height: 1rem;
font-size: 0.875rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: electronicFont;
font-weight: bold;
&:first-child::after {
content: "";
position: absolute;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
right: 0;
top: 25%;
}
}
}
}
.no-bd ul {
display: flex;
li {
flex: 1;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.225rem;
color: rgba(255, 255, 255, 0.7);
padding-top: 0.125rem;
}
}
}
.map {
position: relative;
height: 10.125rem;
.chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 10.125rem;
width: 100%;
}
.map1,
.map2,
.map3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../images/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}
.map2 {
width: 8.0375rem;
height: 8.0375rem;
background-image: url(../images/lbx.png);
opacity: 0.6;
animation: rotate 15s linear infinite;
z-index: 2;
}
.map3 {
width: 7.075rem;
height: 7.075rem;
background-image: url(../images/jt.png);
animation: rotate1 10s linear infinite;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
}
09-Echarts-介紹
常見的數據可視化庫：ajax
- 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，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
大白話：apache
官網地址：https://www.echartsjs.com/zh/...
10-Echarts-體驗
官方教程：五分鐘上手ECharts
- 下載echarts https://github.com/apache/inc...
使用步驟：
- 引入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);
11-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]
}
]
};
12- 柱狀圖圖表（兩大步驟）
- 官網找到相似實例， 適當分析，而且引入到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();
});
13-柱狀圖2定製
- 官網找到相似實例， 適當分析，而且引入到HTML頁面中
- 根據需求定製圖表
需求1： 修改圖形大小 grid
// 圖標位置
grid: {
top: "10%",
left: "22%",
bottom: "10%"
},
需求2： 不顯示x軸
xAxis: {
show: false
},
需求3： y軸相關定製
- 不顯示y軸線和相關刻度
//不顯示y軸線條
axisLine: {
show: false
},
// 不顯示刻度
axisTick: {
show: false
},
- y軸文字的顏色設置爲白色
axisLabel: {
color: "#fff"
},
需求4： 修改第一組柱子相關樣式（條狀）
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];
}
},
需求5： 修改第二組柱子的相關配置（框狀）
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
},
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
需求6： 給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"
}
}
}
],
需求7： 設置兩組柱子層疊以及更換數據
// 給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],
完整代碼：
// 柱狀圖2
(function() {
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. 實例化對象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和數據
var option = {
grid: {
top: "10%",
left: "22%",
bottom: "10%"
// containLabel: true
},
// 不顯示x軸的相關信息
xAxis: {
show: false
},
yAxis: [
{
type: "category",
inverse: true,
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// 不顯示y軸的線
axisLine: {
show: false
},
// 不顯示刻度
axisTick: {
show: false
},
// 把刻度標籤裏面的文字顏色設置爲白色
axisLabel: {
color: "#fff"
}
},
{
data: [702, 350, 610, 793, 664],
inverse: true,
// 不顯示y軸的線
axisLine: {
show: false
},
// 不顯示刻度
axisTick: {
show: false
},
// 把刻度標籤裏面的文字顏色設置爲白色
axisLabel: {
color: "#fff"
}
}
],
series: [
{
name: "條",
type: "bar",
data: [70, 34, 60, 78, 69],
yAxisIndex: 0,
// 修改第一組柱子的圓角
itemStyle: {
barBorderRadius: 20,
// 此時的color 能夠修改柱子的顏色
color: function(params) {
// params 傳進來的是柱子對象
console.log(params);
// dataIndex 是當前柱子的索引號
return myColor[params.dataIndex];
}
},
// 柱子之間的距離
barCategoryGap: 50,
//柱子的寬度
barWidth: 10,
// 顯示柱子內的文字
label: {
show: true,
position: "inside",
// {c} 會自動的解析爲 數據 data裏面的數據
formatter: "{c}%"
}
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
yAxisIndex: 1,
data: [100, 100, 100, 100, 100],
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
]
};
// 3. 把配置給實例對象
myChart.setOption(option);
})();
14-折線圖1 人員變化模塊製做
- 官網找到相似實例， 適當分析，而且引入到HTML頁面中
- 根據需求定製圖表
需求1： 修改折線圖大小，顯示邊框設置顏色：#012f4a，而且顯示刻度標籤。
// 設置網格樣式
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
show: true,// 顯示邊框
borderColor: '#012f4a',// 邊框顏色
containLabel: true // 包含刻度文字在內
},
需求2： 修改圖例組件中的文字顏色 #4c9bfd， 距離右側 right 爲 10%
// 圖例組件
legend: {
textStyle: {
color: '#4c9bfd' // 圖例文字顏色
},
right: '10%' // 距離右邊10%
},
需求3： x軸相關配置
- 刻度去除
- x軸刻度標籤字體顏色：#4c9bfd
- 剔除x座標軸線顏色（未來使用Y軸分割線)
- 軸兩端是不須要內間距 boundaryGap
xAxis: {
type: 'category',
data: ["週一", "週二"],
axisTick: {
show: false // 去除刻度線
},
axisLabel: {
color: '#4c9bfd' // 文本顏色
},
axisLine: {
show: false // 去除軸線
},
boundaryGap: false // 去除軸內間距
},
需求4： y軸的定製
- 刻度去除
- 字體顏色：#4c9bfd
- 分割線顏色：#012f4a
yAxis: {
type: 'value',
axisTick: {
show: false // 去除刻度
},
axisLabel: {
color: '#4c9bfd' // 文字顏色
},
splitLine: {
lineStyle: {
color: '#012f4a' // 分割線顏色
}
}
},
需求5： 兩條線形圖定製
- 顏色分別：#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,
}]
需求6： 配置數據
// 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
}
}]
需求7： 新增需求 點擊 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 按鈕一樣道理
完整代碼：
// 折線圖1模塊製做
(function() {
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]
]
}
];
// 1. 實例化對象
var myChart = echarts.init(document.querySelector(".line .chart"));
// 2.指定配置
var option = {
// 經過這個color修改兩條線的顏色
color: ["#00f2f1", "#ed3f35"],
tooltip: {
trigger: "axis"
},
legend: {
// 若是series 對象有name 值，則 legend能夠不用寫data
// 修改圖例組件 文字顏色
textStyle: {
color: "#4c9bfd"
},
// 這個10% 必須加引號
right: "10%"
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
show: true, // 顯示邊框
borderColor: "#012f4a", // 邊框顏色
containLabel: true // 包含刻度文字在內
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisTick: {
show: false // 去除刻度線
},
axisLabel: {
color: "#4c9bfd" // 文本顏色
},
axisLine: {
show: false // 去除軸線
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度線
},
axisLabel: {
color: "#4c9bfd" // 文本顏色
},
axisLine: {
show: false // 去除軸線
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割線顏色
}
}
},
series: [
{
name: "新增粉絲",
type: "line",
// true 可讓咱們的折線顯示帶有弧度
smooth: true,
data: yearData[0].data[0]
},
{
name: "新增遊客",
type: "line",
smooth: true,
data: yearData[0].data[1]
}
]
};
// 3. 把配置給實例對象
myChart.setOption(option);
// 4. 讓圖表跟隨屏幕自動的去適應
window.addEventListener("resize", function() {
myChart.resize();
});
// 5.點擊切換效果
$(".line h2").on("click", "a", function() {
// alert(1);
// console.log($(this).index());
// 點擊 a 以後 根據當前a的索引號 找到對應的 yearData的相關對象
// console.log(yearData[$(this).index()]);
var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// 須要從新渲染
myChart.setOption(option);
});
})();
15-折線圖2 播放量模塊製做
- 官網找到相似實例， 適當分析，而且引入到HTML頁面中
- 根據需求定製圖表
需求1： 更換圖例組件文字顏色 rgba(255,255,255,.5) 文字大小爲12
legend: {
top: "0%",
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
需求2： 修改圖表大小
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
需求3： 修改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)"
}
},
需求4： 修改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)"
}
}
需求5： 修改兩個線模塊配置(注意在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,
需求6： 更換數據
// 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],
16-餅形圖 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();
});
17-餅形圖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();
});
18-Echarts-社區介紹
社區就是一些，活躍的echart使用者，交流和貢獻定製好的圖表的地方。
- 在這裏能夠找到一些基於echart的高度定製好的圖表，至關於基於jquery開發的插件，這裏是基於echarts開發的第三方的圖表。
19-Echarts-map使用（擴展）
參考社區的例子：https://gallery.echartsjs.com... (模擬飛機航線)
實現步驟：
- 第一須要下載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'
}
}
},
總結：這例子是擴展案例，你們之後能夠多看看社區裏面的案例。
20- 最後約束縮放
/* 約束屏幕尺寸 */
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
相關文章
- 1. +pink老師的JS教程筆記+
- 2. 前端學習之HTML——by黑馬pink老師
- 3. 前端那點事01[pink老師]-HTML初識
- 4. 前端那點事02[pink老師]-HTML標籤（上）
- 5. b站pink老師前端代碼學習
- 6. 2019前端學習路線心得-黑馬程序員pink老師
- 7. Golang基礎之Map基礎習題——李文周老師
- 8. echarts基礎封裝
- 9. echarts 基礎講解
- 10. 4、pink老師的學習筆記——元素的顯示與隱藏
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • ☆基於Java Instrument的Agent實現
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
