echarts 3D示例 echart, echarts-gl

echarts官网有很多的炫酷的3D模型

来尝试实现下,使用原本的柱状图或者折线图代码创建echarts示例,使用cdn的方式引入echarts

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <title>ECharts Pie Chart with Click Event</title>
  </head>
  <body>
    <div id="pieChart" style="width: 600px; height: 400px"></div>
    <script>
      const data = [
        { value: 335, name: "Category 1" },
        { value: 310, name: "Category 2" },
        { value: 234, name: "Category 3" },
        { value: 135, name: "Category 4" },
        { value: 1548, name: "Category 5" },
      ];
      // 初始化 ECharts 实例
      const myChart = echarts.init(document.getElementById("pieChart"));
      // 配置饼图
      const option = {
        series: [
          {
            name: "Pie Chart",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 将配置设置到 ECharts 实例中
      myChart.setOption(option);
    </script>
  </body>
</html>

就会得到一个饼图

使用这个案例:Examples - Apache ECharts

在官网案例添加代码查看模型的数据

还需要引入echarts-gl的cdn, 应用中安装echarts-gl,只引入就好,不需要做额外的操作,会自动扩展echarts的功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>

    <title>ECharts Pie Chart with Click Event</title>
  </head>
  <body>
    <div
      id="pieChart"
      style="width: 600px; height: 600px; border: 5px solid red"
    ></div>
    <script>
      const list = 这里放从官网复制过来的数组
// 初始化 ECharts 实例
      const myChart = echarts.init(document.getElementById("pieChart"));
      // 将配置设置到 ECharts 实例中
      let option = {
        grid3D: {},
        tooltip: {},
        xAxis3D: {
          type: "category",
        },
        yAxis3D: {
          type: "category",
        },
        zAxis3D: {},
        visualMap: {
          max: 1e8,
          dimension: "Population",
        },
        dataset: {
          dimensions: [
            "Income",
            "Life Expectancy",
            "Population",
            "Country",
            { name: "Year", type: "ordinal" },
          ],
          source: list,
        },
        series: [
          {
            type: "bar3D",
            // symbolSize: symbolSize,
            shading: "lambert",
            encode: {
              x: "Year",
              y: "Country",
              z: "Life Expectancy",
              tooltip: [0, 1, 2, 3, 4],
            },
          },
        ],
      };
      // 将配置设置到 ECharts 实例中
      myChart.setOption(option);
    </script>
  </body>
</html>

看下是很大的

看下效果

相关推荐
J总裁的小芒果13 分钟前
THREE.js 入门(六) 纹理、uv坐标
开发语言·javascript·uv
m0_5485147714 分钟前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
AndrewPerfect14 分钟前
xss csrf怎么预防?
前端·xss·csrf
Calm55017 分钟前
Vue3:uv-upload图片上传
前端·vue.js
浮游本尊21 分钟前
Nginx配置:如何在一个域名下运行两个网站
前端·javascript
m0_7482398322 分钟前
前端bug调试
前端·bug
m0_7482329224 分钟前
[项目][boost搜索引擎#4] cpp-httplib使用 log.hpp 前端 测试及总结
前端·搜索引擎
新中地GIS开发老师30 分钟前
《Vue进阶教程》(12)ref的实现详细教程
前端·javascript·vue.js·arcgis·前端框架·地理信息科学·地信
m0_7482495432 分钟前
前端:base64的作用
前端
html组态38 分钟前
web组态可视化编辑器
前端·物联网·编辑器·web组态·组态·组态软件