Echarts-实现3D效果柱状图（非3d）

已于 2023-03-13 22:31:54 修改
阅读量884 收藏 3
点赞数
分类专栏： 可视化图形 文章标签： echarts
于 2022-10-19 16:54:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41675812/article/details/127411512
版权

效果图显示

在这里插入图片描述

代码如下

可分为3部分。顶部小菱形，中部普通2维柱子，底部小三角

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"
    ></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="width: 350px; height: 400px"></div>
    <script>
      var myChart = echarts.init(document.getElementById('main'))
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          // 顶部小菱形
          {
            type: 'pictorialBar',
            name: 'pictorial element',
            z: 10,
            data: [
              {
                value: 60,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                symbolSize: ['-90%', 30], //根据柱子大小来做调整
                itemStyle: {
                  normal: {
                    color: '#FEE47B',
                  },
                },
              },
              {
                value: 26,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                symbolSize: ['-95%', 30], //根据柱子大小来做调整
                itemStyle: {
                  normal: {
                    color: '#FEE47B',
                  },
                },
              },
              {
                value: 58,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                symbolSize: ['-95%', 30], //根据柱子大小来做调整
                itemStyle: {
                  normal: {
                    color: '#FEE47B',
                  },
                },
              },
              {
                value: 43,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                symbolSize: ['-95%', 30], //根据柱子大小来做调整
                itemStyle: {
                  normal: {
                    color: '#FEE47B',
                  },
                },
              },
              {
                value: 89,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                symbolSize: ['-95%', 30], //根据柱子大小来做调整
                itemStyle: {
                  normal: {
                    color: '#FEE47B',
                  },
                },
              },
            ],
          },
          // 柱子数据
          {
            type: 'bar',
            name: 'reference bar',
            barGap: '-100%',
            barWidth: 20,
            // symbol: 'image://' + params.picture, // 图片
            symbolOffset: [0, 0],
            z: 2,
            itemStyle: {
              // 渐变
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0, color: '#bd530a' },
                  { offset: 0.5, color: '#bd530a' },
                  { offset: 0.5, color: '#ca7e06' },
                  { offset: 1, color: '#ca7e06' },
                ],
              },
            },
            data: [60, 26, 58, 43, 89],
          },
          // 底部三角形
          {
            type: 'pictorialBar',
            name: 'joy',
            barGap: '-100%',
            z: 3,
            barWidth: 20,
            data: [
              {
                value: 10,
                symbol: 'triangle',
                symbolOffset: [0, 20],
                symbolSize: ['-100%', 20],
                symbolRotate: 180,
                itemStyle: {
                  color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      { offset: 0, color: '#bd530a' },
                      { offset: 0.5, color: '#bd530a' },
                      { offset: 0.5, color: '#ca7e06' },
                      { offset: 1, color: '#ca7e06' },
                    ],
                  },
                },
              },
              {
                value: 10,
                symbol: 'triangle',
                symbolOffset: [0, 20],
                symbolSize: ['-100%', 20],
                symbolRotate: 180,
                itemStyle: {
                  color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      { offset: 0, color: '#bd530a' },
                      { offset: 0.5, color: '#bd530a' },
                      { offset: 0.5, color: '#ca7e06' },
                      { offset: 1, color: '#ca7e06' },
                    ],
                  },
                },
              },
              {
                value: 10,
                symbol: 'triangle',
                symbolOffset: [0, 20],
                symbolSize: ['-100%', 20],
                symbolRotate: 180,
                itemStyle: {
                  color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      { offset: 0, color: '#bd530a' },
                      { offset: 0.5, color: '#bd530a' },
                      { offset: 0.5, color: '#ca7e06' },
                      { offset: 1, color: '#ca7e06' },
                    ],
                  },
                },
              },
              {
                value: 10,
                symbol: 'triangle',
                symbolOffset: [0, 20],
                symbolSize: ['-100%', 20],
                symbolRotate: 180,
                itemStyle: {
                  color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      { offset: 0, color: '#bd530a' },
                      { offset: 0.5, color: '#bd530a' },
                      { offset: 0.5, color: '#ca7e06' },
                      { offset: 1, color: '#ca7e06' },
                    ],
                  },
                },
              },
              {
                value: 10,
                symbol: 'triangle',
                symbolOffset: [0, 20],
                symbolSize: ['-100%', 20],
                symbolRotate: 180,
                itemStyle: {
                  color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      { offset: 0, color: '#bd530a' },
                      { offset: 0.5, color: '#bd530a' },
                      { offset: 0.5, color: '#ca7e06' },
                      { offset: 1, color: '#ca7e06' },
                    ],
                  },
                },
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    </script>
  </body>
