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

已于 2023-03-13 22:31:54 修改
阅读量867 收藏 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
    评论
专栏目录
Echarts 偏移，柱状图偏移，散点图偏移，折线图偏移
虎康的博客
05-12 6384
这个比较难受，官方也有symbolOffset属性，不过使用之后发现：线没偏移，线上的点儿偏移了。动态增加了一个隐藏的x轴（show：false），用来引导折线图的点的位置，核心代码。所以，这个属性不知道有什么用处。
echarts创建立体柱状图（堆叠或单独），面积折线图渐变配置项参考
Femi的博客欢迎大家
03-01 3168
参考效果如图 配置项中需要注意的几个要点： 1. 颜色取值需要有范围，以突出立体感 2. 对于需要堆叠的数据，设置相同stack 3. 对于pictorialBar类型的图，数据大小和图形显示位置通过data和symbolPosition: 'end'，symbolOffset: [0, '50%'],symbolSize: [barWidth, 10]进行调整 4.symbol: 'diamond'展示的是菱形图形，其他类型的可以参考官网配置项 示例代码如下： const color.
Echarts实现3D柱状图
qq_45787691的博客
04-22 770
echarts实现3D柱状图。
Echarts与Echarts-gl构建3D立体环形图，展示默认选项
醉夜梦惊魂的博客
11-08 4461
Echarts与Echarts-gl构建3D立体环形图
Echarts markPoint.symbolOffset 失效问题
BitterSugar的博客
03-27 328
今天在开发Echarts折线图时，想做一个冒泡效果，用到了echarts提供的markPoint对象，在项目里，除了，其他都能正常显示，于是将下面的代码粘贴到echarts自带的示例里运行，发现是能正常修改位置的。
vue echart 3D环形图 静态
weixin_39808181的博客
03-17 728
1.下载：因为3D 图涉及到了echart 的 gl 库，所以需要下载echart和echarts-gl。下一节写echart 3D环形图 动态切换两批数据。
Pyecharts直角坐标系图：象形柱状图
Tomandjava的博客
06-04 2519
Pyecharts直角坐标系图：象形柱状图 文章目录Pyecharts直角坐标系图：象形柱状图前言一. PictorialBar：象形柱状图二. 基本图2.2 习惯标记2.3 自定义标记总结 前言 本文主要展示了Pyecharts象形柱状图的基本应用和简单例子。 一. PictorialBar：象形柱状图 这里add函数：主要是名称，数据，图形类型。 def add_yaxis( # 系列名称，用于 tooltip 的显示，legend 的图例筛选。 series_name:
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts-3d地图数据源js格式
12-16
echarts——实现3D地图+3D柱状图——china.js数据源 echarts.js 3d地图
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
echarts-gl.min.3.8.5.js
07-25
echarts图形报表开发3d柱状图形报表时所需的js文件，3.8.5版本亲测可用，新版本使用时会有不显示的问题，此版本完美兼容
Echarts实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
vue 使用echarts实现3D饼图和环形图
懒虫的博客
09-21 1960
vue 使用echarts实现3D饼图和环形图
JavaScript实现环形图echarts
EBYB的博客
03-23 1418
echarts.js下载链接提取码：qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw 根据以下数据实现环形图 环形图数据 入会方式 数量 自愿 5 微信推广 2 团购促销 3 节日活动 4 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src=
echarts柱状图的样式调整及应用
qq_45991812的博客
03-09 6061
/symbolOffset: [0,-5],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐标轴上显示的文字。data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据。color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色。
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
热门推荐
杜永康的博客
12-26 3万+
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //坐标轴刻度文字数据。symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
echarts画圆柱图pictorialBar
usernotdefined的博客
03-18 1457
效果 源码 data() { return { chartTitleFontSize: 0, // 图表标题文字大小 chartInstance: null, // echart实例 allData: null, // 服务器返回的数据 } }, computed: { titleStyle() { return { fontSize: `${this.chartTitleFontSize * 1.5}px
echarts绘制棱形立体柱状图
一只小橘子
07-14 668
【代码】echarts绘制棱形立体柱状图。
ECharts常用配置
donghua201的博客
10-16 1691
非自定义formatter函数下，变量a、b、c在不同图表类型下代表数据含义为：折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）散点图（气泡）图: a（系列名称），b（数据名称），c（数值数组）, d（无）饼图、雷达图: a（系列名称），b（数据项名称），c（数值）, d（百分比）series: [name: '交易方式',},label: {// 这里是文本块的样式设置：// 1、非自定义formatter函数。
echarts与echarts-gl 实现3D饼图
最新发布
04-23
ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和数据可视化。它支持多种图表类型，包括饼图、柱状图、折线图等。而ECharts-GL是在ECharts的基础上扩展而来，专门用于创建基于WebGL的3D图表。 要实现3D饼图，可以使用ECharts-GL库。首先，你需要引入ECharts-GL库的脚本文件。然后，创建一个容器元素，用于显示图表。接下来，通过配置项来定义饼图的数据和样式。最后，使用ECharts-GL提供的API将配置项应用到容器元素中，即可生成3D饼图。 以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D饼图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [{ type: 'pie3D', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }; // 使用配置项生成图表 myChart.setOption(option); </script> </body> </html> ``` 以上代码中，我们引入了ECharts和ECharts-GL的脚本文件，并创建了一个id为"chart"的容器元素。通过配置项中的series属性，我们定义了一个饼图的数据和样式。最后，使用setOption方法将配置项应用到容器元素中，即可生成3D饼图。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

且陶陶º

感谢大人投喂~

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

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

打赏作者

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

抵扣说明：

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

余额充值