echarts三棱锥

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

一、效果图如下：

二、代码配置

（1）父组件：

<template>
  <div class="page-con">
    <div class="main-con">
      <item></item>
    </div>
  </div>
</template>

<script>
import item from '../bigdata/components/item.vue'
export default {
  components: {
    item
  }
}
</script>

<style lang="scss" scoped>
.page-con {
  width: 100%;
  height: 100%;
  .main-con {
    width: 40%;
    height: 33%;
  }
}
</style>

（2）子组件：

<template>
  <div class="bar-card">
    <div ref="volumn" class="volume" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    // 获取数据。
    if (this.$refs.volumn) {
      this.reloadChart();
      // 自适应浏览器。
      window.addEventListener("resize", () => {
        this.reloadChart();
      });
    }
  },
  // 组件销毁。
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    drawChart() {
      this.myChart = this.$echarts.init(this.$refs.volumn);
      var data = [15, 8, 12, 4, 8, 10, 9];
      var xData = [
        "神经",
        "智力",
        "肢体",
        "视力",
        "听力",
        "语言",
        "其他",
      ];
      var colors = [
        {
          type: "linear",
          x: 0,
          y: 0,
          y2: 0,
          x2: 1,
          global: false,
          colorStops: [
            {
              offset: 0,
              color: "#4379d0",
            },
            {
              offset: 0.5,
              color: "#7a8ddd",
            },
            {
              color: "#a1c4ff",
              offset: 0.5,
            },
            {
              offset: 1,
              color: "#bfd1ff",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#bb5763",
            },
            {
              offset: 0.5,
              color: "#d0938c",
            },
            {
              offset: 0.5,

              color: "#ffa1ac",
            },
            {
              offset: 1,
              color: "#ffbabe",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#4ea95d",
            },
            {
              offset: 0.5,
              color: "#80bc96",
            },
            {
              offset: 0.5,

              color: "#90e6a0",
            },
            {
              offset: 1,
              color: "#a8e5b7",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#ab8b52",
            },
            {
              offset: 0.5,
              color: "#bdb280",
            },
            {
              offset: 0.5,

              color: "#e6c690",
            },
            {
              offset: 1,
              color: "#e5d6aa",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#4395b3",
            },
            {
              offset: 0.5,
              color: "#769fc2",
            },
            {
              offset: 0.5,

              color: "#86d4f0",
            },
            {
              offset: 1,
              color: "#a4d1ec",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#b0ad52",
            },
            {
              offset: 0.5,
              color: "#b7c284",
            },
            {
              offset: 0.5,

              color: "#f0ed98",
            },
            {
              offset: 1,
              color: "#ebefae",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#3c46bc",
            },
            {
              offset: 0.5,
              color: "#7b6fc8",
            },
            {
              offset: 0.5,

              color: "#7e88f8",
            },
            {
              offset: 1,
              color: "#a09ef1",
            },
          ],
        },
      ];
      var renderItem = function(params, api) {
        var yValue = api.value(1);
        var start = api.coord([api.value(0), yValue]);
        var size = api.size([api.value(1) - api.value(0), yValue]);
        var style = api.style();

        // 最右边的点坐标
        var width = size[0] * 0.6;
        var x = start[0] - width / 2;
        var y = start[1];

        var bottomHeight = 8;

        var points = [[x + width / 2, y]];

        // 左边的坐标点
        points.push([x, size[1] + y]);

        points.push([x + width / 2, size[1] + y + bottomHeight]);

        // 右边的坐标点
        points.push([x + width, size[1] + y]);

        var group = {
          type: "group",
          children: [
            {
              // 顶部
              z2: 3,
              type: "polygon",
              shape: {
                points: points,
              },
              style: style,
            },
          ],
        };

        return group;
      };

      // 绘制图表
      var option = {
        tooltip: {
          // trigger: "axis",
          backgroundColor: " rgba(9,35,75,0.7)",
          borderColor: "#2187F9",
          borderWidth: 1,
          borderRadius: 8,
          textStyle: {
            color: "#A7EFFF",
            fontSize: this.fontSize(0.4),
            align: "left",
          },
        },
        grid: {
          top: "20%",
          left: "5%",
          bottom: "12%",
          right: "5%",
          containLabel: true,
        },
        xAxis: {
          data: xData,
          offset: 6,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(127, 208, 255, 0.2)",
              width: 1,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(127, 208, 255, 0.2)",
            },
          },
          axisLabel: {
            show: true,
            color: "#fff",
            fontSize: this.fontSize(0.35),
            interval: 0,
            // rotate: 40,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            inverse: false,
            name: "单位：人",
            nameTextStyle: {
              color: "#fff",
              fontSize: this.fontSize(0.35),
              nameLocation: "start",
            },
            type: "value",
            // boundaryGap: [0, "20%"],
            position: "left",
            axisLabel: {
              show: true,
              fontSize: this.fontSize(0.35),
              color: "#fff",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(127, 208, 255, 0.2)",
                width: 1,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(127, 208, 255, 0.2)",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "custom",
            itemStyle: {
              color: function(params) {
                return colors[params.dataIndex];
              },
            },

            label: {
              show: true,
              position: "top",
              color: "#ffffff",
              fontSize: this.fontSize(0.35),
              formatter: function(params) {
                return "{a" + params.dataIndex + "|" + params.data + "人}";
              },
              rich: {
                a0: {
                  color: "#77A9FF",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
                a1: {
                  color: "#FEBBBD",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
                a2: {
                  color: "#A1EEB3",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
                a3: {
                  color: "#F3BD5B",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
                a4: {
                  color: "#57D1FF",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
                a5: {
                  color: "#F0ED97",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
                a6: {
                  color: "#9EA0FF",
                  fontSize: this.fontSize(0.35),
                  align: "center",
                  fontFamily: "PangMenZhengDao",
                },
              },
            },
            data: data,
            renderItem: renderItem,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 字体自适应。
    fontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      const fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
    // 销毁图表。
    disposeChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    // 重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawChart();
    },
  },
};
</script>

<style scoped lang="scss">
.bar-card {
  width: 100%;
  height: 100%;
  .volume {
    width: 100%;
    height: 100%;
  }
}
</style>

星星跌入梦境*
关注
css3制作八棱锥_svg、canvas、css3d实现数据可视化（伪3D效果）
weixin_31368213的博客
01-16 1102
前言：这次如算上处定面一这我作问汇u应色会进灯样近项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型功一新说讲为其年次供。发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效做个汇总。分为如下：星球环绕旋转享。发概程间告屏会。一控近到都从述序也问图 -- 方法一： svg：animateMotion+ animateTransform 方法二：css3支器事的后功发久这含层请...
随笔-Android openGL-三棱锥纹理
weixin_43937991的博客
04-03 189
1.onDrawFrame中需要 （1）gl.glBindTexture （2）gl.glDrawElements 结合使用，才能在不同的面绘制不同的img
4款echarts.js扁平图形统计图表代码
06-12
4款基于jQuery跟Echarts.js实现的扁平化风格图形统计图表特效代码，其中有环形统计图、折线统计图、柱状统计图。
3D 锥形图表echarts
可视化
07-11 6247
let loadingFunnel = () => { //title标示文字,标示线 loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => { return { text: text, ...
echarts制作3D锥形金字塔
热门推荐
weixin_51609337的博客
07-08 1万+
工作中遇到了这样的问题，需要绘制3D金字塔，如图所示：echarts可以做平面的金字塔和漏斗图，但是3D金字塔在官网上并没有看到相关案例。查了相关资料，用象形柱状图来实现
echarts 三角锥形柱状图 + 带阴影的折线图示例
SM_Cute的博客
11-17 533
echarts 三角锥形柱状图 + 带阴影的折线图示例
glut演示旋转、平移、缩放的正三棱锥
09-12
在这个"glut演示旋转、平移、缩放的正三棱锥"的资源包中，我们将会探索如何使用GLUT和OpenGL实现这些动态效果。 首先，让我们来理解一下核心概念： 1. **GLUT初始化**：在任何OpenGL程序开始时，首先需要设置GLUT...
Android Studio中利用OPenGL ES绘制一个三棱锥，并对三棱锥进行纹理贴图
04-17
本教程将详细讲解如何在Android Studio中利用OpenGL ES绘制一个三棱锥，并对其表面进行纹理贴图，使三棱锥的各个面展示出不同的图像效果。 首先，我们需要在Android Studio项目中设置OpenGL ES环境。创建一个新的...
动态演示三棱锥的三视图
02-27
动态演示三棱锥的三视图，适合初高中数学教学，生动形象，利于学生思维开发
slz.rar_OpenGL棱锥_openGL编写三棱锥的方法_opengl三棱锥
09-21
嗯一个简单的openGL编写三棱锥的方法
基于表面间三棱锥体积测度的点云配准 (2010年)
05-15
通过寻找两片点云重叠区域内的有效点与对应三角形对，并将有效点与对应三角形对所夹的空间三棱锥体积作为误差测度来指导激光点云的配准；将点与对应三角形的质心作为对应点对，估计出新的空间位置转换关系。实验结果...
[demo]CSS transform属性实现旋转的四面体
tom_wong666
06-05 1431
本文简单阐述了如何实现旋转的立方体效果，读者需要具备基本的HTML，CSS和JS基础知识。 一，基本概念： 1，三维坐标轴，如下图 ![三维坐标图示](https://img-blog.csdn.net/20180605221851331?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbV93b25nNjY2/font/5a6L5...
svg、canvas、css3d实现数据可视化(伪3d)
无聊者进来逛逛
08-07 7698
前言： 这次项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型做个汇总。 分为如下： 星球环绕旋转图 -- 方法一： svg：animateMotion+ animateTransform 方法二：css3d 地图 -- svg渲染 + div悬浮框 + js事件 二维饼图（风车图） -- canvas： dragCircle 、 stopDragging 三棱锥 -...
vue使用echart 完成3d系列1之曲面空心圆
来了波，兄嘚
01-18 1051
这个例子为官网例子,但一开始引入3d效果， 不知咋配置，官网只给了参数，花了好多时间， 所以写下这个文档记录一下,给需要的小伙伴节约时间用 效果图 第一步，先安装依赖 npm install echarts-gl -S npm install echarts package.json中有这两玩意，说明安装成功 "echarts": "^5.0.1", "echarts-gl": "^2.0.0", 废话不多说直接看代码 <template> <div> <d
web扩展
x737510的博客
10-10 583
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
前端开发攻略---8种方法实现在浏览器中跨页面通信
最新发布
nibabaoo的博客
10-15 750
浏览器实现跨标签页通信的多种方式
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 476
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 262
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
C语言计算三棱锥体积
09-27
在C语言中，计算三棱锥体积需要知道底面面积和高。如果三棱锥是一个正三棱锥，即底面是等边三角形，可以使用以下公式： \[ V = \frac{1}{3} \times A_{\text{底}} \times h \] 其中 \( A_{\text{底}} \) 表示底面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值