echarts 伪3D柱状图

最新推荐文章于 2024-04-10 14:56:37 发布
最新推荐文章于 2024-04-10 14:56:37 发布
阅读量449 收藏 8
点赞数 7
分类专栏： vue pc端大屏绘制 文章标签： echarts 3d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MFline/article/details/135273918
版权

echarts 伪3D柱状图

这里写自定义目录标题


请添加图片描述

外观1

![请添加图片描述](https://img-blog.csdnimg.cn/direct/764abbf0062d4fe7b9f217d92d9af1a6.png请添加图片描述

const initNYBar = () => {
  var chartDom = document.getElementById('NYbar');
  var myChart = echarts.init(chartDom);
  var option;
  const labels = ['01', '02', '03', '04'];
  const seriesData = [
    {
      label: '01',
      value: [32],
    },
    {
      label: '02',
      value: [24],
    },
    {
      label: '03',
      value: [42],
    },
    {
      label: '04',
      value: [20],
    }
  ]
  const colors = [
    [
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
    [
     /* { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },*/
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
    [
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
    [
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
  ];

  option = {
    grid: {
      bottom: 50,
      top: 80,
      right: 0,
      left: 65
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1h',
          '3h',
          '6h',
          '9h'
        ],
        offset: 10,
        axisLine: {
          // 轴线设置
          show: true, // 显示轴线
          lineStyle: {
            // 轴线样式设置
            color: '#C5C5C5', // 轴线颜色
            width: 1, // 轴线宽度
            type: 'solid' // 轴线类型-虚线
          }
        },
        axisTick: {
          show: true,
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: '#fff', //更改坐标轴文字颜色
            fontSize: 14 //更改坐标轴文字大小
          }
        }
      }
    ],
    yAxis: [
      {
        name: '超纳水库统计（座）',
        nameTextStyle: {
          fontSize: 14,
          color: '#fff',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#949598',
            type: 'solid'
          }
        },
        axisLine: {
          // 轴线设置
          show: true, // 显示轴线
          lineStyle: {
            // 轴线样式设置
            color: '#C5C5C5', // 轴线颜色
            width: 1, // 轴线宽度
            type: 'solid' // 轴线类型-虚线
          }
        },
        axisLabel: {
          textStyle: {
            color: '#F5F5F5', //更改坐标轴文字颜色
            fontSize: 14 //更改坐标轴文字大小
          }
        }
      }
    ],
    legend: {
      show: false,
      data: getlegendData(),
      right: '25',
      top: '18',
      icon: 'rect',
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        color: '#000'
      }
    },
    series: getSeriesData()
  };
// 定义柱状图左侧图形元素
  const leftRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 23, //柱状图宽
      zWidth: 8, //阴影折角宽
      zHeight: 0 //阴影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
      const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
      const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2, shape.y];

      ctx.beginPath(); // 开启新的路径
      ctx.moveTo(p0[0], p0[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.lineTo(p0[0], p0[1]);
      ctx.closePath();
    }
  });


  // 定义柱状图顶部图形元素
  const topRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 20,
      zWidth: 15,
      zHeight: 8
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p1 = [shape.x - shape.width / 2 - 2, shape.y - 0.5];
      const p3 = [xAxisPoint[0] + shape.width / 2 , xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2 , shape.y - 0.5];
      const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
      const p6 = [
        shape.x + shape.width / 2 + shape.zWidth,
        shape.y - shape.zHeight / 2
      ];
      const p7 = [
        shape.x - shape.width / 2 + shape.zWidth / 2,
        shape.y - shape.zHeight / 2
      ];

      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p7[0], p7[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    }
  });

  // 定义柱状图右侧图形元素
  const rightRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 20,
      zWidth: 15,
      zHeight: 8
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p1 = [shape.x - shape.width / 2, shape.y - 0.5];
      const p3 = [xAxisPoint[0] + shape.width / 2 + 2, xAxisPoint[1] ];
      const p4 = [shape.x + shape.width / 2 + 2, shape.y];
      const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
      const p6 = [
        shape.x + shape.width / 2 + shape.zWidth,
        shape.y - shape.zHeight / 2
      ];
      const p7 = [
        shape.x - shape.width / 2 + shape.zWidth / 2,
        shape.y - shape.zHeight / 2
      ];
      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p5[0], p5[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    }
  });

