1. HTMLファイルでechartをインポートする<!-- echarts をインポート --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> 2. main.jsにechartsオブジェクトをマウントするVue.prototype.$echarts = window.echarts // this.$echartsを直接使用して 3. ページ構造<テンプレート> <div class="com-container"> <div class="com-chart" ref="sellerRef"></div> </div> </テンプレート> 4.データ内のデータエクスポートデフォルト{ データ () { 戻る { // 初期化されたチャート 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() }, 縦棒グラフの設定を変更する1. index.htmlにテーマ設定ファイルを導入する<!-- トピックの紹介 --> <script src="./static/lib/theme/chalk.js"></script> 2. 初期化を使用してDOMを取得し、テーマが必要な場所にそれを渡すthis.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk') 3.オプション設定 LinearGradient(x1,x2,y1,y2) 線形グラデーション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' // 背景色} } } } 「」 以上が、Vue で棒グラフを使用する方法と、自分で設定を変更する方法の詳細です。Vue で棒グラフを使用する方法についての詳細は、123WORDPRESS.COM の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 分離レベル操作プロセスの詳細説明 (cmd)
目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....
注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...
カスタム タグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点...
1. 数学関数ABS(x) xの絶対値を返します。 BIN(x) xの2進値を返します(OCTは8...
Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...
この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...
問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...
ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...
1. 前提条件1. プロジェクトが展開されました2. Dockerはすでにインストールされている2...
解決策1完全にアンインストールしてすべてのデータを削除します。まず、MySQLに関連するすべてのプロ...
1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...
最も人気のあるフロントエンド フレームワークの 1 つとして、Vue は多くのフロントエンド開発エン...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...