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