echarts 柱状图【立体】

已于 2023-08-17 18:16:41 修改
阅读量1.3w 收藏 66
点赞数 10
文章标签： echarts
于 2022-04-28 19:50:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43957384/article/details/124411688
版权

官网链接

  1. echarts 柱状图上面显示文字 label
	series: [
        {
          name: 'a',
          tooltip: {
            show: false,
          },
          data: this.data,
          type: 'bar',
          barWidth: 16, // 柱条的宽度，不设时自适应。
          barGap: 200, // 不同系列的柱间距离
          itemStyle: {
            normal: {
              color: (param) => {
              	// 渐变色 0, 0, 0, 1代表右下左上 1是说明从那个方向
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: param.data.startColor },
                    { offset: 1, color: param.data.endColor }
                  ])
                },
                // 主要是这个地方
                label: {
                    formatter: "{c}"+'个', //自定义展示 如果想直接显示原数值 这一行可以省略  
                    show: true,
                    position: "top",
                    textStyle: {
                      fontWeight: "bolder",
                      fontSize: "12",
                      color: "#fff"
                    }
                  },
              }
            } ,
          },
          ]

关于 formatter

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 ‘xxx’ 的维度的值，如 {@product} 表示名为 ‘product’ 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

换行展示\n
formatter: “{a}\n{c}”,

https://echarts.apache.org/zh/option.html#series-bar.label.formatter
2. 立体柱状图
发现了三个博主的文章比较👍
https://blog.csdn.net/weixin_45626040/article/details/107607049
https://blog.csdn.net/yh_hh/article/details/120290882
https://www.jianshu.com/p/341a6aac7c92

参考了他们的文章之后 自己的代码如下 效果图如下

请添加图片描述

1中代码如下。【也是我使用的最终版】

private get option(){
    return {
      xAxis: {
        type: 'category',
        data: this.data.map(i => i.label),
        // x坐标轴为虚线
        axisLine: {
          lineStyle: {
            color: 'rgba(11, 73, 125, 0.33)',
            opacity: 0.8
          }
        },
        // 不展示下面｜
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#B0E1FF',
          fontSize: 12 // 字体大小
        }
      },
      yAxis: {
        type: 'value',
        // 不展示刻度线
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#B0E1FF',
          fontSize: 12 // 字体大小
        }
      },
      // 栅格
      grid: {
        left: '0',
        right: '0',
        bottom: '0%',
        top: '16px',
        containLabel: true
      },
      series: [
        // 数据低下的圆片
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [16, 8], // 宽，高
          symbolOffset: [0, 4], // 左 上
          z: 3,
          symbol: 'diamond',
          itemStyle: {
            color: params => params.data.startColor
          },
          data: this.data
        },
        // 数据的柱状图
        {
          name: '',
          type: 'bar',
          barWidth: 16,  // 柱条的宽度，不设时自适应。
          barGap: '-100%', // 不同系列的柱间距离
          itemStyle: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: params.data.startColor },
                { offset: 1, color: params.data.endColor }
              ]);
            },
          },
          data: this.data
        },
        // 数据顶部的样式
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'diamond',
          symbolSize: [16, 8],
          symbolOffset: [0, -4],
          z: 3,
          itemStyle: {
            normal: {
              color: params => params.data.endColor,
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  fontSize: '12',
                  color: '#B0E1FF',
                }
              }
            }
          },
          symbolPosition: 'end',
          data: this.data
        },
      ]
    }
  }

2.0代码如下

	series: [
        // 数据低下的圆片
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'diamond',
          // symbolSize: [16, 8],
          // symbolOffset: [0, 4], 
          symbolSize: [16,10], // 宽，高
          symbolOffset:[0,2],// 左 上
          symbolPosition: 'start',
          z: 0,
          itemStyle: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: params.data.topStartColor },
                { offset: 1, color: params.data.topEndColor }
              ]);
            }
          },
          data: this.data
        },
        // 数据的柱状图
        {
          name: '',
          type: 'bar',
          barWidth: 8, // 柱条的宽度，不设时自适应。 
          showSymbol: false,
          hoverAnimation: false,
          data: this.data,
          itemStyle: {
            normal: {
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: params.data.startColor },
                  { offset: 1, color: params.data.endColor }
                ]);
              },
              borderRadius:[2,0,0,100],
            }
          },
        },
        {
          name: '',
          type: 'bar',
          barWidth: 8, // 柱条的宽度，不设时自适应。
          barGap: '0', // 不同系列的柱间距离
          data: this.data,
          itemStyle: {
            normal: {
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: params.data.startColor },
                  { offset: 1, color: params.data.endColor }
                ]);
              },
              borderWidth: 0.1,
              borderColor:'black',
              barBorderRadius:[0,2,100,0]
            }
          },
        },
        // 数据顶部的样式
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'diamond',
          // symbolOffset: [0, -4],
          symbolSize: [16,9],
          symbolOffset:[0,-4],
          symbolPosition: 'end',
          z: 3,
          itemStyle: {
            normal: {
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: params.data.topStartColor },
                  { offset: 1, color: params.data.topEndColor }
                ]);
              },
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  fontSize: '12',
                  color: '#B0E1FF'
                },
                offset:[0,-2]
              }
            }
          },
          data: this.data
        },
      ]

