Vue+echart で 2 列チャートを実現

npm インストール --save [email protected]

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;
}
</スタイル>