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í)候,滿懷欣喜,隱隱看到了內(nèi)馬爾舉起了大力神杯。時(shí)間定格在12月9日,比賽的第124分鐘,是的,巴西????出局了,諸神黃昏之戰(zhàn)送走了它的第一位客人,內(nèi)馬爾仰天大哭,他以滿身傷痕換取舞者之名,魔笛之子也跑過(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)中門將三次反方向撲倒,是真的被克羅地亞晃到了嗎?明明知道克羅地亞是點(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: [ { // 圖形元素類型 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編碼", }
五、線條區(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)格線
- show:false (去除網(wǎng)格線)
data:x軸坐標(biāo)顯示的數(shù)據(jù),數(shù)組類型
axisLine:設(shè)置x軸的軸線
- show:true(設(shè)置顯示)
- lineStyle:設(shè)置軸線的樣式
- color:顏色
- width:寬度
- type:線條類型
axisLabel:設(shè)置x軸文字樣式
- textStyle:文字樣式,對(duì)象類型
- 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: { //刻度線 show: false, }, axisLine: { , show: true, // 把x軸從實(shí)線變成虛線 lineStyle: { // 設(shè)置x軸線條樣式的顏色 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軸線條樣式的顏色 color: "#999", width: 3, type: "solid", }, }, axisLabel: { textStyle: { color: "#000", //坐標(biāo)軸字顏色 fontSize: 14, }, }, },
寫在最后
我想引用嬛嬛的話:世間的陰差陽(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)文章
JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12JS實(shí)現(xiàn)統(tǒng)計(jì)字符串中字符出現(xiàn)個(gè)數(shù)及最大個(gè)數(shù)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)字符串中字符出現(xiàn)個(gè)數(shù)及最大個(gè)數(shù)功能,結(jié)合實(shí)例形式分析了javascript字符串遍歷、統(tǒng)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06JavaScript使表單中的內(nèi)容顯示在屏幕上的方法
這篇文章主要介紹了JavaScript使表單中的內(nèi)容顯示在屏幕上的方法,涉及javascript針對(duì)表單元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06js漢字排序問(wèn)題 支持中英文混排,兼容各瀏覽器,包括CHROME
這套排序機(jī)制同時(shí)兼容了IE和ff 可以實(shí)現(xiàn)所有瀏覽器下排序的統(tǒng)一哦2011-12-12理解JAVASCRIPT中hasOwnProperty()的作用
JavaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值,指出一個(gè)對(duì)象是否具有指定名稱的屬性2013-06-06微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02關(guān)于JavaScript遞歸經(jīng)典案例題詳析
遞歸是算法中一個(gè)重要的解法,因此,有必要單拎出來(lái)講講,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript遞歸經(jīng)典案例題的相關(guān)資料,需要的朋友可以參考下2021-07-07