个人主页：不叫猫先生
‍♂️作者简介：前端领域新星创作者、华为云享专家、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
系列专栏：vue3从入门到精通
个人签名：不破不立

目录

    • 一、源数据
    • 二、安装Echarts
    • 三、背景图实现
    • 四、拐点自定义
    • 五、线条区域渐进色
    • 六、x轴拖拽
    • 七、X轴设置
    • 八、y轴设置
    • 写在最后

在刚刚结束的卡塔尔世界杯八分之一决赛中，巴西队以4：1轻松战胜韩国队，连续八届世界杯晋级八强，我的心情无比的激动，看着自己喜欢的球星，内心十分骄傲。
我统计了历年来巴西队战绩，并对数据进行处理，使用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: "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" />