// 注册图形元素
  echarts.graphic.registerShape('leftRect', leftRect);
  echarts.graphic.registerShape('rightRect', rightRect);
  echarts.graphic.registerShape('topRect', topRect);

  function getlegendData() {
    let data = [];
    labels.forEach((item, index) => {
      data.push(
          {
            name: item,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[index]),
            },
          }
      )
    })
    return data
  }

  function getSeriesData() {
    const data = [];
    seriesData.forEach((item, index) => {
      data.push(
          {
            type: 'custom',
            name: item.label,
            renderItem: function (params, api) {
              return getRenderItem(params, api);
            },
            data: item.value,
            itemStyle: {
              color: () => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
              },
            },
          }
      )
    })
    return data
  }

  function getRenderItem(params, api) {
    const index = params.seriesIndex;
    let location = api.coord([api.value(0) + index, api.value(1)]);
    let extent = api.size([0, api.value(1)]);
    return {
      type: 'group',
      children: [
        {
          type: 'leftRect',
          shape: {
            api,
            xValue: api.value(0) + index,
            yValue: api.value(1),
            x: location[0],
            y: location[1]
          },
          style: api.style()
        },
        {
          type: 'rightRect',
          shape: {
            api,
            xValue: api.value(0) + index,
            yValue: api.value(1),
            x: location[0],
            y: location[1]
          },
           fill: 'rgba(26, 145, 80)'
        },
        {
          type: 'topRect',
          shape: {
            api,
            xValue: api.value(0) + index,
            yValue: api.value(1),
            x: location[0],
            y: location[1]
          },
          // style: api.style()
          style: {
             fill: 'rgba(119, 255, 181)'
          }
        }
      ]
    };
  }

  option && myChart.setOption(option);
}

外观2

请添加图片描述

const initNYBar = () => {
  var chartDom = document.getElementById('NYbar');
  var myChart = echarts.init(chartDom);
  var option;
  const labels = ['01', '02', '03', '04'];
  const seriesData = [
    {
      label: '01',
      value: [32],
    },
    {
      label: '02',
      value: [24],
    },
    {
      label: '03',
      value: [42],
    },
    {
      label: '04',
      value: [20],
    }
  ]
  const colors = [
    [
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
    [
     /* { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },*/
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
    [
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
    [
      { offset: 0, color: 'rgba(31, 215, 144, 1)' },
      { offset: 1, color: 'rgba(6, 239, 228, 1)' },
    ],
  ];

  option = {
    grid: {
      bottom: 50,
      top: 80,
      right: 0,
      left: 65
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1h',
          '3h',
          '6h',
          '9h'
        ],
        offset: 10,
        axisLine: {
          // 轴线设置
          show: true, // 显示轴线
          lineStyle: {
            // 轴线样式设置
            color: '#C5C5C5', // 轴线颜色
            width: 1, // 轴线宽度
            type: 'solid' // 轴线类型-虚线
          }
        },
        axisTick: {
          show: true,
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: '#fff', //更改坐标轴文字颜色
            fontSize: 14 //更改坐标轴文字大小
          }
        }
      }
    ],
    yAxis: [
      {
        name: '超纳水库统计（座）',
        nameTextStyle: {
          fontSize: 14,
          color: '#fff',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#949598',
            type: 'solid'
          }
        },
        axisLine: {
          // 轴线设置
          show: true, // 显示轴线
          lineStyle: {
            // 轴线样式设置
            color: '#C5C5C5', // 轴线颜色
            width: 1, // 轴线宽度
            type: 'solid' // 轴线类型-虚线
          }
        },
        axisLabel: {
          textStyle: {
            color: '#F5F5F5', //更改坐标轴文字颜色
            fontSize: 14 //更改坐标轴文字大小
          }
        }
      }
    ],
    legend: {
      show: false,
      data: getlegendData(),
      right: '25',
      top: '18',
      icon: 'rect',
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        color: '#000'
      }
    },
    series: getSeriesData()
  };
