Vueは水平の斜めの棒グラフを実装します

<テンプレート>
  <div class="消費">
    <div style="width: 350px; height: 180px" ref="消費チャート" />
  </div>
</テンプレート>
<スクリプト>
'echarts' から echarts をインポートします
定数myShape = {
  x: 0,
  y: 0,
  幅: 10 // 間隔}
// 左側を描画する const InclinedRoofBar = echarts.graphic.extendShape({
  形状: myShape、
  ビルドパス: 関数(ctx, シェイプ) {
    // キャンバスを知っている人なら誰でもこれを理解できるはずです。shape はカスタムから渡されます。const xAxisPoint = shape.xAxisPoint
    定数 c0 = [形状.x, 形状.y]
    定数 c1 = [shape.x + 14, shape.y - 10]
    定数 c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
    定数 c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath()
  }
})
定数 colors = ['rgba(50, 197, 255, 0.8)', 'rgba(0, 253, 255, 0.8)', 'rgba(255, 235, 0, 0.8)']
const colors = ['rgba(0, 145, 255, 1)', 'rgba(68, 215, 182, 1)', 'rgba(215, 170, 68, 1)']
// 3 つの表面グラフィックを登録します echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)
const デフォルトオプション = {
  ツールチップ: {
    表示: true、
    トリガー: '軸'、
    軸ポインタ:
      タイプ: '影'
    }
  },
  グリッド: {
    トップ: 10,
    下: 30,
    左: 10,
    右: 10,
    ラベルを含む: true
  },
  y軸: {
    タイプ: 'カテゴリ',
    データ： []、
    軸線: {
      表示:偽
    },
    軸目盛り: {
      表示:偽
    },
    軸ラベル: {
      色(値, インデックス) {
        色を返す[インデックス]
      },
      フォントサイズ: 14
    }
  },
  x軸:
    タイプ: '値',
    軸線: {
      表示:偽
    },
    最小: 0,
    分割行: {
      表示:偽
    },
    軸目盛り: {
      表示:偽
    },
    軸ラベル: {
      表示:偽
    },
    境界ギャップ: ['20%', '20%']
  },
  シリーズ： [
    {
      タイプ: 'カスタム'、
      名前： ''、
      アイテムスタイル: {
        色: 'rgba(44, 197, 253, 1)'
      },
      レンダリングアイテム: (パラメータ、API) => {
       定数位置 = api.coord([api.value(0), api.value(1)])
        定数xlocation = api.coord([0, api.value(1)])
        戻る {
          タイプ: 'InclinedRoofBar'、
          形：
            アピ、
            x値: api.value(0)、
            y値: api.value(1)、
            x: 場所[0],
            y: location[1] + myShape.width、
            xAxisPoint: [xlocation[0], xlocation[1] + myShape.width]
          },
          スタイル: {
            塗りつぶし: 新しい echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                オフセット: 0,
                色: colors[params.dataIndex]
              },
              {
                オフセット: 1,
                色: colorss[params.dataIndex]
              }
            ])
          }
        }
      },
      データ： []
    },
    {
      タイプ: 'バー'、
      ラベル: {
        普通： {
          表示: true、
          位置: '右'、
          フォントサイズ: 14,
          オフセット: [15, 0]
        }
      },
      背景を表示: false、
      バー幅: 14,
      背景スタイル: {
        色: 'rgba(50, 197, 255, 0.1)'
      },
      アイテムスタイル: {
        色: '透明'
      },
      ツールチップ: {
        表示:偽
      },
      データ： []
    }
  ]
}
エクスポートデフォルト{
  データ（） {
    戻る {
      myChart: ヌル
    }
  },
  マウント() {
    this.myChart = echarts.init(this.$refs.ConsumptionChart)
  },
  メソッド: {
    getOption(シリーズデータ) {
      const オプション = defaultOption
      const { yAxis, series } = オプション
      // プロセスデータ yAxis.data = ['low', 'middle', 'high']
      シリーズ[0].data = シリーズデータ
      series[1].data = seriesData.map((item, index) => Object.assign(item, { label: { color: colorss[index] } }))
      this.myChart.setOption(オプション)
    }
  }
}
</スクリプト>