前言

开启生长之旅！这是我参加「日新方案 12 月更文挑战」的第24天，点击查看活动详情

在完毕的卡塔尔世界杯八分之一决赛中，巴西队以4：1轻松打败韩国队，接连八届世界杯晋级八强，我的心境无比的激动，看着自己喜爱的球星，心里非常自豪。

开始创造本文的时分，满怀欢喜，隐约看到了内马尔举起了大力神杯。时刻定格在12月9日，竞赛的第124分钟，是的，巴西出局了，诸神黄昏之战送走了它的第一位客人，内马尔仰天大哭，他以满身伤痕换取舞者之名，魔笛之子也跑过去安慰他，他真的太不容易了。

在小组赛首轮巴西队2比0打败塞尔维亚队竞赛中，内马尔出战79分钟被侵略9次，创下本届世界杯截至目前单场被侵略次数的纪录。他下场后一度在巴西队的替补席上啜泣。

有人说是本钱阻碍了一群巴西舞者走向冠军得脚步，在点球大战中门将三次反方向扑倒，是真的被克罗地亚晃到了吗？明明知道克罗地亚是点球大战之王，为什么不首出压场？有人说他们小看了一群能拼命的人，输在了高姿态上。

是的我说你们说的都对，当输的时分，就站在道德制高点去职责，赢的时分，就站在赞许之山去夸赞，否定他们现在绿茵地里的尽力。他们也真的想赢啊，高举大力神杯，跳起成功之舞。感慨之词就不多言辞了。

我统计了历年来巴西队战绩，并对数据进行处理，运用Echarts图表剖析。咱们来研究下图表详细是怎样完成的？

一、源数据

我经过网上的数据进行整理，详细如下：

[
	{ 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>

三、背景图完成

能够看到图表运用了背景图片，那么详细是怎样完成呢？主要经过graphic完成，可配置以下内容完成背景图片，可是背景图片必须是以https开头才干显现

       graphic: [
            {
                // 图形元素类型
                type: "image", 
                // 更新或删去图形元素时指定更新哪个图形元素，假如不需要用能够疏忽。
                id: "logo", 
                 // 根据父元素进行定位   （0%）, 假如bottom的值是 0，也能够删去该bottom特点值。
                bottom: "13%",
                left: "6%",
                // 层叠
                z: 0, 
                // 决议此图形元素在定位时，对本身的围住盒计算方法
                bounding: "all", 
                style: {
                    image: "&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编码",
             }

五、线条区域渐进色

经过areaStyle设置区域渐渐色

    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轴坐标显现的数据，数组类型
  • axisLine：设置x轴的轴线
    • show：true（设置显现）
    • lineStyle：设置轴线的款式
      • color：色彩
      • width：宽度
      • type：线条类型
  • axisLabel：设置x轴文字款式
    • textStyle：文字款式，目标类型
      • show：是否展示
      • fontSize：字体巨细
      • color：文字色彩
    • formatter：自定义文字，后边跟一个函数，默认会一个参数，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,
                },
            },
        },

写在最终

我想引证嬛嬛的话：世间的一差二错从未停歇，都是寻常。诸神黄昏，每一场都会有脱离的老将，期待下一届王者归来！