この記事では、vue+echart を使って二重列チャートを実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 効果画像: 1. インストール推奨バージョンは「echarts」:「^4.8.0」です。echarts以外の場合、initはエラーを報告します。 1. まず、echarts依存パッケージをインストールする必要があります npm インストール --save [email protected] 2. または国内のTaobaoミラーを使用する: npm をインストール -g cnpm --registry=https://registry.npm.taobao.org <テンプレート> <div class="echarts_con"> <div クラス="echarts_main" ref="ダイアログルート" title="ノードインジケーター" @close="データを非表示()" > <!-- 負荷条件 --> <div ref="bar_dv" :style="{ 幅: '100%'、 最小高さ: '300px'、 }" </div> </div> </div> </テンプレート> <スクリプト> 'echarts' から echarts をインポートします // './image/hot_icon.png' から myIcon をインポート // カスタムアイコン // './image/hot_icon.png' から averageIcon をインポート エクスポートデフォルト{ 名前:「Echarts」、 データ () { 戻る { 最大Str: 400, y間隔: 80, 私のデータ: [122, 45, 67, 78, 46], 平均データ: [32, 34, 6, 73, 84, 40] } }, //データが外部から渡される場合は、データの開始を監視する必要があります // プロパティ: { // マイデータ: { // タイプ: 配列、 // デフォルト: [] // }, // 平均データ: { // タイプ: 配列、 // デフォルト: [] // } // }, // 計算: { // 住所 () { // const { myData, averageData } = this // 戻る { // マイデータ、 // 平均データ // } // } // }, // 時計: { // 住所: { // ハンドラ: function (val) { // this.compare(val.myData、val.averageData) を比較します // newArr = val.myData.concat(val.averageData) とします // maxNum = Math.max(...newArr) とします // this.maxStr = maxNum // 最大数 >= 500 の場合 { // this.yInterval = 200 // } それ以外 { // this.yInterval = 50 // } // this.drawLine(val.myData, val.averageData) // }, // 深い: 真 // } // }, // マウント済み () { // this.$nextTick(関数() { // this.drawLine(); // }); // }, //外部からデータが渡された場合は、データの終了を監視する必要があります マウントされた(){ this.drawLine(this.myData、this.averageData) は、 }, メソッド: { //1対1の対応するデータが平均より低い場合は、prompt compare (arr1, arr2) { (arr1[0] < arr2[0])の場合{ this.isCompare = true } そうでなければ (arr1[1] < arr2[1]) { this.isCompare = true } そうでなければ (arr1[2] < arr2[2]) { this.isCompare = true } そうでなければ (arr1[3] < arr2[3]) { this.isCompare = true } それ以外 { this.isCompare = false } }, クリックして閉じる(){ this.isCompare = false }, /*ステータスアイコンを読み込む*/ 線を引く(a, b) { var myData = a; var 平均データ = b; bar_dv = this.$refs.bar_dv とします。 myChart = echarts.init(bar_dv); とします。 var autoHeight = parseInt(this.maxStr / 100) * 10 + 100; myChart.getDom().style.height = autoHeight + "px"; myChart.resize(); // 適応型の高さ // チャートを描画 myChart.setOption({ タイトル: { テキスト: 'レポート表示' }, グリッド: { // 残り: 40, 含むラベル: true }, ツールチップ: {}, x軸: データ: ["プロフィールを閲覧した"、"連絡を取った"、"履歴書を受け取った"、"公開した人数"]、 軸線: { 線のスタイル: タイプ: 'ソリッド'、 color: '#eeeeee', //x の左の線の色 fontSize: 13, width: '0.5' //座標線の幅} }, axisLabel: { //x軸フォント textStyle: { 色: '#333333', フォントサイズ: 13 } }, }, y軸: { タイプ: '値', 最小: 0, 最大: this.maxStr、 間隔: this.yInterval、 軸線: { 線のスタイル: タイプ: 'ソリッド'、 color: '#fff', //左線の色 width: '0.5' //座標線の幅} }, 軸ラベル: { テキストスタイル: { 色: '#333333', フォントサイズ: 13 } }, 分割行: { 表示: true、 線のスタイル: 色: ['#eeeeee'], 幅: 1, タイプ: 'ソリッド' } } }, 伝説: { アイテム幅: 11, アイテムの高さ: 12, シンボルキープアスペクト: true、 テキストスタイル: { フォントサイズ: 11, 行の高さ: 0, 背景色: "rgba(11, 164, 19, 1)" }, // アイコン: `image://${averageIcon}`, データ: [ { 名前: 'My', // アイコン: `image://${myIcon}`//カスタムの小さいアイコン}, { 名前: 「業界平均」 // アイコン: `image://${averageIcon}` } ]、 配置: '左'、 右: 40, 上: '0'、 テキストスタイル: { フォントサイズ: 12, テキスト配置: 'center'、 色: '#333333', magrin右: 3 }, }, シリーズ: [{ 名前: 'My', タイプ: 'バー'、 データ: myData、 barWidth: 16, //列幅 barGap: '50%', //間隔 label: { 表示: true、 位置: 'トップ'、 テキストスタイル: { 色: '#4695F3' }, フォーマッタ: 関数 (パラメータ) { パラメータ値を返す } }, アイテムスタイル: { 普通: { 色: 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [{ オフセット: 0, 色: '#A5CCF6' }, { オフセット: 1, 色: '#4695F3' }])、 バー境界半径: [4, 4, 0, 0], } } }, { 名前: 「業界平均」 タイプ: 'バー'、 データ: 平均データ、 バー幅: 16, バーギャップ: '50%', ラベル: { 表示: true、 位置: 'トップ'、 テキストスタイル: { 色: '#FE8401' }, フォーマッタ: 関数 (パラメータ) { パラメータ値を返す } }, アイテムスタイル: { 普通: { 色: 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [{ オフセット: 0, 色: '#FFB235' }, { オフセット: 1, 色: '#FE8401' }])、 バー境界半径: [4, 4, 0, 0], }, 強調: バー境界半径: 30 }, } } ] }、 真実); }, データを非表示にする() { this.$emit("hideDialog") }, 確認する () { データを非表示にする }, } } </スクリプト> <スタイルスコープ> .echarts_con { 幅: 100%; マージン: 0 自動; 上マージン: 8px; 境界線の半径: 20px; 背景: #fff; パディング下部: 35px; } .echarts_main { 幅: 100%; マージン: 0 自動; パディング上部: 20px; 下マージン: -32px; 右マージン: 20px; 左マージン: 20px; } 。底 { 幅: 90%; マージン: 0 自動; 背景: #fef8e1; 境界線の半径: 6px; 高さ: 100%; 上マージン: 16px; } .bottom_con { 幅: 90%; マージン: 0 自動; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; アイテムの位置を中央揃えにします。 高さ: 34px; 行の高さ: 34px; } .bottom_text { 高さ: 34px; 行の高さ: 34px; フォントサイズ: 13px; フォントファミリー: PingFang、PingFang-SC; フォントの太さ: SC; テキスト配置: 左; 色: #fa5d1d; } .right_close { 幅: 13px; 高さ: 13px; } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: TomcatのmaxPostSize属性を設定する際に注意する必要がある問題を解決する
>>: IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。
目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....
最近、PHP で Web ページを書いているときに、エンコードを UTF-8 に設定しました。しかし...
考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...
エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...
1. テストテーブルを作成する テーブル `testsign` を作成します ( `userid`...
目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...
序文:ストレージ エンジンはデータベースの中核です。MySQL の場合、ストレージ エンジンはプラグ...
画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...
生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...
目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...
目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...
目次前に書いてビジネスコードは環境変数を使用するwebpack.DefinePlugin プラグイン...
MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...
Kubernetes は、基本認証、トークン認証、CA 認証の 3 種類の認証をサポートしています。...
vsftpdをインストールする $ sudo apt-get install vsftpd -y v...