序文: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 マスタースレーブレプリケーションの原理と実践の詳細な説明
序文DISTINCT は、GROUP BY 操作の実装と非常によく似ていますが、GROUP BY の...
1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...
この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...
目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...
このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...
この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...
最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...
CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...
この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...
最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...
チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...
目次1. はじめに2. vue-cli の紹介2.1 コマンドライン2.2 CLI サービス2.3 ...
初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...
コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...