3.0 与2.0 差不多 只不过修改了barBorderRadius 和顶部的offset

<template>
  <echarts :option="option" />
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import Echarts from '@/components/echarts/Echarts.vue';
import { CurrentErrorTypeListModel } from '@sarai/model/home';

@Component({
  components: {
    Echarts
  }
})
export default class ErrorChartStatistics extends Vue {
  @Prop(Array)
  private data !: CurrentErrorTypeListModel[];

  private get option () {
    return {
      xAxis: {
        type: 'category',
        data: this.data.map(i => i.label),
        // x坐标轴为虚线
        axisLine: {
          lineStyle: {
            color: 'rgba(11, 73, 125, 0.33)',
            opacity: 0.8
          }
        },
        // 不展示下面｜
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#B0E1FF',
          fontSize: 12 // 字体大小
        }
      },
      yAxis: {
        type: 'value',
        // 不展示刻度线
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#B0E1FF',
          fontSize: 12 // 字体大小
        }
      },
      // 栅格
      grid: {
        left: '0',
        right: '0',
        bottom: '0%',
        top: '22px',
        containLabel: true
      },
      series: [
        // 数据低下的圆片
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'diamond',
          symbolSize: [16, 9], // 宽，高
          symbolOffset: [0, 5], // 左 上
          symbolPosition: 'start',
          z: 1,
          data: this.data,
          itemStyle: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: params.data.topStartColor },
                { offset: 1, color: params.data.topEndColor }
              ]);
            }
          }
        },
        // 数据的柱状图
        {
          name: '',
          type: 'bar',
          barWidth: 8, // 柱条的宽度，不设时自适应。
          data: this.data,
          itemStyle: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: params.data.leftStartColor },
                { offset: 1, color: params.data.leftEndColor }
              ]);
            },
            // emphasis: {
            //   borderWidth: 15,
            //   borderColor: 'red',
            // }
          }
        },
        {
          name: '',
          type: 'bar',
          barWidth: 8, // 柱条的宽度，不设时自适应。
          barGap: 0, // 不同系列的柱间距离
          data: this.data,
          itemStyle: {
            normal: {
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: params.data.rightStartColor },
                  { offset: 1, color: params.data.rightEndColor }
                ]);
              },
              borderWidth: 0.1,
              borderColor: 'transparent'
            }
          }
        },
        // 数据顶部的样式
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'diamond',
          symbolSize: [16, 9],
          symbolOffset: [0, -4],
          symbolPosition: 'end',
          z: 3,
          itemStyle: {
            normal: {
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: params.data.topStartColor },
                  { offset: 1, color: params.data.topEndColor }
                ]);
              },
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  fontSize: '12',
                  color: '#B0E1FF'
                }
              }
            }
          },
          data: this.data
        }
      ]
    };
  }
}
</script>
xiaaaa.z
关注
  • 10
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
ECharts: 绘制立体柱状图【圆柱体】
m0_58293192的博客
01-10 8681
ECharts: 绘制立体柱状图【圆柱体】
使用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的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 7288
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echarts 柱状图 详解与使用集合
最新发布
2401_84097996的博客
04-06 913
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-NOms0EC5-1712408489074)][外链图片转存中…(img-FnncgeKm-1712408489075)]
Echarts立体柱状图
Summer_JK的博客
11-07 1万+
echarts绘制漂亮的立体柱状图（超详细） 为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码： HTML： <div class="content bgBox"> <div class="firstTitle"> <p class="titleName">购买力最强</p> </div> <div id="buyTop" style="width: 100%;h
echarts - 自定义形状 - 实现立体柱状图
qq_35432583的博客
05-13 3744
如果需要复杂的图表样式，echarts 自带的 series 类型无法满足，那么就可以使用 custom 类型，这时就需要通过 canvas 手动绘制图表的形状了。
echarts 好看的柱形图
weixin_45897915的博客
02-19 1537
option = { legend: {}, // 鼠标放上显示提示 tooltip: { trigger: 'axis', //触发类型 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用，'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 axisPointer: { //坐标轴指示器，坐标轴触发有效 type: 'cross', //默认为直线，可选line s
通过Echarts怎样实现立体柱状图
weixin_55123102的博客
02-22 6072
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现`
1947-2020 NBA总冠军次数排行榜
大数据
01-18 2322
导读：你的主队排第几？关注数据叔视频号，看更多好玩视频????划重点????干货直达????人工智能三大关键能力，终于有人讲明白了数据缺失值的3种处理方式，终于有人讲明白了5G时代不可或...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5014
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
echarts柱状图配置代码详解，柱状图常用图例代码
热门推荐
做笔记/记录遇到的前端bug
03-14 1万+
一篇足够，带你快速上手echarts柱状图，附渐变柱状图、堆叠柱状图、多柱柱状图、横向柱状图等详细配置代码
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
Echarts实现柱状图效果
07-07
该文件内包含图表类型：基础柱状图、条纹柱状图、带背景条纹柱状图、堆叠柱状图、横向柱状图、双向柱状图、冰山图、立体柱状图
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
echarts 实现圆柱体图形.zip
05-14
echarts实现平面的柱状图很顺利，但是用户为了美观，立体感，用到圆柱体图，网上也查了很多资料，自己做了很好看的效果，希望大家能采用到。
echarts柱状图自定义样式（一）
miracle__Y的博客
02-09 7492
在最近业务开展过程中，涉及到highcharts和echarts的图表数据展示颇多，后UI设计师根据数据展示要求设计出花里胡哨的图表样式，正好最近也来研究一下，后续会补几篇相关博文。废话也不多说，先上效果： 以下为实例代码（可直接复制至echarts官网查看效果） option = { grid: { left: '-5%', right:...
echarts 好看的柱状图样式
w1olol的博客
08-04 1万+
//html //jsvar dataAxis = ['08/01', '08/02', '08/03', '08/04', '08/05', '08/06', '08/07'];var data = [26, 30, 28,36, 25, 32, 29]; var getOption = function() {var chartOption = { grid: { x: 25,x2: 2
echart实现立体的柱状图
时光淡然
01-04 2940
效果图： 代码： var xData3 = ["6", "7", "8", "9","10","11"]; var data3 = [1209, 1715, 2408, 1308, 1308, 1145]; var data5 = [4000, 4000, 4000, 4000, 4000,4000]; var option = { tooltip: { trigger: "axis", show: false, },
echarts实现多3D立体柱状图
Dalin0929的博客
11-26 1万+
效果图： 实现代码： // 立体多柱状图 function getSolidOption(data1, data2, data3) { // 月份坐标轴 var nowMonth = new Date().getMonth() + 1; var lineXAxisData = []; for (var i = 5; i >= 0; i--) { var month = nowMonth - i; if (month < 1) { lineXAxisD
echarts柱状图立体
09-06
您可以使用 ECharts 中的 `bar3D` 来创建立体柱状图。以下是一个简单的示例代码： ```javascript // 引入 ECharts var echarts = require('echarts'); // 初始化图表容器 var container = document.getElementById('chart'); // 初始化图表 var myChart = echarts.init(container); // 图表配置 var option = { tooltip: {}, visualMap: { max: 20, inRange: { color: ['#e0ffff', '#006edd'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'category', data: ['X', 'Y', 'Z'] }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // 设为 true 启用鼠标旋转和缩放控制 autoRotate: true } }, series: [{ type: 'bar3D', data: [ ['A', 0, 'X', 5], ['B', 1, 'X', 10], ['C', 2, 'X', 15], ['D', 3, 'X', 12], ['E', 4, 'X', 7], ['A', 0, 'Y', 8], ['B', 1, 'Y', 3], ['C', 2, 'Y', 9], ['D', 3, 'Y', 6], ['E', 4, 'Y', 4], ['A', 0, 'Z', 2], ['B', 1, 'Z', 7], ['C', 2, 'Z', 18], ['D', 3, 'Z', 13], ['E', 4, 'Z', 5] ], shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 } }, emphasis: { label: { textStyle: { fontSize: 20, color: '#900' } }, itemStyle: { color: '#900' } } }] }; // 渲染图表 myChart.setOption(option); ``` 您可以根据需求修改数据和配置项，以创建符合您期望的立体柱状图。请确保已正确引入 ECharts，并将图表渲染到指定的容器中（如上述代码中的 `container`）。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值