Vue で棒グラフを使用し、自分で設定を変更する方法

 <!-- echarts をインポート -->
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

Vue.prototype.$echarts = window.echarts
// this.$echartsを直接使用して

<テンプレート>
 <div class="com-container">
  <div class="com-chart" ref="sellerRef"></div>
 </div>
</テンプレート>

エクスポートデフォルト{
 データ （） {
  戻る {
   // 初期化されたチャート chartInstance: null,
   allDate: null, //サーバーから返されたデータ}
 },
}
```js
##### 5. メソッド内のロジック ```js
メソッド: {
  // echartsオブジェクトを初期化する initEchart(){
    // DOM オブジェクトを取得します。 this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  // サーバーからデータを取得する async getData(){
    const {data:res} = これを待機します。$http.get('seller')
    this.allDate = res
    // 返されるデータ構造は、名前、商人、値です // 返されたデータを小さい順から大きい順に並べ替えます sort メソッド this.allDate.sort((a, b) => {
    a.値 - b.値を返す
   })
    // ビュー更新メソッド this.updateChart() を呼び出す
  },
  // チャートを更新する updateChart(){
  // Y軸カテゴリ軸データ const sellerNames = this.allDate.map(item=>{
    // 必要に応じて return item.name を調整します
  })
  // x軸の値軸のデータ const sellerValues ​​= this.allDate.map(item=>{
    アイテム値を返す
  })
     const オプション = {
    x軸:
     タイプ: '値'
    },
    y軸: {
     タイプ: 'カテゴリ',
     // y軸の座標軸は、トラバースされた名前を使用します
     データ:販売者名
    },
    シリーズ： [
     {
      // タイプは棒グラフタイプ: 'bar'、
      // x軸データは、トラバーサル値としてシリーズデータ型に設定する必要があります
      データ:sellerValues
     }
    ]
  }
  // オプションデータをDOMオブジェクトにレンダリングします this.chartInstance.setOption(option)
},

 // DOMの読み込みが完了したら、mounted() を呼び出します。
  この.initChart()
  この.getData()
 },

 <!-- トピックの紹介 -->
 <script src="./static/lib/theme/chalk.js"></script>

   this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')

   const オプション = {
    タイトル：
     テキスト: '| 販売業者の売上統計',
     テキストスタイル: {
      フォントサイズ: 66
     },
     残り: 20,
     トップ: 20
    },
    // 軸構成グリッド: {
     上: '20%'、
     左: '3%'、
     右: '6%'、
     下: '3%'、
     // 距離には軸テキストが含まれます containLabel: true
    },
    x軸:
     タイプ: '値'
    },
    y軸: {
     タイプ: 'カテゴリ',
     // y軸の座標軸は、トラバースされた名前を使用します
     データ:販売者名
    },
    シリーズ： [
     {
      // タイプは棒グラフタイプ: 'bar'、
      // x軸データは、トラバーサル値としてシリーズデータ型に設定する必要があります
      データ: sellerValues、
      // 列幅 barWidth: 66,
      // 列テキストはデフォルトではラベルを表示しません: {
       表示: true、
       // テキストは右の位置に表示されます: 'right'、
       テキストスタイル: {
        // 色は白です color: 'white'
       }
      },
      //列内の各項目を制御する itemStyle: {
       // barBorderRadiusの角の半径を制御します: [0, 33, 33, 0],
       // 線形グラデーション // 色の値の異なるパーセンテージを指定します color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
         // 0 パーセント スタイル オフセット: 0,
         色: '#5052EE'
        },
        {
         // 100% オフセット: 1,
         色: '#AB6EE5'
        }
       ])
      }
     }
    ]、
    ツールチップ: {
     トリガー: '軸'、
     軸ポインタ:
      type: 'line', // デフォルトは直線、オプション: 'line' | 'shadow'
      z: 0, // 背景レベルのlineStyle: {
       width: 66, // 背景の幅 color: '#2D3443' // 背景色}
     }
    }
   }
   「」