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

最新推荐文章于 2024-09-29 16:44:46 发布

小美元

最新推荐文章于 2024-09-29 16:44:46 发布

阅读量120

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_41621686/article/details/142631377

版权

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>