echarts伪3d制作

最新推荐文章于 2024-05-17 11:38:26 发布
最新推荐文章于 2024-05-17 11:38:26 发布
阅读量643 收藏
点赞数
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45256751/article/details/123378981
版权

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>

</head>

<body style="background: rgb(0,32,46);">

  <div id="main" style="width: 1100px;height: 500px;border:1px solid red"> </div>

</body>

<script>

  var myChart = echarts.init(document.getElementById('main'));

  //左侧图形的坐标图

  const CubeLeft = echarts.graphic.extendShape({

    shape: {

      x: 0,

      y: 0,

    },

    buildPath: function (ctx, shape) {

      const xAxisPoint = shape.xAxisPoint;

      const c0 = [shape.x, shape.y];

      const c1 = [shape.x - 9, shape.y - 9];

      const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];

      const c3 = [xAxisPoint[0], xAxisPoint[1]];

      ctx

        .moveTo(c0[0], c0[1])

        .lineTo(c1[0], c1[1])

        .lineTo(c2[0], c2[1])

        .lineTo(c3[0], c3[1])

        .closePath();

    },

  });

  //右侧图形的坐标图

  const CubeRight = echarts.graphic.extendShape({

    shape: {

      x: 0,

      y: 0,

    },

    buildPath: function (ctx, shape) {

      const xAxisPoint = shape.xAxisPoint;

      const c1 = [shape.x, shape.y];

      const c2 = [xAxisPoint[0], xAxisPoint[1]];

      const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];

      const c4 = [shape.x + 18, shape.y - 9];

      ctx

        .moveTo(c1[0], c1[1])

        .lineTo(c2[0], c2[1])

        .lineTo(c3[0], c3[1])

        .lineTo(c4[0], c4[1])

        .closePath();

    },

  });

  //顶部图形的坐标图

  const CubeTop = echarts.graphic.extendShape({

    shape: {

      x: 0,

      y: 0,

    },

    buildPath: function (ctx, shape) {

      const c1 = [shape.x, shape.y];

      const c2 = [shape.x + 18, shape.y - 9];

      const c3 = [shape.x + 9, shape.y - 18];

      const c4 = [shape.x - 9, shape.y - 9];

      ctx

        .moveTo(c1[0], c1[1])

        .lineTo(c2[0], c2[1])

        .lineTo(c3[0], c3[1])

        .lineTo(c4[0], c4[1])

        .closePath();

    },

  });

  echarts.graphic.registerShape("CubeLeft", CubeLeft);

  echarts.graphic.registerShape("CubeRight", CubeRight);

  echarts.graphic.registerShape("CubeTop", CubeTop);

  const MAX = [

    6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000,

  ];

  const VALUE = [

    2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654,

  ];

  option = {

    backgroundColor: "#012366",

    title: {

      text: "",

      top: 32,

      left: 18,

      textStyle: {

        color: "#00F6FF",

        fontSize: 24,

      },

    },

    grid: {

      left: 20,

      right: 40,

      bottom: "19%",

      top: 107,

      containLabel: true,

    },

    xAxis: {

      type: "category",

      data: [

        "德州",

        "德城区",

        "陵城区",

        "禹城市",

        "乐陵市",

        "临邑县",

        "平原县",

        "夏津县",

        "武城县",

        "庆云县",

        "宁津县",

        "齐河县",

      ],

      axisLine: {

        show: true,

        lineStyle: {

          color: "white",

        },

      },

      offset: 20,

      axisTick: {

        show: false,

        length: 9,

        alignWithLabel: true,

        lineStyle: {

          color: "#7DFFFD",

        },

      },

      axisLabel: {

        fontSize: 10,

      },

    },

    yAxis: {

      type: "value",

      axisLine: {

        show: true,

        lineStyle: {

          color: "white",

        },

      },

      splitLine: {

        show: false,

      },

      axisTick: {

        show: false,

      },

      axisLabel: {

        fontSize: 16,

      },

      boundaryGap: ["20%", "20%"],

    },

    series: [

      {

        //无颜色柱子部分

        type: "custom",

        renderItem: function (params, api) {

          const location = api.coord([api.value(0), api.value(1)]);

          return {

            type: "group",

            children: [

              {

                type: "CubeLeft",

                shape: {

                  api,

                  xValue: api.value(0),

                  yValue: api.value(1),

                  x: location[0],

                  y: location[1],

                  xAxisPoint: api.coord([api.value(0), 0]),

                },

                style: {

                  fill: "rgba(47,102,192,.27)",

                },

              },

              {

                type: "CubeRight",

                shape: {

                  api,

                  xValue: api.value(0),

                  yValue: api.value(1),

                  x: location[0],

                  y: location[1],

                  xAxisPoint: api.coord([api.value(0), 0]),

                },

                style: {

                  fill: "rgba(59,128,226,.27)",

                },

              },

              {

                type: "CubeTop",

                shape: {

                  api,

                  xValue: api.value(0),

                  yValue: api.value(1),

                  x: location[0],

                  y: location[1],

                  xAxisPoint: api.coord([api.value(0), 0]),

                },

                style: {

                  fill: "rgba(72,156,221,.27)",

                },

              },

            ],

          };

        },

        data: MAX,

      },

      {

        //有颜色部分的柱子

        type: "custom",

        renderItem: (params, api) => {

          const location = api.coord([api.value(0), api.value(1)]);

          return {

            type: "group",

            children: [

              {

                type: "CubeLeft",

                shape: {

                  api,

                  xValue: api.value(0),

                  yValue: api.value(1),

                  x: location[0],

                  y: location[1],

                  xAxisPoint: api.coord([api.value(0), 0]),

                },

                style: {

                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                    {

                      offset: 0,

                      color: "#3B80E2",

                    },

                    {

                      offset: 1,

                      color: "#49BEE5",

                    },

                  ]),

                },

              },

              {

                type: "CubeRight",

                shape: {

                  api,

                  xValue: api.value(0),

                  yValue: api.value(1),

                  x: location[0],

                  y: location[1],

                  xAxisPoint: api.coord([api.value(0), 0]),

                },

                style: {

                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                    {

                      offset: 0,

                      color: "#3B80E2",

                    },

                    {

                      offset: 1,

                      color: "#49BEE5",

                    },

                  ]),

                },

              },

              {

                type: "CubeTop",

                shape: {

                  api,

                  xValue: api.value(0),

                  yValue: api.value(1),

                  x: location[0],

                  y: location[1],

                  xAxisPoint: api.coord([api.value(0), 0]),

                },

                style: {

                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                    {

                      offset: 0,

                      color: "#3B80E2",

                    },

                    {

                      offset: 1,

                      color: "#49BEE5",

                    },

                  ]),

                },

              },

            ],

          };

        },

        data: VALUE,

      },

      {

        type: "bar",

        label: {

          normal: {

            show: true,

            position: "top",

            formatter: (e) => {

              switch (e.name) {

                case "10kV线路":

                  return VALUE[0];

                case "公用配变":

                  return VALUE[1];

                case "35kV主变":

                  return VALUE[2];

                case "水":

              }

            },

            fontSize: 16,

            color: "#fff",

            offset: [4, -25],

          },

        },

        itemStyle: {

          color: "transparent",

        },

        data: MAX,

      },

    ],

  };

  myChart.setOption(option);

