echarts 带背景的二维3D柱状图

川长思鸟来 2023-01-21 04:24 12阅读 0赞

### echarts 带背景的二维3D柱状图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]

var abilityuse = document.getElementById("abilityuse_echarts")
    var abilityuse_echarts = echarts.init(abilityuse);
    var xData = ["04-08", "04-09", "04-10", "04-11", "04-12", "04-13", "04-14"]
    var line = ["375", "500", "900", "800", "610", "1001", "350"];
    var line_bg = ["1500", "1500", "1500", "1500", "1500", "1500", "1500"]
    var abilityuse_option = {
        
      title: {
        
        text: '(万次)',
        textStyle: {
        
          fontSize: 12,
          color: "#666",
          fontWeight: '400'
        },
        top: 0,
        left: "0%",
      },
      tooltip: {
        
        formatter: function (data) {
        
          let aaa = data.name + ":" + data.value + "万次"
          return aaa
        }
      },
    
      grid: {
        
        left: "4%",
        right: '1%',
        top: '11%',
        bottom: "15%"
      },
      legend: {
        
        show: true,
        icon: 'circle',
        orient: 'horizontal',
        top: '90.5%',
        right: 'center',
        itemWidth: 16.5,
        itemHeight: 6,
        // itemGap: 30,
        textStyle: {
        
          // color: '#FFFFFF'
          color: '#C9C8CD',
          fontSize: 14
        }
      },
      xAxis: [{
        
        data: xData,
        axisLabel: {
        
          show: true,
          textStyle: {
        
            color: '#666',
            fontSize: 12
          },
          margin: 30, //刻度标签与轴线之间的距离。
        },
    
        axisLine: {
        
          show: false //不显示x轴
        },
        axisTick: {
        
          show: false //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
        
          show: false,
          width: 0.08,
          lineStyle: {
        
            type: "solid",
            color: "#dfdfdf"
          }
        }
      }],
      yAxis: [{
        
        show: true,
        splitLine: {
        
          show: true,
          lineStyle: {
        
            color: '#dfdfdf',
            type: 'solid'
          }
        },
        axisTick: {
        
          show: false
        },
        axisLine: {
        
          show: true,
          lineStyle: {
        
            color: '#dfdfdf',
            type: 'solid'
          }
        },
        axisLabel: {
        
          textStyle: {
        
            color: '#666'
          },
        }
      }],
      series: [
        {
        //柱底圆片
          name: "",
          type: "pictorialBar",
          symbolSize: [32, 18],//调整截面形状
          symbolOffset: [0, 10],
          z: 12,
          itemStyle: {
        
            'normal': {
        
              color: "#4898FF",
    
            }
          },
          data: line_bg
        },
        //柱体
        {
        
          name: '',
          type: 'bar',
          barWidth: 32,
          barGap: '-100%',
          itemStyle: {
        
            normal: {
        
              color: "#4898FF",
            }
          },
          showBackground: true,
          backgroundStyle: {
        
            color: '#EFF8FA'
          },
          data: line
        },
    
        //背景柱顶圆片
        {
        
          name: "",
          type: "pictorialBar",
          symbolSize: [32, 18],//调整截面形状
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: "end",
          "itemStyle": {
        
            'normal': {
        
              color: '#C2E1F0',
            }
          },
          data: line_bg
        },
    
        //柱顶圆片
        {
        
          name: "",
          type: "pictorialBar",
          symbolSize: [32, 18],//调整截面形状
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: "end",
          "itemStyle": {
        
            'normal': {
        
              color: '#246FF4',
            }
          },
          data: line
        }
      ]
    }
    abilityuse_echarts.setOption(abilityuse_option);
    window.addEventListener("resize", function () {
        
      abilityuse_echarts.resize()
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/6ec86d7d6a8b45eaa0e695323f272734.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 实现3D重叠椭圆柱状图

1 实现代码（3D重叠椭圆柱状图） <body>  <div i

亦凉/ 2023年10月05日 11:29/ 0 赞/ 48 阅读

相关 echarts 带背景的二维3D柱状图

echarts 带背景的二维3D柱状图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

川长思鸟来/ 2023年01月21日 04:24/ 0 赞/ 13 阅读

相关 Echart 基于geo的3D柱状图

echarts社区例子：[ECharts Gallery - 3d地图画线1 (makeapie.com)][ECharts Gallery - 3d_1 _makeapie.

超、凢脫俗/ 2022年12月25日 00:54/ 0 赞/ 562 阅读

相关 Echart 基于maptalks3D地图实现3D柱状图

例子来源[ECharts Gallery - 上海居民活动点分布可视化 (makeapie.com)][ECharts Gallery - _ _makeapie.com]

深藏阁楼爱情的钟/ 2022年12月25日 00:54/ 0 赞/ 291 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 315 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 658 阅读

相关 echarts 双柱状图，X轴带滚动条的柱状图

echarts 双柱状图：[https://www.makeapie.com/editor.html?c=xTJyYkJflT][https_www.makeapie.com_

快来打我*/ 2022年11月06日 14:56/ 0 赞/ 450 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 382 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 340 阅读

相关 D3 二维图表的绘制系列（二）基础柱状图

下一篇：多列柱状图 https://blog.csdn.net/zjw\_python/article/details/98205614 代码结构和初始化画布的Chart对

客官°小女子只卖身不卖艺/ 2021年11月10日 08:30/ 0 赞/ 467 阅读