欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Echarts圖表分析巴西隊(duì)歷年戰(zhàn)績(jī)實(shí)例詳解

 更新時(shí)間：2022年12月20日 14:18:25   作者：貓先生c  
這篇文章主要為大家介紹了Echarts圖表分析巴西隊(duì)歷年戰(zhàn)績(jī)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

在結(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)文章

最新評(píng)論