vue echarts斜切柱状图

最新推荐文章于 2024-04-22 15:18:50 发布

新宇最优秀

最新推荐文章于 2024-04-22 15:18:50 发布

阅读量2.5k

点赞数 4

分类专栏： echarts 文章标签： vue.js

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

版权

本文档介绍了如何在Vue.js项目中结合ECharts库，实现具有斜切效果的柱状图。通过配置ECharts的参数，可以达到让柱状图展示出倾斜视觉效果，增强图表的动态感和视觉吸引力。

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

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

<template>
  <div class="KeyPoint">
    <div id="KeyPointChart" style="flex: 1; height: 280px; width: 614px; padding-left: 10px"></div>
  </div>
</template>
<script>
import {
    getPeopleLive } from '@/api/government';

export default {
   
  data() {
   
    return {
   
      keyCategoryDataName: [], //品类名称
      keyCategoryDataValue: [], //品类值
    };
  },
  mounted() {
   
    const myShape = {
   
      x: 0,
      y: 0,
      width: 13, //柱宽
    };
    // 绘制左侧面
    const InclinedRoofColumn = this.$echarts.graphic.extendShape({
   
      shape: myShape,
      buildPath: function (ctx, shape) {
   
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x, shape.y];
        const c1 = [shape.x - 17, shape.y - 12];
        const c2 = [xAxisPoint[0] - 17, xAxisPoint[1]];
        const c3 = [xAxisPoint[0], xAxisPoint[1]];
        ctx.moveTo(c0[0

最低0.47元/天解锁文章