Echarts バー水平棒グラフのサンプルコード

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

  定数ソース1 = [
    [「1月」、1330年、666、560]、
    [「2月」、820、760、660]、
    ......
    [「11月」、901、880、360]、
    [「12月」、934、600、700]、
  ];
  定数ソース2 = [
    ["1日", 1330, 666, 560],
    ["2番目", 820, 760, 660],
    ......
    ["29日", 934, 600, 700],
    ["30日", 1330, 666, 560],
  ];

  // 具体的な設定は前に示したとおりですが、詳細は省略し、基本的な例のみを示します。const initOption = {
    ...
    データセット: { ソース: source1 },
  };

  エクスポートデフォルト{
    データ（） {
      戻る {
        チャート: null、
        isDaily: 偽、
      };
    },
    マウント() {
      this.charts = this.$echarts.init(
        document.getElementById("barCharts"),
        ヌル、
        {
          レンダラー: "svg",
        }
      );
      this.charts.setOption(R.clone(initOption));
    },
    メソッド: {
      ハンドルソース() {
        this.isDaily = !this.isDaily;
        this.charts.setOption(
          R.mergeDeepRight(initOption, {
            // データソースデータセットを動的に更新します: {
              ソース: this.isDaily ? ソース2: ソース1、
            },
            x軸:
              // ラベル間隔を動的に更新する axisLabel: {
                間隔: this.isDaily ? 4 : "auto",
              },
            },
            シリーズ: R.map(
              // 列幅を動的に更新する (o) => ((o.barWidth = this.isDaily ? 12 : 24), o),
              initOption.シリーズ
            ）、
          }）、
          真実
        );
        チャートのサイズを変更します。
      },
    },
  };
</スクリプト>

<スクリプト>
  エクスポートデフォルト{
    マウント() {
      window.addEventListener("サイズ変更", this.handleResize, false);
    },
    破壊された() {
      window.removeEventListener("サイズ変更", this.handleResize);
    },
    メソッド: {
      ハンドルサイズ変更() {
        _this は定数です。
        定数タイマー = setTimeout(() => {
          _this.lineCharts.resize();
          _this.barCharts.resize();
        }, 500);
        // タイマーをクリアします this.$once("hook:beforeDestroy", () => {
          タイマーを設定します。
        });
      },
    },
  };
</スクリプト>

オプション = {
  x軸:
    タイプ: "値",
  },
  y軸: {
    タイプ:「カテゴリー」、
  },
};

水平色を{
  タイプ: "線形"、
  x: 1, // 変更 y: 0,
  x2: 0,
  y2: 0, // colorStopsを変更: [
    { オフセット: 0、色: "rgba(234,244,255,1)" },
    { オフセット: 1、色: "rgba(234,244,255,0.3)" },
  ]、
  グローバル: false、
};

colorList = [ とします。
  "#1890ff",
  "#52c41a",
  "#faad14",
  "#f5222d",
  "#1DA57A",
  "#d9d9d9",
];
シリーズ = [
  {
    タイプ: "バー",
    バー幅: 16,
    アイテムスタイル: {
      // 異なる色の列を実現するためにカスタマイズされた表示（順序） color: (params) => {
        colorList[params.dataIndex]を返します。
      },
    },
    ディメンション: ["タイプ", "販売数量"],
  },
];

シリーズ = [
  {
    // ......
    タイプ: "バー",
    ラベル: {
      // 列グラフのヘッダー表示値 show: true,
      位置: "右",
      色: "#333",
      フォントサイズ: "12px",
      フォーマッタ: (パラメータ) => {
        params.value[params.encode.x[0]]を返します。
      },
    },
  },
];

ツールチップを R.merge(tooltip, {
  フォーマッタ: 関数(パラメータ) {
    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;">${
                  アイテム.値[アイテム.エンコード.x[0]]
                </span>
              </div>`
            ）
            。参加する（""）}
        </div>`;
    html を返します。
  },
});

チャート.setOption({
  タイトル：
    テキスト:「販売数量分布」、
  },
  データセット:
    ソース： [
      [「アップル」、200]、
      [「ピーチ」、180]、
      [「ブドウ」、340]、
      [「バナナ」、250]、
      [「マンゴー」、166]、
      [「ドリアン」、185]、
    ]、
  },
  x軸: R.merge(y軸, {
    タイプ: "値",
  }）、
  y軸: R.mergeDeepRight(x軸, {
    タイプ:「カテゴリー」、
    軸ポインタ:
      シャドウスタイル: {
        色: 水平色、
      },
    },
  }）、
  シリーズ、
  ツールチップ、
});