この記事では、水平棒グラフを実現するための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インスタンスのユーザールートパスワードとリモート接続方法を設定する方法
目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...
CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...
目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...
Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...
*******************HTML言語入門(パート2)*****************...
プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...
1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...
(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...
目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...
Pantherは新人としてスタートし、今もまだ新人ですが、人々から学び、学んだことを時々皆さんと共有...
目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...
目次解決策1: EUIの転送コンポーネントをコピーして変更し、プロジェクトディレクトリに導入する解決...
生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...
目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...
背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...