Echart Bar の 2 列チャート スタイルの最も完全な詳細な説明

npm インストール echarts --save

* を echarts として "echarts" からインポートします。
Vue.prototype.$echarts = echarts;

// echarts に必要なインターフェースを提供する echarts コア モジュールをインポートします。 import * as echarts from "echarts/core";

// さまざまなチャートをインポートします。すべて接尾辞が「Chart」です。
「echarts/charts」から { BarChart、LineChart、PieChart } をインポートします。

//プロンプトボックス、タイトル、直交座標系などのコンポーネントを導入します。コンポーネントのサフィックスはComponentです。
輸入 {
  タイトルコンポーネント、
  ツールチップコンポーネント、
  ツールボックスコンポーネント、
  グリッドコンポーネント、
  凡例コンポーネント、
  軸ポインタコンポーネント、
  データセットコンポーネント、
} から "echarts/components";

// Canvas レンダラーをインポートします。CanvasRenderer または SVGRenderer のインポートは必須の手順であることに注意してください。import { SVGRenderer } from "echarts/renderers";

// 必要なコンポーネントを登録しますecharts.use([
  棒グラフ、
  折れ線グラフ、
  円グラフ、

  タイトルコンポーネント、
  ツールチップコンポーネント、
  ツールボックスコンポーネント、
  グリッドコンポーネント、
  凡例コンポーネント、
  軸ポインタコンポーネント、
  データセットコンポーネント、

  SVGレンダラー、
]);

デフォルトの echart をエクスポートします。

「./utils/echarts」からechartsをインポートします。
Vue.prototype.$echarts = echarts;

<テンプレート>
  <div id="チャート" style="幅: 600px; 高さ: 400px"></div>
</テンプレート>

<スクリプト>
  "ramda" から R として * をインポートします。

  エクスポートデフォルト{
    マウント() {
      チャートを初期化します。
    },
    メソッド: {
      initCharts() {
        charts = this.$echarts.init(document.getElementById("charts")) とします。
        オプション = {
          タイトル：
            text: "月間消費動向", // タイトル subtext: "ヒストグラム", // サブタイトル},
          x軸:
            タイプ:「カテゴリー」、
          },
          y軸: {
            タイプ: "値",
          },
          color: ["#1890ff", "#52c41a", " #faad14"], // 棒グラフの色データセット: {
            ソース： [
              // データソース ["1月", 1330, 666, 560],
              [「2月」、820、760、660]、
              [「3月」、1290年、1230年、780年]、
              [「4月」、832、450、890]、
              [「5月」、901、880、360]、
              [「6月」、934、600、700]、
            ]、
          },
          シリーズ： [
            // アイコン列の設定 { type: "bar", stack: "total", name: "apple" },
            { タイプ: "bar", スタック: "total", 名前: "Pear" },
            { タイプ: "bar", スタック: "total", 名前: "Peach" },
          ]、
          ツールチップ: {
          //プロンプトボックスコンポーネント}
        };
        charts.setOption(オプション);
      },
    },
  };
</スクリプト>

<style lang="scss" スコープ></style>

x軸:
  タイプ:「カテゴリー」、
  boundaryGap: true, // 座標軸の両側の空白戦略、デフォルトは true
  axisTick: { // スケール show: false,
  },
  axisLabel: { // スケールラベルの色: "#808080",
    フォントサイズ: 12,
    margin: 8, // スケールラベルと軸の間の距離 interval: "auto", // x軸ラベルの表示間隔、自動},
  axisLine: { // 軸の線スタイル: {
      色: "#c3c3c3",
      幅: 0.5、
    },
  },
  splitLine: { // 分割線 show: false,
    間隔: "自動"、
  },
  splitArea: { // 分割領域 show: false,
    エリアスタイル: {},
  },
},

x軸:
  軸ラベル: {
    // 間隔: "自動"、
    interval: 50, // 最大と最小の座標のみを表示 showMinLabel: true, // 最小スケールのラベルを表示 showMaxLabel: true, // 最大スケールのラベルを表示 }
}