</html>
且陶陶º
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
图片环形3d效果
08-30
图片3d资源效果
关于echarts.js 柱形图
diesi4323的博客
10-30 246
echarts.js官网： http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客： https://blog.csdn.net/qq_36330228/article/details/79945928 效果图如下 代码如下 <!DOCTYPE html> <html&gt...
echarts绘制三维柱状图
最新发布
pengbr的博客
06-02 1226
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。ECharts 支持丰富的图表类型，如折线图、柱状图、饼图、地图、K线图等，可以满足不同类型数据的展示需求。 文档地址：echarts 本次所绘制三维柱状图主要使用的是示例源代码，在此基础上做了些修改。 引入CDN 使用echarts需要导入echarts和echarts-gl。 免费的CDN服务可访问网址：Staticfile CDN <!-- 引入 ECharts 文件 --> &
echarts创建立体柱状图（堆叠或单独），面积折线图渐变配置项参考
Femi的博客欢迎大家
03-01 3222
参考效果如图 配置项中需要注意的几个要点： 1. 颜色取值需要有范围，以突出立体感 2. 对于需要堆叠的数据，设置相同stack 3. 对于pictorialBar类型的图，数据大小和图形显示位置通过data和symbolPosition: 'end'，symbolOffset: [0, '50%'],symbolSize: [barWidth, 10]进行调整 4.symbol: 'diamond'展示的是菱形图形，其他类型的可以参考官网配置项 示例代码如下： const color.
Echarts饼图4.0（3D环形图、包含透明效果）
努力的nana
06-09 2593
【代码】Echarts饼图4.0（3D环形图、包含透明效果）
echarts环形3D立体图
u011933026的博客
11-02 1958
echarts3d立体环形图
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 8万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
echarts结合echarts-gl实现3D飞线地球可视化
08-05
ECharts-GL提供了3D地图、粒子系统、3D柱状图等多种3D图表，其中3D飞线图用于展现地理路径，如航线、航班轨迹等。要实现3D飞线地球，你需要创建一个HTML页面，引入ECharts和ECharts-GL的JavaScript库，并设置一个...
ECharts-GL 3D地球实例（动态改变自转、加载去空白圆心）
05-11
ECharts-GL是一款基于ECharts扩展的3D图表库，它为用户提供了丰富的3D可视化效果，包括3D地球、3D柱状图等。在本实例中，我们将重点探讨如何实现ECharts-GL 3D地球的动态自转、解决加载时出现空白圆心的问题，以及...
ECharts-GL 3D可视化库 v2.0.8.zip
03-21
1. **3D图表类型**：ECharts-GL支持多种3D图表，如3D散点图、3D柱状图、3D地形图、3D网格图、3D流线图等。这些图表使数据呈现更直观，帮助用户从不同角度理解复杂的数据关系。 2. **GPU加速**：利用WebGL技术，...
基于ECharts GL的3D图表展示设计与实现
04-15
创建一个简单的3D柱状图可以这样实现： ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option = { xAxis3D: {type: 'category', data: ['Category 1...
使用Echarts-X.JS实现3D地球
07-06
ECharts是一个由百度开发的JavaScript数据可视化库，支持各种图表类型，包括柱状图、折线图、饼图等。ECharts-X则是ECharts的扩展，提供了更多高级的可视化功能，如3D地图、3D地球、流图等。 要实现3D地球，我们...
Echarts 偏移，柱状图偏移，散点图偏移，折线图偏移
虎康的博客
05-12 6918
这个比较难受，官方也有symbolOffset属性，不过使用之后发现：线没偏移，线上的点儿偏移了。动态增加了一个隐藏的x轴（show：false），用来引导折线图的点的位置，核心代码。所以，这个属性不知道有什么用处。
3D圆环图Echarts + 图例滚动显示 + tooltip鼠标经过的弹框滚动显示
weixin_45096939的博客
01-27 2503
这是一个3D效果的Echarts圆环图，每个类别的数据相当于高度，图例可以滚动显示，tips也可以滚动显示，完整代码看最后。2.tooltip鼠标经过弹框滚动效果。1.图例滚动显示效果。
ECharts折线图修改 标点位置 圆点位置 标点位置偏移
m0_59250071的博客
12-01 1511
有时间我们可能希望标记位置有所偏移,例如标点是图片的时候,这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。例如 [0, ‘-50%’] 就是把自己向上移动了一半的位置。标记原本默认是居中的。
echarts如何实现3D饼图(环形图)?
i-cat的博客
03-04 5319
自定义修改3D饼图的宽高和legend
echarts写3d圆环，并解决圆环数据相同时显示异常问题
m0_53001289的博客
03-15 1072
echarts3d圆环
Echarts与Echarts-gl构建3D立体环形图，展示默认选项
醉夜梦惊魂的博客
11-08 4558
Echarts与Echarts-gl构建3D立体环形图
echarts与echarts-gl 实现3D饼图
04-23
它支持多种图表类型，包括饼图、柱状图、折线图等。而ECharts-GL是在ECharts的基础上扩展而来，专门用于创建基于WebGL的3D图表。 要实现3D饼图，可以使用ECharts-GL库。首先，你需要引入ECharts-GL库的脚本文件。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

且陶陶º

感谢大人投喂~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值