记录下echarts立体柱形图实现的几种方式

已于 2023-04-12 14:58:41 修改
阅读量2.6k 收藏 21
点赞数 6
文章标签： echarts 前端 javascript
于 2023-03-24 10:50:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35438952/article/details/129744355
版权

echarts官网

所有代码可以直接复制到ecarts中运行echarts网址

1. 简单的立体柱形图 实现方式

在这里插入图片描述

这种比较简单主要是用上下两个菱形造成视觉差，只需要在原有柱形图中添加两个菱形就行。

实现方法

const dataList = 
[
  { name: '周一', value: '120' },
  { name: '周二', value: '200' },
  { name: '周三', value: '150' },
  { name: '周四', value: '80' },
  { name: '周五', value: '70' },
  { name: '周六', value: '110' },
  { name: '周天', value: '130' },
]
option = {
  xAxis: {
    type: 'category',
    data: dataList.map(item => item.name),
    axisLabel: {
      margin: 20
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: '#3398BC' },
          { offset: 1, color: '#3C7AB9' }
        ])
      },
      z: 1,
    },
    {
      // 最上面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0,0,1,0,[
          { offset: 0, color: '#3391BC' },
          { offset: 1, color: '#3C71B9' }
          ])
      },
      z: 2
    },
    {
      // 最下面的菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'start',
      symbolOffset: ['', '50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1,0,0,0,[
          { offset: 0, color: '#3391BC' },
          { offset: 1, color: '#3C71B9' }
          ])
      },
      z: 2
    }
  ]
};

2. 利用两条数据图设置不同颜色让柱子更加立体

在这里插入图片描述

这种主要是在方式一种 多生成一个柱形数据 利用series中的barGap属性 把两个柱形图的间距改成0，可使两个柱形图并排显示设置不同颜色让立体效果更加明显
注意：barGap是通用的，无论设置多少次 还是会以最后一个为主

实现方法

const dataList = 
[
  { name: '周一', value: '120' },
  { name: '周二', value: '200' },
  { name: '周三', value: '150' },
  { name: '周四', value: '80' },
  { name: '周五', value: '70' },
  { name: '周六', value: '110' },
  { name: '周天', value: '130' },
]
option = {
  xAxis: {
    type: 'category',
    data: dataList.map(item => item.name),
    axisLabel: {
      margin: 20
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 1, color: '#3398BC' }
        ])
      },
      z: 1,
    },
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barGap: 0,
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#4DACFF' },
          { offset: 1, color: '#44D9FC' }
        ])
      },
      z: 1,
    },
    {
      // 最上面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color:'#44D5FC'
      },
      z: 2
    },
    {
      // 最下面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'start',
      symbolOffset: ['', '50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 0.5, color: '#3C7AB9' },
          { offset: 0.51, color: '#4DACFF' },
          { offset: 1, color: '#4DACFF' }
        ])
      },
      z: 1
    },
  ]
};

3. 含背景的立体柱形图

在这里插入图片描述

这种主要是在图二基础上再加一个数据图 数据图需要重叠，就需要把barGap属性设置成“-100%”让所有图形全重叠。把方式二中一个图形设置成最宽 也就是我这儿的 barWidth: 40,另一个设置成40的一半并且 把z的层级变高这样就会形成小图在上大图在下。再在这个基础上添加一个数据图，数据都为最大，宽度也设置为40；顶部菱形也同理。

实现方法

const dataList = 
[
  { name: '周一', value: '120' },
  { name: '周二', value: '200' },
  { name: '周三', value: '150' },
  { name: '周四', value: '80' },
  { name: '周五', value: '70' },
  { name: '周六', value: '110' },
  { name: '周天', value: '130' },
]
let max = dataList.map(item => item).sort((a,b) => b.value - a.value)[0]
let dataMaxList = new Array(dataList.length).fill(max)
option = {
  xAxis: {
    type: 'category',
    data: dataList.map(item => item.name),
    axisLabel: {
      margin: 20
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barGap: '-100%',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 1, color: '#3398BC' }
        ])
      },
      z: 2,
    },
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#4DACFF' },
          { offset: 1, color: '#44D9FC' }
        ])
      },
      z: 1,
    },
    {
      // 最上面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color:'#44D5FC'
      },
      z: 3
    },
    {
      // 最下面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'start',
      symbolOffset: ['', '50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 0.5, color: '#3C7AB9' },
          { offset: 0.51, color: '#4DACFF' },
          { offset: 1, color: '#4DACFF' }
        ])
      },
      z: 1
    },
    {
      // 背景图数据图
      data: dataMaxList,
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        color: "rgba(77, 172, 255, 0.2)"
      },
      z: 0,
    },
    {
      // 背景图最上面菱形
      data: dataMaxList,
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(77, 172, 255, 0.1)' },
          { offset: 1, color: 'rgba(77, 172, 255, 0.2)' }
        ])
      },
      z: 3
    },
  ]
};

