echarts堆叠、渐变、圆柱、底部发光柱状图

最新推荐文章于 2024-03-22 17:21:52 发布
最新推荐文章于 2024-03-22 17:21:52 发布
阅读量2k 收藏 12
点赞数 3
文章标签： vue vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42812634/article/details/124035149
版权

这种柱状图涉及到了堆叠、渐变、圆柱、底部发光等多个知识点，我找了很多资料，没有一摸一样的例子，于是我自己组合了一下，分享给大家。

先看效果图：
在这里插入图片描述
下面就让我们看看如何实现吧：
1.html中定义一个div，用来盛放柱状图

<div style="width: 500px; height: 194px" id="barChartFour"></div>

2.引入echarts

import * as echarts from "echarts";

3.js代码

getBarChart() {
      var myChart = this.echarts.init(document.getElementById("barChartFour"));
      var option = {
        backgroundColor: "rgb(0,0,0,0)",
        grid: {
          top: "15%",
          left: "1%",
          bottom: "5%",
          right: "3%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            fontSize: 14,
          },
        },
        legend: {
          show: true,
          right:'10',
          y: "1%",
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: '0.72vw',
          },
          data: ["用电负荷", "发电量"],
        },
        xAxis: [
          {
            type: "category",
            name: "",
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#319899",
                fontSize: "14",
                fontFamily: "Source Han Sans CN",
              },
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#086680",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#197584",
              },
            },
            data: this.Xdata
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "MW",
            nameTextStyle: {
              fontSize: 14,
              color: '#319899',
              fontFamily: 'DIN',
              fontWeight: 'bold'
            },
            axisLabel: {
              textStyle: {
                color: "#319899",
                fontSize: "14",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#086680",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(0,246,255,0.4)",
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          // 顶部圈
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [8, 5],
            symbolOffset: [-8, -3],
            symbolPosition: "end",
            z: 12,
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
                position: "top",
                fontSize: 14,
                color: "#fff",
              },
            },
            color: "#FAD961",
            data: this.YdataOne
          },
          // 底部内圈
          {
            name: "",
            type: "pictorialBar",
            tooltip: {
              show: false,
            },
            symbolSize: [11, 6],
            symbolOffset: [-8, 5],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#FAD961",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: this.YdataOne
          },
          // 底部外圈
          {
            name: "",
            type: "pictorialBar",
            tooltip: {
              show: false,
            },
            symbolSize: [18, 8],
            symbolOffset: [-8, 7],
            // z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#F76B1C",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: this.YdataOne
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [8, 5],
            tooltip: {
              show: false,
            },
            symbolOffset: [-8, 3],
            z: 12,
            color: "#FAD961",
            data: this.YdataOne
          },
          {
            type: "bar",
            name: "用电负荷",
            barWidth: "8",
            label: {
              normal: {
                show: false,
                position: "top",
                fontSize: 14,
                color: "#fff",
                opacity: 1,
              },
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(247,107,28, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(250,217,97, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                opacity: 1,
              },
            },
            data: this.YdataOne
          },
          // 第二根柱子
          // 头部圆
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [8, 5],
            symbolOffset: [8, -3],
            symbolPosition: "end",
            z: 12,
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
                position: "top",
                fontSize: 14,
                color: "#fff",
              },
            },
            color: "#80E5D1",
            data: this.YdataTwo
          },
          // 底部内圈
          {
            name: "",
            type: "pictorialBar",
            tooltip: {
              show: false,
            },
            symbolSize: [11, 6],
            symbolOffset: [8, 5],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#80E5D1",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: this.YdataTwo
          },
          // 底部外圈
          {
            name: "",
            type: "pictorialBar",
            tooltip: {
              show: false,
            },
            symbolSize: [18, 8],
            symbolOffset: [8, 7],
            // z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#005B75",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: this.YdataTwo
          },
          // 底部圈
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [8, 5],
            tooltip: {
              show: false,
            },
            symbolOffset: [8, 3],
            z: 12,
            color: "#80E5D1",
            data: this.YdataTwo
          },
          {
            type: "bar",
            name: "发电量",
            barWidth: "8",
            stack: "ke",
            barGap: "100%",
            label: {
              normal: {
                show: false,
                position: "top",
                fontSize: 14,
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,91,117, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(128,229,209, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                opacity: 1,
              },
            },
            data: this.YdataTwo
          },
          {
            type: "bar",
            name: "总装机容量",
            barWidth: "8",
            stack: "ke",
            barGap: "100%",
            label: {
              normal: {
                show: false,
                position: "top",
                fontSize: 14,
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(0,91,117,0.8)",
                opacity: 1,
              },
            },
            data: this.YdataThree
          },
          {
            name: "总装机容量",
            type: "pictorialBar",
            symbolSize: [8, 5],
            symbolOffset: [8, -3],
            symbolPosition: "end",
            z: 12,
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
                position: "top",
                fontSize: 14,
                color: "#fff",
              },
            },
            color: "rgb(0,91,117,1)",
            data: this.YdataThree
          },
        ],
      };
      myChart.setOption(option);
    },

至此，便制作完成了

