bar3D，line3D，效果

 

 

 

<!--
   ⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    var data = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
// Parametric curve
for (var t = 0; t < 25; t += 1) {
  var y = t;
  var z = 25- t  + 2.0 * Math.sin(75 * t);
  var z1 =25- t + 2.0 * Math.random().toFixed(2);
  var z2 =25- t + 2.0 * Math.random().toFixed(2);
  data.push([y, 1, z]);
  data1.push([y, 4, z1]);
  data2.push([y, 2, z2 / 2]);
  data3.push([y, 2, z2]);
  data4.push([y, 2, z2 / 2]);
}
console.log(data.length);
option = {
  tooltip: {},
  backgroundColor: '#00599f',
  // visualMap: {
  //   show: false,
  //   dimension: 2,
  //   min: 0,
  //   max: 30,
  //   inRange: {
  //     color: [
  //       '#313695',
  //       '#4575b4',
  //       '#74add1',
  //       '#abd9e9',
  //       '#e0f3f8',
  //       '#ffffbf',
  //       '#fee090',
  //       '#fdae61',
  //       '#f46d43',
  //       '#d73027',
  //       '#a50026'
  //     ]
  //   }
  // },
  xAxis3D: {
    type: 'value'
  },
  yAxis3D: {
    type: 'value',
    splitLine: {
      show: false
    }
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    viewControl: {
      projection: 'orthographic'
    },
    axisLine: {
      lineStyle: { color: '#ffffff88' }
    },
    // axisPointer: {
    //   lineStyle: { color: '#ffffff33' }
    // },
    light: {
      main: {
        shadow: true,
        quality: 'ultra',
        intensity: 1.5
      }
    }
  },
  series: [
    {
      type: 'line3D',
      data: data,
      lineStyle: {
        width: 4
      }
    },
    {
      type: 'line3D',
      data: data1,
      lineStyle: {
        width: 4
      }
    },
    {
      type: 'line3D',
      data: data3,
      lineStyle: {
        width: 4
      }
    },
    {
      type: 'bar3D',
      barSize: [2, 2],
      data: data2.map(function (item) {
        return {
          value: [item[0], item[1], item[2]]
        };
      }),
      shading: 'color',
      label: {
        show: false,
        fontSize: 16,
        borderWidth: 1
      },
      itemStyle: {
        color: '#e5d856',
        opacity: 0.6
      },
      stack: 'stack',
      // shading: 'lambert',
      emphasis: {
        label: {
          fontSize: 20,
          color: '#900'
        },
        itemStyle: {
          color: '#900'
        }
      }
    },
    {
      type: 'bar3D',
      barSize: [2, 2],
      data: data4.map(function (item) {
        return {
          value: [item[0], item[1], item[2]]
        };
      }),
      shading: 'color',
      label: {
        show: false,
        fontSize: 16,
        borderWidth: 1
      },
      itemStyle: {
        color: '#00c4ec',
        opacity: 0.6
      },
      stack: 'stack',
      // shading: 'lambert',
      emphasis: {
        label: {
          fontSize: 20,
          color: '#900'
        },
        itemStyle: {
          color: '#900'
        }
      }
    }
  ]
};


    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

 

posted @ 2023-07-14 13:54  莫欺  阅读(87)  评论(0)    收藏  举报