</script>

</html>

详情请见PPChart - 让图表更简单

 

阿巴阿巴123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 3d饼图资源
05-12
总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据和配置，是进行数据可视化的有力工具。通过深入理解和灵活运用这些资源，开发者可以创建出既美观又实用的 3D 数据展示效果，提升数据分析和...
ECharts实现立体柱形图
weixin_61569821的博客
11-03 1831
ECharts快速实现立体柱形图！
Echarts三维坐标系
ZERO の BLOG
09-19 5571
Echarts三维坐标系 一、坐标系 1.1 globe-地图组件 提供地球坐标系 可展示三维图：散点图、气泡图、柱状图、飞线图 部分属性 |属性|含义|默认值| |:–||:–||:–| |globeRadius|地球半径|100| |globeOuterRadius|地球外半径，内外半径构成的空间用于绘图|150| 1.2 geo3D-三维地理坐标系组件 提供三维地理坐标系 可展示三维图...
eCharts实现3D地图并在地图初始化时标点
最新发布
m0_50170396的博客
05-17 855
eCharts地图3D效果，地图标点
使用pyecharts绘制各个3D图表代码示例整理和分享
qq_57099024的博客
12-23 9700
对3D图标配置项及通用方法的介绍 Grid3DOpts：三维笛卡尔坐标系配置项 class Grid3DOpts( # 三维笛卡尔坐标系组件在三维场景中的宽度 width: Numeric = 200, # 三维笛卡尔坐标系组件在三维场景中的高度。 height: Numeric = 100, # 三维笛卡尔坐标系组件在三维场景中的深度。 depth: Numeric = 80, # 是否开启视角绕物体的自动旋转查看。 is_rotate
echarts 3D 柱状图
aibujin的博客
05-20 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts折线图柱状图的坐标轴的颜色及样式的设置
fengsuiyingdong的专栏
07-14 3万+
转载网址见： http://www.cnblogs.com/my-freedom/p/6699271.html 基本用法请查看echarts官网。 一、图例legend的设置。 1.字体和颜色的设置 1 2 3 4 textStyle:{                 fontSi
使用echarts 实现3D地球
08-13
**使用ECharts实现3D地球**\n\nECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持自定义交互和动画效果。在ECharts中，3D地球的实现是通过其强大的3D渲染...
echarts3D地球素材
03-16
标题中的“echarts3D地球素材”指的是利用ECharts提供的3D地球插件或功能，创建出具有自动旋转和3D效果的地球模型。 **1. ECharts 3D功能** ECharts 3D是ECharts的一个扩展，增加了对3D场景的支持。它提供了多种3D...
echarts实现3D环装饼图带引导线效果
01-25
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库，它提供丰富的可视化图表类型，适用于各种数据可视化需求。在本项目中，我们将探讨如何使用ECharts实现一个3D环状饼图，并...
echarts3D热力图配置文件
10-08
echarts3D热力图配置文件
echarts - 自定义形状 - 实现立体柱状图
qq_35432583的博客
05-13 4075
如果需要复杂的图表样式，echarts 自带的 series 类型无法满足，那么就可以使用 custom 类型，这时就需要通过 canvas 手动绘制图表的形状了。
Echarts自定义图形，方法参考
GhostPaints的博客
12-21 8315
echart自定义图形，制作一个三个面组成的，伪3D柱形图
echarts 绘制 立体柱状图
weixin_44968614的博客
06-02 763
const VALUE = [{ value: 1000, itemStyle: { color: 'rgba(0, 206, 201,1.0)' } }, { value: 800, itemStyle: { color: 'rgba(232, 67, 147,1.0)' } }, { value: 600, ...
echarts3D柱状图顶部设置指定图片
caiji_laoshen的博客
11-08 588
【代码】echarts3D柱状图顶部设置指定图片。
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 8万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
如何在echarts的3d地球上以任意一个坐标点为圆心画一个标准的圆形（附代码）
walter1mitty的博客
04-25 1395
这是我用echarts做前端开发遇到的问题，似乎echarts没有提供在3d地球坐标面上画圆的方法。而我的需求是要在地球上画出一个卫星通信的覆盖范围的圆形区域。（效果展示）
echarts实现伪3D地图、省会坐标涟漪、自动轮播、数据联动
Lionel_SSL的博客
10-09 1640
echarts实现伪3D地图、省会坐标涟漪、自动轮播、数据联动。
echarts 实现3D饼图
敲代码无敌小奶龙的博客
06-30 1万+
【代码】echarts 实现3D饼图。
echarts 地图分块伪3d
09-07
你可以使用 ECharts 的图表库来创建地图分块伪3D效果。ECharts是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和交互功能。 要创建地图分块伪3D效果，你可以使用 ECharts 的地图组件和自定义样式。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值