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ù)據(jù)進行處理，使用Echarts圖表分析。我們來研究下圖表具體是怎么實現(xiàn)的？
一、源數(shù)據(jù)
我通過網(wǎng)上的數(shù)據(jù)進行整理，具體如下：
[
{ 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",
// 根據(jù)父元素進行定位 （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：網(wǎng)格線
- show：false （去除網(wǎng)格線）
data：x軸坐標顯示的數(shù)據(jù)，數(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圖表分析的資料請關注腳本之家其它相關文章！
相關文章
好多情況下flash會出現(xiàn)需要單擊激活，不過一般新版本中直接插入隨然不用激活但代碼較多，下面的方法是個函數(shù)，其實代碼也不少，不過思路很好，大家可以看看。2009-03-03
從訪問速度上來看,一般要比放于國內的網(wǎng)站慢2-3倍,所以便想辦法對網(wǎng)站做了一些簡單的優(yōu)化,比如使用緩存系統(tǒng)來提升網(wǎng)站頁面訪問速度2017-04-04
這篇文章主要介紹了JS實現(xiàn)移動端雙指縮放和旋轉方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
JavaScript是一種面向對象的語言,而繼承是面向對象編程的一個重要特性,在JavaScript中,繼承的實現(xiàn)方式有多種,本文將介紹javascript類的繼承的實現(xiàn),感興趣的朋友一起看看吧2023-10-10
JS實現(xiàn)統(tǒng)計字符串中字符出現(xiàn)個數(shù)及最大個數(shù)功能示例
這篇文章主要介紹了JS實現(xiàn)統(tǒng)計字符串中字符出現(xiàn)個數(shù)及最大個數(shù)功能,結合實例形式分析了javascript字符串遍歷、統(tǒng)計相關操作技巧,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JavaScript使表單中的內容顯示在屏幕上的方法,涉及javascript針對表單元素操作的相關技巧,需要的朋友可以參考下2015-06-06
js漢字排序問題 支持中英文混排，兼容各瀏覽器，包括CHROME
這套排序機制同時兼容了IE和ff 可以實現(xiàn)所有瀏覽器下排序的統(tǒng)一哦2011-12-12
理解JAVASCRIPT中hasOwnProperty()的作用
JavaScript中hasOwnProperty函數(shù)方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性2013-06-06
這篇文章主要介紹了微信小程序實現(xiàn)密碼顯示與隱藏的睜眼閉眼功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
遞歸是算法中一個重要的解法,因此,有必要單拎出來講講,所以下面這篇文章主要給大家介紹了關于JavaScript遞歸經典案例題的相關資料,需要的朋友可以參考下2021-07-07