echarts实现3D柱状图(视觉层面)根据博主改编

https://blog.csdn.net/weixin_57798646/article/details/131067725

这是原贴

在这个基础上我需要实现

一根柱子

代码如下

复制代码
<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
  <meta charset="utf8">
</head>


<body style="height: 100%; margin: 0">

  <div id="litiBar1" style="height:100%;background-color: #000;"></div>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>



  <script type="text/javascript">
    //组织数据
    let setData = function (data, constData, showData) {
      data.filter(function (item) {
        if (item) {
          constData.push(1);
          showData.push(item);
        } else {
          constData.push(0);
          showData.push({
            value: 1,
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 2,
                color: "rgba(0,0,0,0)",
              },
            },
          });
        }
      });
    }
    //组织颜色
    let setColor = function (colorArr) {
      let color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
          x: 0,
          x2: 0,
          y: 0,
          y2: 1, */
        colorStops: [{
          offset: 0,
          color: colorArr[0],
        },
        {
          offset: 0.5,
          color: colorArr[0],
        },
        {
          offset: 0.5,
          color: colorArr[1],
        },
        {
          offset: 1,
          color: colorArr[1],
        },
        ],
      };
      return color
    }

    var vehicle = [45, 25, 48, 62, 10]
    var controlBall = [0, 0, 0, 0, 0]

    var barWidth = 220//顶部组件的宽度

      ;//上边的宽度
    var constData1 = [];
    var showData1 = [];


    var constData2 = [];
    var showData2 = [];

    setData(vehicle, constData1, showData1)


    var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
    // var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];

    var color1 = setColor(colorArr1)
    // var color2 = setColor(colorArr2)





    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '15%',
        bottom: '15%'
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: '#A2BCC9',
          fontSize: 16
        },
        offset: 30,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false
        },
        data: ['0-18', '18-30', '30-50', '50-65', '>65']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        }
      },
      series: [{
        z: 1,
        type: 'bar',
        name: '人员数量',
        barGap: "15%", //相邻柱子间距
        itemStyle: {
          borderRadius: [0, 0, 0, 0],//柱子四周圆角
          color: color1//柱子左右颜色(深,浅)
        },
        data: vehicle //Y轴上的高度
      },
      // ---------------------------------------------
      {
        z: 2,
        name: '人员数量',
        type: "pictorialBar",
        data: constData1,//此数据对应底部组件
        symbol: "diamond",//底部组件形状,不写默认为椭圆
        symbolOffset: [0, 15],//与柱子的偏移角度[左边偏移,上下偏移]
        symbolSize: [210, 30],//底面[宽,高]
        itemStyle: {
          normal: {
            color: color1//底面左右颜色(深,浅)
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: '人员数量',
        label: { // 在这里明确设置 label 配置
          show: true,
          position: 'top',
          color: '#DFEEFA',
          distance: 20,
          textStyle: {
            fontSize: 16 // 设置图例的字体大小
          },
        },
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData1,//此数据对应顶部组件
        symbol: "diamond",
        symbolOffset: [0, -10],//顶部组件的左边偏移数值和右边偏移数值
        symbolSize: [barWidth - 10, (20 * (barWidth - 4)) / barWidth],//顶部组件[宽,高]
        itemStyle: {
          normal: {
            /* borderColor: colorArr1[2],
            borderWidth: 2, */ //加上棱角分明
            color: colorArr1[2]
          },
        },
        tooltip: {
          show: false,
        },
      },

      ]
    }
    let chart1 = echarts.init(document.querySelector("#litiBar1"), null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    // chart1.setOption(option)
    if (option && typeof option === 'object') {
      chart1.setOption(option);
    }
    window.addEventListener('resize', chart1.resize);

  </script>
</body>

</html>
相关推荐
烂蜻蜓8 小时前
HTML5 新元素:革新网页开发体验
前端·html·html5
JohnsonXin11 小时前
怎么使用vue3实现一个优雅的不定高虚拟列表
前端·javascript·css·html5
Sherlock Ma12 小时前
HTML零基础入门笔记:狂神版
前端·经验分享·笔记·html·html5·学习方法·改行学it
非凡网站14 小时前
企业展示型网站模板HTML5网站模板下载指南
前端·html·html5
倒霉男孩16 小时前
新HTML5
前端·html·html5
吴永琦(桂林电子科技大学)2 天前
HTML5
前端·html·html5
木木黄木木2 天前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
我自纵横20233 天前
使用 JavaScript 动态设置 CSS 样式
开发语言·前端·javascript·css·html·json·html5
知识分享小能手3 天前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
木木黄木木5 天前
HTML5图片裁剪工具实现详解
前端·html·html5