この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 結果: コード: <テンプレート> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div> </div> </テンプレート> <スクリプト> '@/api/government' から { getProposedInvestments } をインポートします。 定数色 = [ ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'], ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'], ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'], ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'], ]; エクスポートデフォルト{ データ() { 戻る { 投資WayData: [], 投資WayDataCount: [], 投資WayDataCounts: [], }; }, マウント() { 提案投資を取得します。 }, メソッド: { initMap() { var myChart = this.$echarts.init(document.getElementById('OverYearsPompanyChart')); const オプション = { ツールチップ: { 表示: true、 トリガー: '軸'、 軸ポインタ: タイプ: '影'、 }, }, x軸: タイプ: '値', 軸ラベル: { 表示: true、 色: '#02CFFCFF', フォントファミリー: 'TencentSans'、 }, 軸線: { 表示: true、 線のスタイル: 色: '#02CFFCFF', }, }, 分割行: { 表示: true、 線のスタイル: 色: 'rgba(71, 126, 171, 1)', }, }, }, y軸: [ { タイプ: 'カテゴリ', inverse: true, // 逆 axisLabel: { 色: '#02CFFCFF', フォントファミリー: 'TencentSans'、 }, 軸目盛り: { 表示: 偽、 }, 軸線: { 表示: true、 線のスタイル: 色: '#02CFFCFF', }, }, 分割行: { 表示: true、 線のスタイル: タイプ: 'ドット'、 色: 'rgba(71, 126, 171, 1)', }, }, データ: this.investmentsWayData、 }, ]、 シリーズ: [ { タイプ: 'バー'、 バー幅: 15, ラベル: { 位置: ['98%', -20], 表示: true、 色: '#fff', フォントファミリー: 'TencentSans'、 }, データ: this.investmentsWayDataCount、 アイテムスタイル: { 色(パラメータ) { const { データインデックス } = パラメータ; 色 = { タイプ: '線形'、 x: 1, y: 0, x2: 0, y2: 0, カラーストップ: [ { オフセット: 0, 色: colors[dataIndex] ? colors[dataIndex][0] : '赤', }, { オフセット: 1, 色: colors[dataIndex] ? colors[dataIndex][1] : '赤', }, ]、 }; 色を返します。 }, }, }, ]、 }; myChart.setOption(オプション); }, 提案投資を取得する() { getProposedInvestments().then((res) => { const { ステータス、データ } = res; const { proposalInvestmentsWayDis } = JSON.parse(データ); (ステータス === 200)の場合{ // this.investmentsWayData=[{0: "合弁事業", 1: "協力", 2: "個人事業主", 3: "その他"}] this.investmentsWayData = proposalInvestmentsWayDis.map((item) => { item.wayDis を返します。 }); // this.investmentsWayDataCount=[{0: "496", 1: "372", 2: "248", 3: "124"}] this.investmentsWayDataCount = proposalInvestmentsWayDis.map((item) => { item.count を返します。 }); // this.investmentsWayDataCounts=[{itemStyle: //色:{ // 0: "rgba(240, 7, 100, 1)" // 1: "rgba(0, 215, 229, 1)"} // 値: "496"}] this.investmentsWayDataCounts = proposalInvestmentsWayDis.map((item, index) => { 戻る { 値: アイテム数、 アイテムスタイル: { 色: 色[インデックス], }, }; }); このメソッドは、次のとおりです。 } }); }, }, }; </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する
>>: Alibaba Cloud ECSインスタンスのユーザールートパスワードとリモート接続方法を設定する方法
序文早速本題に入りましょう。これからお話しするのは次のマインドマップです。まずは印象をつかんでくださ...
2018 年の最新 MySQL 5.7 の詳細なインストールと設定は 4 つのステップに分かれており...
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
yum か rpm か? yum によるインストール方法は非常に便利ですが、公式サイトから MySQ...
1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...
序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...
Web ページでは、基本的に <input type="file">...
新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮...
目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...
参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...
idea 開発ツールを使用してコードをデバッグする場合、Java Web プロジェクトで、Web コ...
背景この記事では主に、MySQL が更新ステートメントを実行するときに、元のデータと同一の (つまり...
Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...