vue使用echart 完成3d系列3之曲面空心半圆

前端菜鸟日常

于 2021-01-18 18:31:26 发布

阅读量792

点赞数 1

分类专栏： echart 可视化文章标签： vue

本文链接：https://blog.csdn.net/weixin_46476460/article/details/112791048

版权

echart 可视化专栏收录该内容

11 篇文章 1 订阅

订阅专栏

参考：
vue使用echart 完成3d系列1之曲面空心圆
 vue使用echart 完成3d系列2之曲面锥形
效果图
在这里插入图片描述

第一步，先安装依赖

npm install echarts-gl -S
npm install echarts

package.json中有这两玩意，说明安装成功

 "echarts": "^5.0.1",
 "echarts-gl": "^2.0.0",

废话不多说直接看代码

<template>
  <div>
    <div id="demo"></div>
  </div>
</template>
<script>
import echarts from "echarts"; //可视化
import "echarts-gl";
export default {
  components: {},
  data() {
    return {
      option: {
        tooltip: {},
        // visualMap: {
        //   show: false,
        //   dimension: 2,
        //   min: -1,
        //   max: 1,
        //   inRange: {
        //     color: [
        //       "#313695",
        //       "#4575b4",
        //       "#74add1",
        //       "#abd9e9",
        //       "#e0f3f8",
        //       "#ffffbf",
        //       "#fee090",
        //       "#fdae61",
        //       "#f46d43",
        //       "#d73027",
        //       "#a50026",
        //     ],
        //   },
        // },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {},
        series: [
          {
            type: "surface",
            parametric: true,
            // 改变球体颜色
            itemStyle: {
              color: function (params) {
                return "transparent";
              },
            },
            // coordinateSystem: "globe",

            blendMode: "lighter",
            // shading: "albedo",
            // 改变线条颜色
            wireframe: {
              lineStyle: {
                width: 1,
                color: "#086af0",
                opacity: 1,
              },
            },

            parametricEquation: {
            u: {
								min: -Math.PI,
								max: Math.PI,
								step: Math.PI / 40,
								// 步长
							},
							v: {
								// min: 0,
								// max: Math.PI,
								step: Math.PI / 20,
								// 步长
							},
             
              x: function (u, v) {
                return Math.sin(v) * Math.sin(u);
              },
              y: function (u, v) {
                return Math.sin(v) * Math.cos(u);
              },
              z: function (u, v) {
                return Math.cos(v);
              },
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.echarts();
  },
  methods: {
    echarts() {
      // 引入 ECharts 主模块
      var echarts = require("echarts/lib/echarts");
      // 引入柱状图
      require("echarts/lib/chart/bar");
      // 引入提示框和标题组件
      require("echarts/lib/component/tooltip");
      require("echarts/lib/component/title");
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById("demo"));

      // 绘制饼图
      myChart1.setOption(this.option, true);
    },
  },
};
</script>
<style lang='scss'>
#demo {
  width: 1000px;
  height: 1000px;
  background: rgba($color: #050505, $alpha: 1);
  // color: transparent;
}
</style>