小怪兽，让我来保护你
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts可视化图表： 发光折线图 及 渐变色柱状图
05-11
通过Vue + Echarts 实现，数据可视化展示，通过发光折线图 混合 渐变色柱状图实现数据可视化。 具体实现效果，可见博客文章，
echarts 柱形图辅助线添加及闪烁效果的实现！
king_ai_jiao的博客
03-08 3070
接续我上一篇博客，实现闪烁后就需要巧妙的去使用他。闪烁原理详见https://blog.csdn.net/king_ai_jiao/article/details/104721519 闪烁原理 如图，柱形图以绿色为基础色，当柱形图 y≥30 闪烁红色； 15≤ y <30 闪烁黄色； y<15 不闪烁。设计思路分为两部分： 不同高度柱形图颜色的设置 数值从小到大，列出相对应区间，对...
Echart象形图，形成圆柱体柱状图
最新发布
卡卡罗特的博客
03-22 249
这里就需要用到type: "pictorialBar", // 象形图形；如何让柱状图有3D的感觉，圆柱体的形状；
echarts实现带光圈的环形图
localhost_1314的博客
05-05 2410
实现效果： 实现原理：图层的叠加 （1）多个环形图的叠加 （2）环形图和油表图的嵌套 代码： let _that = this myChart = _that.$echarts.init(document.getElementById(this.pieId)) let data = [{value: 10, name: '香蕉'}, ...
58.（cesium篇）cesium叠加动态立体墙(着色器)(上下方向).zip
11-26
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/121558362
jQuery插件Echarts实现的渐变色柱状图
10-20
本文主要介绍了jQuery插件Echarts实现渐变色柱状图的实例。具有很好的参考价值。下面跟着小编一起来看下吧
echarts 实现圆柱体图形.zip
05-14
echarts实现平面的柱状图很顺利，但是用户为了美观，立体感，用到圆柱体图，网上也查了很多资料，自己做了很好看的效果，希望大家能采用到。
echarts 实现圆柱体柱形图效果
森海か的博客
03-21 2979
echarts 实现圆柱体柱形图
ECharts: 绘制立体柱状图【圆柱体】
m0_58293192的博客
01-10 8788
ECharts: 绘制立体柱状图【圆柱体】
Echarts之我遇到的问题+解决方案
菜鸟Li
08-09 875
echarts的小问题
echarts 堆叠柱状图多柱堆叠，每条柱子堆叠内容以及数量不同
cocos2dx zzzzz
10-21 2056
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，在开发中遇到了这样的一个需求：有多个分公司，每个公司污染物类型差距很大，有些公司有这几个污染物，有些公司又没有这几个污染物，这就导致堆叠的时候echarts的series堆叠的种类以及数据无法对应到每一个公司，用echarts现有的堆叠柱状图无法满足，所以吭哧吭哧鼓捣了一早上，最终还是实现了这个需求。
象形柱状图加渐变 加随机数.html
04-28
Echarts象形柱状图渐变色加随机数,下载后可直接看效果
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
bar-drilldown-master:使用Echarts实现柱状图的下钻功能
04-28
Echarts实现柱状图下钻功能 [[toc]] 需求描述 在一个月份数据柱状图上，点击柱状图上的某一月份后可显示该月每一天的数据。 实现效果如下： 下钻前 下钻后 实现思路 Echarts本身并没有像HighCharts直接实现柱状图的下钻功能，但Echarts可以通过setOptions间接实现下钻功能。 通过点击月份柱状图的某一月，触发点击事件，点击事件的功能是销毁该Echarts实例，并会向后台请求该月份的数据，当后台返回数据后，进行重新初始化Echarts实例。 实现细节 前端部分 html代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <
ECharts 实现3D重叠椭圆柱状图
旭东怪的博客
10-13 1817
1 实现代码 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(docume
Echarts 3D柱形图和3D堆叠柱形图实现
z1076233241的博客
05-28 3568
这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。
使用echarts实现动态的正负轴堆叠柱状图
yookooi
06-16 1307
ECharts是一个基于JavaScript的开源可视化库，它可以帮助用户创建各种类型的图表，例如线图、饼图、散点图和柱状图等等。ECharts提供了非常方便的API，可以帮助你轻松自定义你的图表，并且可以使用JSON格式的数据进行配置。
Echarts实现各种柱状图效果
weixin_44389116的博客
07-07 776
echarts实现柱状图各种效果
echarts实现3D立体堆叠柱状图
SpringHASh的博客
01-11 6156
基于这篇博客的灵感，在其基础上做了一些改动； https://blog.csdn.net/Dalin0929/article/details/111906862 效果图 实现代码： var legends = ['A相','B相','C相']; var name = ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00']..
echarts 堆叠柱状图立体 怎么写
10-14
要实现 echarts 堆叠柱状图立体，需要在 series 中设置 type 为 'bar'，并且设置三维效果，可以通过设置 barWidth3D 和 barDepth 来控制柱子的宽度和深度。同时，需要设置 stack 属性来实现堆叠效果。 以下是一个简单的示例代码： ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, zAxis: { type: 'value' }, series: [{ name: 'A', type: 'bar', stack: 'stack', barWidth3D: 20, barDepth: 10, data: [120, 200, 150, 80, 70, 110, 130] }, { name: 'B', type: 'bar', stack: 'stack', barWidth3D: 20, barDepth: 10, data: [220, 180, 210, 140, 60, 90, 70] }] }; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值