const スタックバーシリーズ = {
  type: "bar", // 棒グラフ barWidth: 32, // 列の幅 stack: "total", // データの積み重ね showBackground: false, // 列の背景色を表示するかどうか // グラフィックスタイルとラベルスタイルを強調表示 emphasis: {
    // マウスをホバーすると、同じビジネス項目が強調表示され、他の項目はグラフィックからフェードアウトします // focus: "series",
    // デフォルト設定、現在のホバーデータのみがフェードアウトします focus: "none",
  },
};

オプション = {
  シリーズ: R.map(
    (お) =>
      R.merge(stackBarSeries, {
        名前: o,
      }）、
    ["リンゴ"、"ナシ"、"桃"]
  ）、
};

オプション = {
  ツールチップ: {
    //プロンプト ボックス コンポーネント トリガー: "axis", //軸トリガー},
  x軸:
    // 軸ポインタ axisPointer: {
      タイプ:「影」、
      // 座標軸インジケータのz値はグラフィックスの順序を制御しますz: 1,
      // インジケーターマスクスタイル shadowStyle: {
        // ホバー背景色のグラデーション問題を解決する color: {
          タイプ: "線形"、
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          カラーストップ: [
            {
              オフセット: 0,
              color: "rgba(234,244,255,1)", // 0% の色},
            {
              オフセット: 1,
              color: "rgba(234,244,255,0.3)", // 100% 色},
          ]、
          global: false, // デフォルトは false
        },
        //背景色と影を設定//color: "rgba(234,244,255,1)",
        // 不透明度: 1,
        // 影の色: "rgba(0, 0, 0, 0.5)",
        // 影ぼかし: 10,
        // シャドウオフセットX: 10,
        // 影オフセットY: 10,
      },
    },
  },
};

オプション = {
  ツールチップ: {
    // プロンプト ボックス コンポーネント トリガー: "axis", // 座標軸トリガー パディング: [20, 16, 12, 16],
    背景色: "#fff",
    常にコンテンツを表示: false、
    フォーマッタ: 関数(パラメータ) {
      html = `<div style="height:auto;width: 163px;"> とします。
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
            ${params[0].axisValue}
          </div>
          ${パラメータ
            。地図（
              （
                アイテム
              ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
                <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
                  アイテムの色
                };"></span>
                ${item.seriesName}
                <span style="flex:1;text-align:right;">¥${item.value[
                  アイテム.エンコード.y[0]
                ] || 0 </span>
              </div>`
            ）
            。参加する（""）}
            <div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#333;padding-top:4px;margin-bottom:8px;line-height:1;">
            <span>合計</span>
            <span>¥${R.reduceRight(
              R.add、
              0,
              R.drop(1, パラメータ[0].値 || [])
            ) </span>
          </div>
        </div>`;
      html を返します。
    },
  },
};

オプション = {
  y軸: {
    タイプ: "値",
    最小間隔: 100,
    名前ギャップ: 8,
    軸ラベル: {
      色: "#808080",
      フォントサイズ: 10,
      // フォーマッタ: (値) => {
      // moneyFormatValue(値)を返します。
      // },
    },
    分割行: {
      線のスタイル:
        タイプ:「破線」、
        色: "#ebebeb",
        幅: 0.5、
      },
    },
  },
};

オプション = {
  グリッド: {
    左: 0,
    右: 12、
    下: 0,
    トップ: 68,
    ラベルを含む: true、
  },
  // 凡例設定 legend: {
    トップ: 32,
    左: -5、
    アイコン:「円」、
    itemHeight: 6, // アイコンのサイズを変更する itemGap: 24,
    テキストスタイル: {
      フォントサイズ: 12,
      色: "#333",
      padding: [0, 0, 0, -8], // テキストとアイコンの間の距離を変更します},
  },
};