4. 补充 柱形图上面显示数据

在最上面的菱形中添加 label 属性

{
      // 最上面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      // 添加的属性。
      label: {
        show: true,
        position: 'top',
        color: '#f00'
      },
      
      
      itemStyle: {
        color:'#44D5FC'
      },
      z: 3
    },

5. 补充 柱形图中数据带负值的 需要单独处理

const dataList = 
[
  { name: '周一', value: '-120' },
  { name: '周二', value: '200' },
  { name: '周三', value: '150' },
  { name: '周四', value: '80' },
  { name: '周五', value: '70' },
  { name: '周六', value: '110' },
  { name: '周天', value: '130' },
]
option = {
  xAxis: {
    type: 'category',
    data: dataList.map(item => item.name),
    axisLabel: {
      margin: 20
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 1, color: '#3398BC' }
        ])
      },
      z: 1,
    },
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barGap: 0,
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#4DACFF' },
          { offset: 1, color: '#44D9FC' }
        ])
      },
      z: 1,
    },
    {
      // 最上面菱形
      data: dataList.map(item => {
        return {
          value: item.value,
          symbol: 'diamond',
          symbolSize: ['40', '30'],
          symbolPosition: 'end',
          symbolOffset: item.value>=0? ['', '-50%']:['', '50%'],
          itemStyle: {
            color: item.value>=0?'#44D5FC':new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#3C7AB9' },
                { offset: 0.5, color: '#3C7AB9' },
                { offset: 0.5, color: '#4DACFF' },
                { offset: 1, color: '#4DACFF' }
              ])
          },
        }
      }),
      type: 'pictorialBar',
      z: 2,
    },
    {
      // 最下面菱形
      data: dataList.map(item => {
          return {
            value: item.value,
            symbol: 'diamond',
            symbolSize: ['40', '30'],
            symbolPosition: 'start',
            symbolOffset:item.value>=0? ['', '50%']:['', '-50%'],
            itemStyle: {
              color: item.value>=0?new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#3C7AB9' },
                { offset: 0.5, color: '#3C7AB9' },
                { offset: 0.5, color: '#4DACFF' },
                { offset: 1, color: '#4DACFF' }
              ]):'#44D5FC'
            },
          }
      }),
      type: 'pictorialBar',
      z: 2
    },
  ]
};
qq_35438952
关注
  • 6
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
echarts柱状图（多色柱状图+标注）
香蕉的博客
01-13 870
option = { title: { text: '2021年1月13日张三病历', subtext: '纯属虚构' }, tooltip: { }, xAxis: { type: 'category', data: ['R', 'K', 'MA', 'G', 'EPL', 'LY30', 'Angle'] }, yAxis: { type: 'value' ...
echarts柱状图实现立体柱状效果，柱体出现时显示上升动画，柱体上方数字也从0开始动画
velma_M的博客
04-08 2579
【代码】echarts柱状图实现立体柱状效果，柱体出现时显示上升动画，柱体上方数字也从0开始动画。
echarts堆叠立体柱状图+混合折线+轮播
weixin_72552407的博客
05-08 746
堆叠 立体 柱状图
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts绘制三维柱状图
最新发布
pengbr的博客
06-02 1328
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。ECharts 支持丰富的图表类型，如折线图、柱状图、饼图、地图、K线图等，可以满足不同类型数据的展示需求。 文档地址：echarts 本次所绘制三维柱状图主要使用的是示例源代码，在此基础上做了些修改。 引入CDN 使用echarts需要导入echarts和echarts-gl。 免费的CDN服务可访问网址：Staticfile CDN <!-- 引入 ECharts 文件 --> &
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 1万+
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。
weixin_46587302的博客
09-13 3945
echarts柱状图设置立体形状，不同颜色，不同颜色lable，内部阴影渐变
vue使用echarts实现水平柱形图实例
11-19
文件结构：
【JavaScript源代码】vue基于echarts实现立体柱形图.docx
12-29
实现立体柱形图的过程中，还需要注意以下几点： - 需要确保ECharts库已经正确引入，并且Vue项目能够访问到。 - `api`对象在`buildPath`中用来获取坐标转换和其他辅助信息，例如`api.coord`可以将数据坐标转换为屏幕...
JS 使用 ECharts 实现柱形图
08-14
在本文中，我们将深入探讨如何使用ECharts在JavaScript中实现柱形图。 首先，确保你已经正确引入了ECharts库。你可以通过CDN（内容分发网络）链接或下载ECharts库到本地项目中。通常，引入ECharts的方式是在HTML...
ajax动态赋值echarts的实例(饼图和柱形图)
10-18
下面小编就为大家分享一篇ajax动态赋值echarts的实例(饼图和柱形图)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts实现单3D立体柱状图
热门推荐
Dalin0929的博客
11-26 1万+
效果图： 实现代码： function getEcharts3DBar (xAxisData, data, colorType) { var colorArr = []; if (colorType == '01') { colorArr = ["#2886c6", "#50bfda", "#89e3ec"]; } else { colorArr = ["#28c1c6", "#50dac0", "#87e8c7"]; } var c
echarts绘制棱形立体柱状图
一只小橘子
07-14 786
【代码】echarts绘制棱形立体柱状图。
echarts立体柱状图
MISS_CJL的博客
12-10 3089
效果图： 安装echarts npm install echarts --save main.js import Vue from 'vue' import App from './App' import echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', comp..
vue中使用echart实现三维立体图
Alisane的博客
12-21 3878
echart实现三维立体图，这个有一个踩坑点，echart在渲染数据的时候，会有过渡动画效果，当数据量大的时候，会使图表在绘制过程中卡住，解决这个问题的办法是去掉过渡动画效果：grid3D.viewControl.animation = false。 this.myChart3 = this.$echarts.init(document.getElementById('myChart3')) this.option3 = { title: { t.
echarts 立体柱状图
小城小永
11-30 690
echarts 立体柱状图
echarts立体柱形图
04-27
ECharts 是一个基于 JavaScript 的开源可视化库，它可以用于制作各种类型的图表，包括立体柱形图。立体柱形图是一种三维图表，它可以展示数据在三个方向上的变化情况，通过不同的高度来表示数据的大小。 在 ECharts 中制作立体柱形图，需要使用柱形图和三维坐标系两个组件。柱形图组件用于绘制柱形，而三维坐标系组件则负责展示立体效果。 下面是一个简单的立体柱形图的配置示例： ``` option = { tooltip: {}, visualMap: { max: 20, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'category', data: ['2019', '2020', '2021'] }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { distance: 300 }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [{ type: 'bar3D', data: [ ['A', 0, '2019', 10], ['B', 1, '2019', 15], ['C', 2, '2019', 13], ['D', 3, '2019', 17], ['E', 4, '2019', 12], ['A', 0, '2020', 7], ['B', 1, '2020', 9], ['C', 2, '2020', 11], ['D', 3, '2020', 15], ['E', 4, '2020', 8], ['A', 0, '2021', 12], ['B', 1, '2021', 8], ['C', 2, '2021', 14], ['D', 3, '2021', 10], ['E', 4, '2021', 15] ], shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 } }, itemStyle: { opacity: 0.8 } }] }; ``` 以上代码中，我们定义了一个三维坐标系和一个柱形图。柱形图的数据包括横轴、纵轴和高度，通过 series.type 属性指定为 bar3D 类型。grid3D 中定义了一些参数用于控制立体效果的显示，包括箱子的宽度和深度，视角距离和光照等。在页面中引入 echarts.min.js 文件后，可以通过调用 echarts.init() 方法和 setOption() 方法将配置应用到图表中。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值