echarts 设置3D柱状图

最新推荐文章于 2024-06-02 12:02:03 发布

JunJiu0420

最新推荐文章于 2024-06-02 12:02:03 发布

阅读量1.6k

点赞数

分类专栏： echarts 文章标签： javascript echarts

本文链接：https://blog.csdn.net/JunJiu0420/article/details/110951980

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>电</title>
    <meta charset="utf-8" />
    <style>
      ::-webkit-scrollbar {
        display: none;
      }

      @font-face {
        font-family: SketchRockwell;
        /*这里是说明调bai用来的字体名du字*/
        src: url("./font/TT0246M_.TTF");
        /*这里是字zhi体文件路径*/
      }

      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100vw;
        height: 100vh;
      }

      #main {
        width: 100%;
        height: 100%;
        /* margin: 0 auto; */
      }
    </style>
  </head>

  <body>
    <div id="main" style="width: 100%; height: 100%"></div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/echarts-gl.min.js"></script>
  <script src="./js/simplex.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    var noise = new SimplexNoise(Math.random);
    function generateData(theta, min, max) {
      var data = [];
      for (var i = 0; i <= 24; i += 0.5) {
        for (var j = 0; j <= 30; j += 0.5) {
          var value = Math.abs(noise.noise2D(i / 20, j / 20));
          valMax = Math.max(valMax, value);
          // valMin = Math.min(valMin, value);
          data.push([i, j, value * 200 + 4]);
        }
      }
      return data;
    }
    var valMin = Infinity;
    var valMax = -Infinity;
    var data = generateData(2, 0, 100);
    console.log(valMin, valMax);

    myChart.setOption(
      (option = {
        visualMap: {
          show: false,
          min: 2,
          max: 150,
          inRange: {
            color: [
              "rgba(49,54,149,0.7)",
              "rgba(69,117,180,0.7)",
              "rgba(116,173,209,0.7)",
              "rgba(171,217,233,0.7)",
              "rgba(224,243,248,0.7)",
              "rgba(255,255,191,0.7)",
              "rgba(254,224,144,0.7)",
              "rgba(253,174,97,0.7)",
              "rgba(244,109,67,0.7)",
            //   "rgba(215,48,39,0.7)",
            //   "rgba(165,0,38,0.7)",
            ],
          },
        },

        xAxis3D: {
          name: "小时",
          nameTextStyle: {
            fontFamily: "SketchRockwell",
            fontSize: 10,
            color: "#fff",
          },
          max: 24,
          type: "value",
          axisLabel: {
            show: true,
            fontFamily: "SketchRockwell",
            fontSize: 10,
            color: "#fff",
          },
        },
        yAxis3D: {
          name: "日期",
          nameTextStyle: {
            fontFamily: "SketchRockwell",
            fontSize: 10,
            color: "#fff",
          },
          type: "value",
          axisLabel: {
            show: true,
            fontFamily: "SketchRockwell",
            fontSize: 10,
            color: "#fff",
          },
        },
        zAxis3D: {
          name: "kWh",
          nameTextStyle: {
            fontFamily: "SketchRockwell",
            fontSize: 10,
            color: "#fff",
          },
          type: "value",
          max: 250,
          min: 0,
          axisLabel: {
            show: true,
            fontFamily: "SketchRockwell",
            fontSize: 10,
            color: "#fff",
          },
        },
        grid3D: {
          top: "center",
          axisLine: {
            lineStyle: { color: "#000" },
          },
          axisPointer: {
            lineStyle: { color: "#000" },
          },
          viewControl: {
            autoRotate: true,
          },
          light: {
            main: {
              shadow: true,
              quality: "ultra",
              intensity: 1,
            },
          },
          boxWidth: 80,
          boxHeight: 80,
          boxDepth: 80,
        },
        series: [
          {
            type: "bar3D",
            data: data,
            shading: "lambert",
            label: {
              formatter: function (param) {
                return param.value[2].toFixed(1);
              },
            },
          },
        ],
      })
    );
  </script>
</html>

运行结果:

JunJiu0420

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
echarts 设置3D柱状图

<!DOCTYPE html><html> <head> <title>电</title> <meta charset="utf-8" /> <style> ::-webkit-scrollbar { display: none; } @font-face { font-family: SketchRockwell; .
复制链接

扫一扫