2023vue2用vue-echarts实现图表

【简单】学会在vue2用vue-echarts实现各种图表

️背景：

​ 前段时间基于工作需要学习了vue-echarts，一开始各种论坛到处找，但发现令人满意的“流畅”实现教程很少，最终只能自己去看官方文档，一步步实现，终于在花费几个小时后实现人生中的第一个图表了，并且实现后非常很有成就感，能够应用这么炫酷的图表到页面中，真的太爽了，而且还可以自己挑选各种类型的图表，哈哈，所以今天来分享这丝滑的实现方式给各位（方法参考于官方文档-按需引入方式），保证够简单步骤够清晰，学会之后想用什么图表就用什么图表~

最终效果

⚡按照本文章的步骤，最终可实现官方的各种图表（非常简单暴力）。

实现步骤

✨️为了方便理解，我们采用一个干净的vue2项目来逐步实现。

0. 干净的页面

0️⃣首先，这是一个干净的vue2页面：

1. 安装包

1️⃣然后我们安装所需要的包：npm i echarts vue-echarts @vue/composition-api -S

概念：

• echarts：前端最常用的图表库；
• vue-echarts：基于echarts的封装工具，方便开发者更轻松的在vue2中使用echarts；
• @vue/composition-api：是vue的官方插件，安装后我们就可以使用vue3里面的Composition API功能了。

️说明：

1. 使用vue-echarts就必须得安装echarts，你可以理解为vue-echarts是echarts的一个工具，让我们在vue中可以更加方便的使用echarts；

2. @vue/composition-api是vue-echarts官方文档中要求使用的：

   “要在Vue2（<2.7.0）下使用 vue-echarts，需要确保 @vue/composition-api 已经安装”

   因为官方示例代码中是需要用到这个插件的，所以我们就按照要求安装吧，这就是一个扩展使用vue3功能的插件而已，好理解。

2. 格式化页面

2️⃣接着开始格式化页面（核心步骤）：

1. 先引入必备的插件，并且我们预留一行（注释处），后面需要在这一行额外导入组件：

   // 这一行后续还需要放置导入代码
   import VChart, { THEME_KEY } from "vue-echarts";
   import { ref } from "vue";
   

   ️说明：VChart是图表的组件，后面以的形式放置到结构上，而THEME_KEY则是主题颜色，在下一步中用这个对象去配置主题颜色。

   完整代码

2. 然后配置components、provide、setup(){}（后两个是@vue/composition-api带来的，属于Vue3的新特性）：

   export default {
       ...
       components:{
           VChart,
       },
       provide: {
           // 主题颜色（white/dark）
           [THEME_KEY]: "white",
       },
       setup(){
           const option = ref('此处放置option对象');
       	return { option };
       }，
       ...
   }
   

   ️说明：

   • components注册VChart组件；
   • provide对象中配置主题颜色，引入THEME_KEY这个对象作为键名，然后就可以设置值了：white（白色）和dark（黑色）；
   • setup(){}中用于配置option配置对象，配置对象将决定图表长啥样，其中我用字符串预留了一处位置，即'此处放置option对象'这个地方，后面将用于放置option配置项。

   完整代码

3. 放置组件，以及设置下元素样式：

   <v-chart class="chart" :option="option" autoresize />
   

   ️说明：v-chart是图表的组件元素、option是它的数据配置对象、autoresize是设定图表跟随页面尺寸自动缩放。

   完整代码

3. 挑选图表

3️⃣经过上面的关键步骤后，我们就初始化配置好了页面，当然现在页面还无法显示出图表，接下来我们就可以开始挑选图表了，进入echarts的官网示例处：点我点我，然后我们就到了一个“熟悉”的页面（前面提到过），好的，然后我们挑选一个最简单的：

点击进来之后，我们可以看到官方居然为我们提供了这个图表的option配置对象！所以我们先将这个配置对象复制，然后粘贴到我们前面准备的'此处放置option对象'这个地方：

{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}

⚙️这些是配置项哦，现在先不管各项配置是干嘛的，复制就完啦（最后面再介绍是干嘛的：先实现，再理解）！

完整代码

4. 最终配置

4️⃣将option配置对象复制进来之后，就差最后一步啦！此时我们进入vue-echarts官网的导入代码生成器点我点我（这个东西能帮我们节省很多时间，根据option对象智能生成需要导入的组件代码）：

进来之后我们将刚才复制的option配置对象粘贴到这个页面左侧的地方，然后就会发现右边出现了代码，于是我们再点击右边的Copy按钮，就得到了相应的组件导入代码了~

然后接下来，就只真的差最后最后一步了！还记得之前我们预留了一行注释吗？没错，我们将导入的代码粘贴到那里，就okkkkkkkk啦！！！

实现效果如图：

import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

use([GridComponent, LineChart, CanvasRenderer])

这些是导入的图表组件，属于按需引入。

完整代码

5. OK

至此，我们就成功实现人生中的第一个图表啦（对于我来说是这样的）~

学习更多

