篇二、vue中 v-charts 的图表数据如何从后台获取

电玩女神 2023-07-01 08:46 8阅读 0赞

上篇讲到：如何[如何将 v-charts 引入到项目中][v-charts]

此篇介绍如何将引入的v-charts 接入后端数据；

大差不差，无非就是调用后台接口，ajax获取数据 对吧；

那如果还有不清楚的小伙伴，可以接着往下看，虽然讲解的可能不够仔细，但是我相信，粘贴复制的活儿你们肯定乐意干；走你

事先申明，本实例是基于前端分离的一个项目，前端使用的vue框架，

那好，先是在页面选用你自己想要展示的图表样式；

以下，我就以折线图为例：

页面上如何引用对应的组件方式，可去官文上对应查找；[https://v-charts.js.org/\#/line][https_v-charts.js.org_line]

对应不同的图表，有不同的引用标签体，比如折线图，是以<ve-line></ve-line>；柱状图：<ve-histogram></ve-histogram>等等

页面上引用：

<el-tab-pane label="调用趋势图" name="second">
        <ve-line :data="chartData" :settings="chartSettings"></ve-line>
    </el-tab-pane>

对于项目上前端是使用vue框架的小伙伴，上述代码是不是再熟悉不过了，那么对于其他不曾使用过vue或者项目上使用其他的前端框架的小伙伴，总之就一句话，都是对 columns集合 中你所定义的字段赋值就行了，万变不离其宗，原理如此，想必说得这么清楚，加上上述我是如何在vue中如何对columns的赋值 方式，阿怂相信，小伙伴都会玩的明白的！

> 我们遇到什么困难，也不要怕，微笑着面对他，消除恐惧的最好办法就是面对恐惧，坚持，才是胜利，加油，奥利给！！！

> 注释：
> 
>  *  columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标
> 
> 比如：我的维度就是'dayTime'、字标就是‘每日调用总数趋势图’   // columns: \['dayTime', '每日调用总数趋势图'\]
> 
>  *  rows 中是数据的集合
>  *  xAxisType  横轴的数据类型   可选值有: category, value, time, log
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>xAxisType</td> 
>    <td>横轴的数据类型</td> 
>    <td>string</td> 
>    <td>可选值: category, value, time, log</td> 
>   </tr> 
>  </tbody> 
> </table>

上述代码实际界面展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]。

详情可查看官网：[https://v-charts.js.org/\#/data][https_v-charts.js.org_data]，一切以官文为主；

我这篇只是辅助性的帮助大家如何在实际页面上怎么通过访问后端接口所返回的数据接入v-charts 图表中，最终目的以该图表的样式展示出来；毕竟官文档上都是直接定义的死数据，在我看来，如果对于刚接触的小伙伴来说，肯定跟我当时一样，不知道怎么通过接口返回的数据接入到实际图表并且展示出来，对吧？。虽然这只是一个简单的对折线图所演示的实例，其实换做其他的图表都是一样的，只要准确给columns 中你所定义好的维度和指标赋上值，就行，就这么简单，没啥难度，唯独对于引入高德地图那一块由于项目上不需要还有加上自己的懒惰，暂时未曾研究，日后一定花时间弥补上给大伙儿出出相关的文章；

以上就是对引入 v-charts 组件的怎么接入后端接口返回数据接入的全过程了，如果对上述或者代码上有何疑问，欢迎下方给阿怂留言；

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢怂怂写的文章，就给阿怂点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言，阿怂看到一定会极力给予宁最满意的答复。

[v-charts]: https://blog.csdn.net/weixin_43970743/article/details/104051430
[https_v-charts.js.org_line]: https://v-charts.js.org/#/line
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200120153103713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw==,size_16,color_FFFFFF,t_70
[https_v-charts.js.org_data]: https://v-charts.js.org/#/data