Echarts圖表分析巴西隊歷年戰(zhàn)績實例詳解
引言
在結束的卡塔爾世界杯八分之一決賽中，巴西隊以4：1輕松戰(zhàn)勝韓國隊，連續(xù)八屆世界杯晉級八強，我的心情無比的激動，看著自己喜歡的球星，內心十分驕傲。
開始創(chuàng)作本文的時候，滿懷欣喜，隱隱看到了內馬爾舉起了大力神杯。時間定格在12月9日，比賽的第124分鐘，是的，巴西????出局了，諸神黃昏之戰(zhàn)送走了它的第一位客人，內馬爾仰天大哭，他以滿身傷痕換取舞者之名，魔笛之子也跑過去安慰他，他真的太不容易了。
在小組賽首輪巴西隊2比0擊敗塞爾維亞隊比賽中，內馬爾出戰(zhàn)79分鐘被侵犯9次，創(chuàng)下本屆世界杯截至目前單場被侵犯次數(shù)的紀錄。他下場后一度在巴西隊的替補席上啜泣。
有人說是資本阻礙了一群巴西舞者走向冠軍??得腳步，在點球大戰(zhàn)中門將三次反方向撲倒，是真的被克羅地亞晃到了嗎？明明知道克羅地亞是點球大戰(zhàn)之王，為什么不首出壓場？有人說他們輕視了一群能拼命的人，輸在了高姿態(tài)上。
是的我說你們說的都對，當輸?shù)臅r候，就站在道德制高點去職責，贏的時候，就站在贊美之山去夸贊，否認他們現(xiàn)在綠茵地里的努力。他們也真的想贏啊，高舉大力神杯，跳起勝利之舞。感慨之詞就不多言論了。
我統(tǒng)計了歷年來巴西隊戰(zhàn)績，并對數(shù)據進行處理，使用Echarts圖表分析。我們來研究下圖表具體是怎么實現(xiàn)的？
一、源數(shù)據
我通過網上的數(shù)據進行整理，具體如下：
[
{ name: "1930年第1屆", score: "第一輪", rank: "6" },
{ name: "1934年第2屆", score: "第一輪", rank: "14" },
{ name: "1938年第3屆", score: "季軍", rank: "3" },
{ name: "1950年第4屆", score: "亞軍", rank: "2" },
{ name: "1954年第5屆", score: "八強", rank: "5" },
{ name: "1958年第6屆", score: "冠軍", rank: "1" },
{ name: "1962年第7屆", score: "冠軍", rank: "1" },
{ name: "1966年第8屆", score: "第一輪", rank: "1" },
{ name: "1970年第9屆", score: "冠軍", rank: "1" },
{ name: "1974年第10屆", score: "殿軍", rank: "4" },
{ name: "1978年第11屆", score: "季軍", rank: "3" },
{ name: "1982年第12屆", score: "第二輪", rank: "5" },
{ name: "1986年第13屆", score: "八強", rank: "5" },
{ name: "1990年第14屆", score: "十六強", rank: "9" },
{ name: "1994年第15屆", score: "冠軍", rank: "1" },
{ name: "1998年第16屆", score: "亞軍", rank: "2" },
{ name: "2002年第17屆", score: "冠軍", rank: "1" },
{ name: "2006年第18屆", score: "八強", rank: "5" },
{ name: "2010年第19屆", score: "八強", rank: "6" },
{ name: "2014年第20屆", score: "殿軍", rank: "4" },
{ name: "2018年第1屆", score: "八強", rank: "6" },
]
最終效果如下：
二、安裝Echarts
安裝：
yarn add echarts -S
引入使用：
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
onMounted(() => {
var myChart = echarts.init(document.getElementById("trendLIne-content"));
myChart.setOption({ })
})
</script>
三、背景圖實現(xiàn)
可以看到圖表使用了背景圖片，那么具體是怎么實現(xiàn)呢？主要通過graphic實現(xiàn)，可配置以下內容實現(xiàn)背景圖片，但是背景圖片必須是以https開頭才能顯示
graphic: [
{
// 圖形元素類型
type: "image",
// 更新或刪除圖形元素時指定更新哪個圖形元素，如果不需要用可以忽略。
id: "logo",
// 根據父元素進行定位 （0%）, 如果bottom的值是 0，也可以刪除該bottom屬性值。
bottom: "13%",
left: "6%",
// 層疊
z: 0,
// 決定此圖形元素在定位時，對自身的包圍盒計算方式
bounding: "all",
style: {
image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc2.hoopchina.com.cn%2Fuploads%2Fstar%2Fevent%2Fimages%2F200127%2Fb8b1f24f0c8fc6f860ce4a7c12054cb49b56654e.jpg&refer=http%3A%2F%2Fc2.hoopchina.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673012465&t=b8a96c59fca94f5e18c660b3c2a6d616",
width: 1055,
height: 540,
},
},
],
四、拐點自定義
設置symbol為base64編碼的圖片，并設置通過symbolSize設置大小
series: [
{
symbolSize: 20,
symbol: "image://+base64編碼",
}
五、線條區(qū)域漸進色
通過areaStyle設置區(qū)域漸漸色
areaStyle: {
normal: {
opacity: 0.3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "red",
},
{
offset: 1,
color: "#fff",
},
]),
},
},
六、x軸拖拽
設置自定義拖拽的icon為legendSvg，通過dataZoom屬性設置拖拽的樣式
const legendSvg = {
line: "path://M-0.000,-0.000 L10.000,-0.000 L10.000,3.000 L-0.000,3.000 L-0.000,-0.000 Z",
};
dataZoom: {
show: true,
icon: legendSvg.line,
realtime: true,
brushSelect: false, //取消拖動手柄
start: 0,
end: 70,
height: 24,
handleSize: "80%",
// handleIcon: 'image://' + img, //自定義拖拽圖標
handleIcon:
"path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z", //icon圖標
backgroundColor: "#F5F7FA",
},
七、X軸設置
x軸屬性解釋具體如下：
xAxis ：x軸設置
- name：單位
- splitLine：網格線
- show：false （去除網格線）
data：x軸坐標顯示的數(shù)據，數(shù)組類型
axisLine：設置x軸的軸線
- show：true（設置顯示）
- lineStyle：設置軸線的樣式
- color：顏色
- width：寬度
- type：線條類型
axisLabel：設置x軸文字樣式
- textStyle：文字樣式，對象類型
- show：是否展示
- fontSize：字體大小
- color：文字顏色
formatter：自定義文字，后面跟一個函數(shù)，默認會一個參數(shù)，x坐標的值
xAxis: {
type: "category",
splitLine: {
show: false,
},
interval: "auto", // x軸間距
data: data.map((item) => item.name),
axisTick: {
//刻度線
show: false,
},
axisLine: { ,
show: true, // 把x軸從實線變成虛線
lineStyle: {
// 設置x軸線條樣式的顏色
color: "#999",
width: 3,
type: "solid",
},
},
axisLabel: {
textStyle: {
color: "#000", //坐標軸字顏色
fontSize: 14,
},
},
},
八、y軸設置
y軸的屬性與x軸基本相同
yAxis: {
type: "value",
name: "排名",
splitLine: {
show: false,
},
textStyle: {
color: "#000", //坐標軸字顏色
},
scale: true,
max: 17,
min: 0,
splitNumber: 20,
axisLine: {
show: true,
lineStyle: {
// 設置x軸線條樣式的顏色
color: "#999",
width: 3,
type: "solid",
},
},
axisLabel: {
textStyle: {
color: "#000", //坐標軸字顏色
fontSize: 14,
},
},
},
寫在最后
我想引用嬛嬛的話：世間的陰差陽錯從未停歇，都是尋常。諸神黃昏，每一場都會有離開的老將，期待下一屆王者歸來！
以上就是Echarts圖表分析巴西隊歷年戰(zhàn)績實例詳解的詳細內容，更多關于Echarts圖表分析的資料請關注腳本之家其它相關文章！
相關文章
用戶在使用系統(tǒng)時，會有很多表單的操作然而很多表單就會很長,所以就需要一個返回頁面頂部的top按鈕啦，于是自己寫了一個，喜歡的朋友可以參考下2013-08-08
這篇文章主要為大家詳細介紹了小程序實現(xiàn)簡單列表功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
設計模式(Design pattern)是解決軟件開發(fā)某些特定問題而提出的一些解決方案也可以理解成解決問題的一些思路,下面這篇文章主要給大家介紹了關于JavaScript設計模式之策略模式的相關資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了基于JS繪制2021的煙花效果，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
這篇文章主要介紹了JS判斷兩個對象內容是否相等的方法,結合具體實例形式分析了javascript針對字符串、數(shù)組及對象的相關判斷技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了JS實現(xiàn)頁面跳轉并傳值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
深淺拷貝知識在我們的日常開發(fā)中還算是用的比較多,下面這篇文章主要給大家介紹了關于javaScript深拷貝和淺拷貝的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
JavaScript函數(shù)封裝隨機顏色驗證碼(完整代碼)
這篇文章主要介紹了JavaScript函數(shù)封裝隨機顏色驗證碼(完整代碼),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)幻燈片效果，文中安裝步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了Extjs 點擊復選框在表格中增加相關信息行 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07