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>
相关推荐
涔溪3 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang3 天前
前端如何实现电子签名
前端·javascript·html5
veminhe3 天前
html怎么设置html5
html·html5
失落的多巴胺4 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
veminhe13 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说14 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
veminhe15 天前
HTML5简介
前端·html·html5
蹦极的考拉18 天前
在使用 HTML5 的 <video> 标签嵌入视频时,有时会遇到无法播放 MP4 文件的问题
前端·音视频·html5
木木黄木木19 天前
HTML5 火焰字体效果教程
前端·html·html5
于本淡19 天前
一篇文章快速学会HTML
开发语言·前端·数据结构·qt·html·json·html5