v-chartsの使用中のテクニックと問題点

v-charts
echartsを使用してグラフを生成する場合、煩雑なデータ型変換や複雑な構成項目の修正がしばしば必要であり、v-chartsの出現はこの痛みを解決するためである.Vue 2に基づく.0とechartsパッケージのv-chartsグラフコンポーネントは、前後に友好的なデータフォーマットの簡単な構成項目を統一的に提供するだけで、一般的なグラフを簡単に生成できます.
公式ドキュメント:https://v-charts.js.org/#/
トピックの使用
v-chartsはEChartsに基づいて開発されたフレームワークであるため、EChartsのオリジナルのトピックを使用するか、トピックのカスタムトピックアドレスをカスタマイズできます.https://echarts.baidu.com/the...
では、私たちはどのように使いますか?例えば私はここで自分で1つの図表のテーマをカスタマイズして左上のダウンロードをクリックして、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
            }`;
          }
        }
      }
    };

そして伝参を行います

私たちのラベルが予想された効果に達していることがわかります
paramsパラメータを印刷してみましょう
ここでdataを選択するなど、自分が表示したいパラメータを選択することができます.nameに対応する次元とdata.value対応指標
extendsプロパティ設定が無効ですか?
どのようにあなたは私と同じに、グラフにextends属性を設定して、どのように設定してもページに表示されないで、afterConfig属性を使うことを考慮することができます
例えば、棒グラフのx軸ラベルを一定角度回転させて互いに遮らないようにしたいです.
ここでのxAxisは配列です.'[0]'が省略されている場合は、設定が有効ではありません.その後、グラフでafterConfigプロパティを使用します.