v-charts使用过程中的技巧及遇到的问题

v-charts

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

官方文档:https://v-charts.js.org/#/

主题的使用

由于 v-charts是基于 ECharts 开发的框架,所以我们可以使用 ECharts 原生的一些主题,或者可以自定义一个主题
定制主题地址:
https://echarts.baidu.com/the...

那么我们如何使用呢?
比方说我这里自己定制了一个图表的主题
点击左上角的下载,复制 JSON 格式的文本内容

为了后续开发的便捷性,我们可以把所有的 JSON 文件都放在同一的文件夹下

然后给主题名赋值

 this.custheme = require("./theme/dark.json");

最后使用 theme 属性,给图表设置主题

这样我们就成功使用了主题功能

关于为什么图表的默认初始动画没有显示?

问题描述:在刷新浏览器之后,所有的默认图表都是会有初始动画,但是我在使用环图的过程中发现没有初始动画了
问题解决:
在后续的问题查找过程中,发现有一个属性删除后动画就显示出来了

:judge-width="true" 

后来去查了官方文档,发现judge-width 属性是用来控制图表宽高的
这个值默认为 false,如果设置为 true ,那么图表的宽度高度才会随着父元素的宽高更改而变化

关于如何自定义图表标签

如下图:这里默认显示的标签是维度,那么我如何自定义这里的内容呢?

我们自定义图表的settings属性
setting 属性中有一个 label 属性规定标签

  this.chartSettings = {
      label: {
        normal: {
          formatter: params => {
            return `${params.data.name}  ${this.chartData.columns[1]}:${
              params.data.value
            }`;
          }
        }
      }
    };

然后进行传参

<ve-ring :data="chartData" :settings="chartSettings"></ve-ring>

然后我们就可以发现我们的标签已经达到了我们的预期效果

我们不妨把 params 参数打印下来看一下

我们可以选取自己想要展示的参数,比如我这里选取了data.name对应的维度和data.value对应的指标

extends属性设置无效?

如何你和我一样,给图表设置 extends 属性,不管怎么设置都不展示在页面上,可以考虑使用afterConfig属性

比如我想要条形图的 x 轴标签旋转一定角度以互相不遮挡

注意这里的xAxis是一个数组,如果'[0]'被省略了,设置不生效
然后我们在图表中使用 afterConfig 属性