// 定义柱状图左侧图形元素
  const leftRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 29, //柱状图宽
      zWidth: 8, //阴影折角宽
      zHeight: 0 //阴影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x - shape.width / 2 + 2.5, shape.y - shape.zHeight];
      const p1 = [shape.x - shape.width / 2 + 2.5, shape.y - shape.zHeight];
      const p2 = [xAxisPoint[0] - shape.width / 2 + 2.5, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / 2 + 2.5, xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2 + 2.5, shape.y];

      ctx.beginPath(); // 开启新的路径
      ctx.moveTo(p0[0], p0[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.lineTo(p0[0], p0[1]);
      ctx.closePath();
    }
  });

  // 定义柱状图顶部图形元素
  const topRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 20,
      zWidth: 15,
      zHeight: 8
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p1 = [shape.x - shape.width / 2 - 2.5, shape.y];
      const p3 = [xAxisPoint[0] + shape.width / 2 , xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2 + 6, shape.y];
      const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
      const p6 = [
        shape.x + shape.width / 2 + shape.zWidth,
        shape.y - shape.zHeight / 2
      ];
      const p7 = [
        shape.x - shape.width / 2 + shape.zWidth / 2,
        shape.y - shape.zHeight / 2
      ];

      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p7[0], p7[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    }
  });

  // 定义柱状图右侧图形元素
  const rightRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 20,
      zWidth: 15,
      zHeight: 8
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p1 = [shape.x - shape.width / 2, shape.y];
      const p3 = [xAxisPoint[0] + shape.width / 2 + 6.5, xAxisPoint[1] ];
      const p4 = [shape.x + shape.width / 2 + 6.5, shape.y];
      const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
      const p6 = [
        shape.x + shape.width / 2 + shape.zWidth,
        shape.y - shape.zHeight / 2
      ];
      const p7 = [
        shape.x - shape.width / 2 + shape.zWidth / 2,
        shape.y - shape.zHeight / 2
      ];
      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p5[0], p5[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    }
  });

