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 屬性