V-Chart图表配置

Posted 2023-03-02

参考技术A

首先附上v-chart官网地址： https://v-charts.js.org/#/
安装方式：

全局引入：

以柱状图为例：
<ve-histogram :data="chartData" :extend="dataExtend" :settings="dataSettings" ></ve-histogram>

下面逐个说明每个属性该如何配置：

好了，来看一下基础配置生成的图表：

这是一个最简单的案例，意在理解metrics和dimension代表什么。但是我们实际请求接口返回的数据一定不是这样以中文名来作为key的，那么也就会用到别名。

注意： v-charts 更新到 v-charts-v2 以后， labelMap 需要替换成 labelAlias
它所对应的数据是：

至于extend，它能配置的东西太多了，所有eharts setOption里面的参数都可以在这里面配置，这样也就打破了v-chart的局限性，实现任何UI需求上所需要的样式。

下面将对 ve-histogram 柱形图， ve-ring 环形图， ve-bar 条形图，分别举具体的实例，来帮助大家理解extend里面的参数配置，来实现特殊需求的UI样式

在举例之前，罗嗦一下。有一些基础属性在做之前最好先阅读v-chart的开发文档，比如图表的宽度，高度配置，如果把图表装在外部容器中，宽度就是容器的宽度，高度也会自适应，不需要额外设置，但是会出现有一部分被遮挡的情况，比如y轴可能被挡住一些。
莫慌，这时候可以使用 :grid 这个参数（在这里要特别说明一下，v-chart是对echarts进行的封装，方便我们在vue中进行使用，但是它的文档并不是很全面，制作简易的图表没有问题，但是要满足设计图上的UI，光靠v-chart文档是完全不行的，还是得我们去echarts官网查找相关参数，依靠 :extend 额外配置属性回到熟悉的echarts配置上。这样就能满足echarts的所有功能。附上echarts各大参数地址： https://echarts.apache.org/zh/option.html#yAxis
） :grid 就是echarts的参数，在v-chart官网里是没有说明的，它可以理解为图表区域，使用方式如下：

``
言归正传，接下来举三个具体实例：

因为v-chart提供的双轴案例是需要至少两条柱子才能实现双轴，但UI要求只显示一根柱子，但是需要同时标名人数和百分比。所以，这里的思路是把两条柱子完全重叠在一起。

如果大家有其他好的案例，欢迎留言，共同学习！