本文基于巴西队历年世界杯战绩数据，详解使用Echarts进行可视化分析。内容涵盖背景图添加、拐点自定义图片、区域渐变填充以及X轴拖拽功能的实现。通过具体代码配置，展示如何优化图表视觉效果与交互体验，为前端开发者提供实用的Echarts高级应用案例。
引言
在刚刚结束的卡塔尔世界杯八分之一决赛中，巴西队以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
首先需要通过包管理器安装Echarts库：
yarn add echarts -S
在项目中引入并使用Echarts：
<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配置实现。具体而言，需要配置相关属性以显示背景图片，但需注意背景图片的URL必须以https开头才能正常渲染。
graphic: [
{
// 图形元素类型
type: "image",
// 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
id: "logo",
// 根据父元素进行定位 （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编码",
}
五、线条区域渐进色
通过配置areaStyle，可以设置线条下方区域的渐变色效果，增强图表的视觉层次感。
areaStyle: {
normal: {
opacity: 0.3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "red",
},
{
offset: 1,
color: "#fff",
},
]),
},
},
六、x轴拖拽
为了实现X轴的自定义拖拽功能，可设置拖拽图标为定义的SVG路径，并通过中的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,
},
},
},
写在最后
引用剧中台词：世间的阴差阳错从未停歇，都是寻常。诸神黄昏，每一场都会有离开的老将，期待下一届王者归来！
以上就是Echarts图表分析巴西队历年战绩实例详解的详细内容，更多关于Echarts图表分析的资料请关注本站其它相关文章！