通过上面的步骤例子，我们学会了如何实现一个图表，感觉是不是很简单很暴力（得益于贴心的echarts和vue-echarts），没错，我也是这么觉得的~不过呢，光这样子肯定还不够满足业务需求，所以下面我还会为各位介绍下关于echarts和vue-echarts的更多学习与扩展。

如何设定图表样式

设定样式应该是最简单的事情了吧？其实我们只需要给元素的父级元素写上样式就可以限制图表的大小了，并且还可以通过将THEME_KEY修改为dark将图表变成暗黑系主题哟（还可以到官网寻找更多主题哦）：

provide: {
  // 主题颜色（white/dark）
  [THEME_KEY]: "dark",
},

如何了解配置项

⚙️图表的配置项，其实都非常简单（3D除外），为什么这么说呢？因为官方文档全都给你写得明明白白的！我们可以通过echarts或vue-echarts的官方文档来了解各个配置项（只有部分配置项需要参考vue-echarts的文档，例如THEME_KEY设置主题颜色，而大部分配置项仍是参考echarts的），如下图：

可以看到，官方文档的配置项是相当的齐啊，可以说无论什么配置，只要你想知道，你就可以从官方文档中找到它的解释，因此我说配置项非常简单是合理的（3D除外），官方文档链接放文章最底部了~

如何实现动态更新数据

前面我们的图表数据都是一开始写死的，而动态更新图表的数据，却是图表中最常见的需求了，所以下面，我们就来实现动态更新数据：

1. 首先，图表的配置项通常是option.series[0].data这一个，如图：

   

2. 但是这个option是放在这个什么setup(){}里面的，我不懂Vue3该怎么做？哦，没关系，你只需要把它当成是Vue2里面的data就行了，因此，事情变得非常简单了，直接赋值就行了~这里我就用一个定时器来简单示例一下：

   mounted() {
     setTimeout(()=>{
       this.option.series[0].data = [999,1,2,3,4,5,666]
     },2000)
   },
   

   ⏰️我们在mounted这个钩子加上一个定时器，2秒后，将数据更改为[999,1,2,3,4,5,666]，效果如下图：

   

3. 考虑到图表业务通常都是一开始没有数据，然后通过接口获取数据后，再渲染图表数据的，因此，这里我们还需要实现下这一种业务场景：

   • 首先，一开始没有数据，也就意味着一开始图表数据为空，因此我们将配置项的数据全改为null：

     const option = ref({
       xAxis: {
         type: "category",
         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
       },
       yAxis: {
         type: "value",
       },
       series: [
         {
           data: [null, null, null, null, null, null, null],
           type: "line",
         },
       ],
     });
     

     然后效果如下图：

     

   • 通过上图，我们可以看到数据一开始为空了，在2秒后才出现的数据，但是呢，这样的用户体验十分不好，一开始容易让用户以为是卡了，没有任何的提示，正常业务逻辑都是一开始图表加上提示，比如正在加载中之类的提示，然后等数据出现了之后，图表才真正的显示出来，不过，这种常见的需求，echarts官方早就替我们考虑到了，因此我们可以直接通过配置项来实现：

     • 定义变量，并给元素加上loading属性：

       data() {
         return {
           loadingIsShow:true,
         };
       },
       

       <v-chart class="chart" :option="option" autoresize :loading="loadingIsShow"/>
       

     • 引入加载提示的配置项键名对象并配置：

       import VChart, { THEME_KEY,LOADING_OPTIONS_KEY } from "vue-echarts";
       

       provide: {
         // 主题颜色（white/dark）
         [THEME_KEY]: "dark",
         // 加载提示的配置项
         [LOADING_OPTIONS_KEY]:{
           text:'正在加载中'
         }
       },
       

     • 在2秒后隐藏加载提示：

       mounted() {
         setTimeout(()=>{
           this.option.series[0].data = [999,1,2,3,4,5,666]
           this.loadingIsShow = false
         },2000)
       },
       

       最终效果如图：

       

4. 这样就成功实现动态数据更新以及显示加载提示了~

如何使用其他图表

从一开始的例子中，我们实现了一个最简单的图表，而从echarts官方的示例大全中，其实还有非常非常多各种各样的复杂图表，所以呢，我们想要什么图表就可以直接复制它的option配置对象去配置，除了有一些非常复杂的3D地图图表除外（可能需要花费一部分时间去了解复杂的配置项才可以实现），其实大部分图表呢，都是可以按照上面的配置步骤去实现的，这里我就从官方示例中挑选了几个比较炫酷的图表一起实现到了单个页面中，如下图：

⚠️注意：部分图表（就是那个3D地球）的配置项可能会有点复杂，导入代码生成器无法正确生成，需要自己去琢磨研究官方文档的配置项哦，这里就不详细介绍了~

是不是很酷，快点自己去动手实现一下吧，然后就可以在小伙伴面前装逼炫耀了_哈哈哈

还是放上完整代码吧，以供参考：

文档链接

最后，放上echarts和vue-echarts的官方中文文档链接：

• echarts：https://echarts.apache.org/zh/index.html
• vue-echarts：https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md
• vue-echarts导入代码生成器：https://vue-echarts.dev/#codegen

第一次写这么长的文章，按照自己喜欢的风格排版了，嘻嘻