// 注册图形元素
  echarts.graphic.registerShape('leftRect', leftRect);
  echarts.graphic.registerShape('rightRect', rightRect);
  echarts.graphic.registerShape('topRect', topRect);

  function getlegendData() {
    let data = [];
    labels.forEach((item, index) => {
      data.push(
          {
            name: item,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[index]),
            },
          }
      )
    })
    return data
  }

  function getSeriesData() {
    const data = [];
    seriesData.forEach((item, index) => {
      data.push(
          {
            type: 'custom',
            name: item.label,
            renderItem: function (params, api) {
              return getRenderItem(params, api);
            },
            data: item.value,
            itemStyle: {
              color: () => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
              },
            },
          }
      )
    })
    return data
  }

  function getRenderItem(params, api) {
    const index = params.seriesIndex;
    let location = api.coord([api.value(0) + index, api.value(1)]);
    let extent = api.size([0, api.value(1)]);
    return {
      type: 'group',
      children: [
        {
          type: 'leftRect',
          shape: {
            api,
            xValue: api.value(0) + index,
            yValue: api.value(1),
            x: location[0],
            y: location[1]
          },
          style: api.style()
        },
        {
          type: 'rightRect',
          shape: {
            api,
            xValue: api.value(0) + index,
            yValue: api.value(1),
            x: location[0],
            y: location[1]
          },
          // style: api.style()
          style:{
            fill: 'rgba(26, 145, 80, 1)'
          }
        },
        {
          type: 'topRect',
          shape: {
            api,
            xValue: api.value(0) + index,
            yValue: api.value(1),
            x: location[0],
            y: location[1]
          },
          // style: api.style()
          style: {
            fill: 'rgba(119, 255, 181)'
          }
        }
      ]
    };
  }

  option && myChart.setOption(option);
}
MFline
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Echarts-实现3D效果柱状图（非3d）
一种简单易食的杂烩????
10-19 868
可分为3部分。顶部小菱形，中部普通2维柱子，底部小三角
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
[echarts]vue2项目中折柱图-柱形图伪3d效果实现
最新发布
2301_77838211的博客
04-10 1012
不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦一.需求分析与设计思路项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是报不能识别的错误,为了尽快实现类似效果,就换做左右色差来做效果.
echarts伪3d柱状图绘制（象形柱图）
qq_38872934的博客
12-01 2277
伪3d柱状图效果主要是通过对柱体顶部、底部放置图形（菱形），对柱体设置渐变色进行绘制，从而产生视觉上的3d效果。 象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。 数据来源 dataSource = [ {DateTimeString:'一月', GoodRate: xxx}, ...... {DateTimeString:'十二月', GoodRate: xxx}, ]; 绘制效果 数据处理..
vue echarts绘制伪3d柱状图
qq_42749720的博客
11-03 470
vue echarts绘制伪3d柱状图。
echarts 中实现伪3d柱状图的方法，直接放到官方示例运行就可以浏览效果
井底的青蛙
04-08 6319
1：基于x轴的伪3d柱状图实现： var MyCubeRect = echarts.graphic.extendShape({ shape: { x: 0, y: 0, width: 48, //柱宽 zWidth: 8, //阴影折角宽 zHeight: 4, //阴影折角高...
echarts3d柱状图
唐僧洗头用飘柔
07-12 311
echarts3d柱状图
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
Echarts动态排名柱状图(自适应电脑和手机端)源代码，参见：https://blog.csdn.net/weixin_41290949/article/details/120672844
echarts漂亮的柱状图按月统计
07-20
基于echarts实现的漂亮的柱状图按月统计，彩色样式。
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
Echarts。 3d柱状图
xixi_csdn的博客
12-14 346
文章目录效果代码 效果 参考了https://www.makeapie.com/explore.html 代码 代码如下（示例）： let option = { title: { show: false, }, grid: { left: 100, bottom: 100, }, xAxis: { splitLine: {
MATLAB | 怎样绘制更有立体感的柱状图
slandarer的博客
04-08 756
~
【Vue ECharts开发】实现颜色渐变的伪3D柱状图
柯晓楠
05-27 1234
1. 效果演示 2. 需求分析 绘制图形需要使用 echarts.graphic.extendShape() 方法 和 echarts.graphic.registerShape() 方法； 颜色渐变需要实例化 echarts.graphic.LinearGradient() 对象； 3. 代码实现 安装ECharts依赖： npm i echarts --save 页面模板： <template> <div class="echarts-demo"> <d
Echarts实现3D柱状图（领导要的样子）
热门推荐
yucheng_1995的博客
05-13 3万+
3D柱状图
echarts 伪3D柱状图 pictorialBar
weixin_37982963的博客
09-27 255
前端模拟假数据 barData:{ xAxisData:[1,2,3,4,5,6,7,8], yData:[200,600,400,300,500,200,100,500] } html代码 <div id="echartsBar"></div> js代码 function initBar() { let element = document.getElementById("echartsBar"); let chart = echarts.init(element); l
如何使用echarts实现3d的柱形图
飞翔的小白
12-29 5154
1、首先去官网上下载依赖文件，也可以在我分享的资源中直接下载 options设置如下： var xData = ["可研数据", "测试2", "测试3", "测试4", "测试5", "测试6"] var line = ["1030", "205", "84","568","689","4587"]; var attr ={ 'name':'月平均单价', 'unit':'元/单' } var colors = [] option = { tooltip: {
echarts实现3D柱状图
07-27
要实现echarts的3D柱状图，可以参考以下步骤： 1. 首先，你可以查看echarts官方网站，了解echarts自定义图形的详细用法。\[1\] 2. 参考你提供的案例，可以创建左右两个面，也就是两个柱子。为了形成一点对比，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值