vue 横着的斜切柱状图

最新推荐文章于 2024-07-02 13:32:06 发布

新宇最优秀

最新推荐文章于 2024-07-02 13:32:06 发布

阅读量661

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/117322288

版权

本文介绍如何在Vue.js中创建一种特殊的图表——横着的斜切柱状图，展示其实现效果和关键代码，帮助开发者掌握这种图表的制作技巧。

摘要由CSDN通过智能技术生成

实现效果：
在这里插入图片描述

实现代码：

<template>
  <div class="Consumption">
    <div style="width: 350px; height: 180px" ref="ConsumptionChart" />
  </div>
</template>
<script>
import echarts from 'echarts'
const myShape = {
   
  x: 0,
  y: 0,
  width: 10 //间距
}
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
   
  shape: myShape,
  buildPath: function(ctx, shape) {
   
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x + 14, shape.y - 10]
    const c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1