序文:Vue3.0はechartsの3次元縦棒グラフを実装します 結果:実装手順:1. echartsをインストールする cnpm i --save echarts 2. ページ定義コンテナ <テンプレート> <div ref="echart" class="echartDiv"></div> </テンプレート> 3. JS に echarts を導入する 'echarts' から * を echarts としてインポートします。 コンポーネントの完全なソースコード:<テンプレート> <div ref="echart" class="echartDiv"></div> </テンプレート> <スクリプト> 'echarts' から * を echarts としてインポートします。 'vue' から { onMounted、toRefs、ref、reactive } をインポートします。 エクスポートデフォルト{ 設定(){ 状態をreactive({ xAxisData:['Haoxing', 'Yanzi', 'ドラえもん', 'Li Qiang', 'Wang Ying', 'Lao Wang'], y軸データ:[4,22,1,11,23,11], y軸データ1:[1,1,1,1,1,1], echart: ref(), }) 定数echartInit = () => { var myChart = echarts.init(state.echart); //チャートの設定項目とデータを指定する var option = { ツールチップ: { トリガー: "軸", 軸ポインタ: type: "shadow", // デフォルトは直線、オプション: 'line' | 'shadow' }, フォーマッタ: function(parms) { var str = パラメータ[0].軸値 + "</br>" + パラメータ[0].マーカー + 「今日ログイン:」+ parms[0].value + 'times' str を返します。 }, }, テキストスタイル: { 色: "#333", }, 色: ["#7BA9FA", "#4690FA"], グリッド: { ラベルを含む: true、 左:「10%」、 上:「20%」、 下部:「10%」、 右:「10%」、 }, x軸: タイプ:「カテゴリー」、 データ: state.xAxisData、 軸線: { 線のスタイル: 色: "#333", }, }, 軸目盛り: { 表示: 偽、 }, 軸ラベル: { margin: 20, //スケールラベルと軸線の間の距離。 テキストスタイル: { 色: "#000", }, }, }, y軸: { タイプ: "値", 軸線: { 表示: true、 線のスタイル: 色: "#B5B5B5", }, }, 分割行: { 線のスタイル: // 明るい色と暗い色の間隔を使用します color: ["#B5B5B5"], タイプ:「破線」、 不透明度: 0.5、 }, }, 軸ラベル: {}, }, シリーズ: [{ データ: state.yAxisData、 スタック: "zs", タイプ: "バー", バー最大幅: "自動", バー幅: 60, アイテムスタイル: { 色: x: 0, y: 0, x2: 0, y2: 1, タイプ: "線形"、 グローバル: false、 カラーストップ: [{ オフセット: 0, 色: "#5EA1FF", }, { オフセット: 1, 色: "#90BEFF", }, ]、 }, }, }, //次の3次元制御色は最初の色です{ データ: state.yAxisData1、 タイプ: "pictorialBar", バー最大幅: "20", シンボル:「ダイヤモンド」、 シンボルオフセット: [0, "50%"], シンボルサイズ: [60, 15], zレベル: 2, }, //上記の3次元では、制御色は2番目の色です{ データ: state.yAxisData、 タイプ: "pictorialBar", バー最大幅: "20", シンボル位置: "end", シンボル:「ダイヤモンド」、 シンボルオフセット: [0, "-50%"], シンボルサイズ: [60, 12], zレベル: 2, } ]、 }; // 指定した構成項目とデータを使用してグラフを表示します。 myChart.setOption(オプション); } //マウントonMounted(()=>{ echartInit() }) 戻る { ...toRefs(状態)、 echartInit }; } } </スクリプト> <style lang='scss' スコープ> .echartDiv{ 幅: 100%; 高さ: 400px; } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: サーバー上で Nginx を使用して Springboot プロジェクトをデプロイする方法の詳細なチュートリアル (jar パッケージ)
>>: MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...
文字列を置き換えるには、次の形式を使用する必要があります。 $ sed s/置換対象文字列/置換文字...
目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...
以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...
特定のデータの一括更新処理において、特定のステータスが固定値に更新されるなど、更新するフィールドの値...
Oracle と MySQL の高可用性ソリューションについては、以前からまとめたいと思っていたので...
序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...
1. カーディナリティとは何ですか?カーディナリティとは、MySQL テーブルの列内の異なる値の数を...
この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...
mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...
1. サービス方法ファイアウォールのステータスを確認します。 [root@centos6 ~]# サ...
公式サイトから mysql-5.7.19-winx64 をダウンロードします。これはシステムの 64...
問題の説明(キープアライブとは何か)キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...
システム環境: Ubuntu 16.04LTSこの記事では、6 つの Docker コンテナを使用し...