vue3.0 使用echarts与echarts-gl 实现可旋转,可放大3D饼图

这篇具有很好参考价值的文章主要介绍了vue3.0 使用echarts与echarts-gl 实现可旋转,可放大3D饼图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

echarts与echarts-gl 实现3D饼图

实现效果:

echarts-gl,echarts,3d,前端
旋转效果
echarts-gl,echarts,3d,前端
缩放效果
echarts-gl,echarts,3d,前端

实现步骤

1、安装echarts
npm install echarts
npm install echarts-gl
2、页面定义容器

<template>
  <div class="echarts">
    <!-- <div :id="echarts_id" style="width: 400px;height: 400px;"></div> -->
    <div id="echarts_id" style="width: 100%;height: 100%;"></div>
  </div>
</template>

3、js中引入echarts文章来源地址https://www.toymoban.com/news/detail-858441.html

import * as echarts from 'echarts'
import 'echarts-gl'

VUE 组件完整源码:

<template>
  <div class="echarts">
    <!-- <div :id="echarts_id" style="width: 400px;height: 400px;"></div> -->
    <div id="echarts_id" style="width: 100%;height: 100%;"></div>
  </div>
</template>
 
<script lang="js" setup>
import { onMounted, watch,ref } from 'vue'
import * as echarts from 'echarts' 
import "echarts-gl"
let echarts_id = ref('')
const randomCoding = (res) => {
  var arr = 'abcdefjhijklmnopqrstuvwxyz0123456789'
  var char = ''
  for (var i = 0; i < 4; i++) {
    var num = parseInt(Math.random() * 36)
    char = char + arr[num]
  }
  echarts_id.value =
    'echarts_id' + Math.floor(Math.random() * (10000 - 1) + 1) + char
  // initCharts(echarts_id.value)
  initCharts('echarts_id')
}
// 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {

// 计算
let midRatio = (startRatio + endRatio) / 2;

let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;

// 如果只有一个扇形,则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
  isSelected = false;
}

// 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
k = typeof k !== 'undefined' ? k : 1 / 3;

// 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

// 计算高亮效果的放大比例(未高亮,则比例为 1)
let hoverRate = isHovered ? 1.05 : 1;

// 返回曲面参数方程
return {

  u: {
    min: -Math.PI,
    max: Math.PI * 3,
    step: Math.PI / 32
  },

  v: {
    min: 0,
    max: Math.PI * 2,
    step: Math.PI / 20
  },

  x: function (u, v) {
    if (u < startRadian) {
      return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
    }
    if (u > endRadian) {
      return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
    }
    return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  },

  y: function (u, v) {
    if (u < startRadian) {
      return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
    }
    if (u > endRadian) {
      return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
    }
    return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  },

  z: function (u, v) {
    if (u < - Math.PI * 0.5) {
      return Math.sin(u);
    }
    if (u > Math.PI * 2.5) {
      return Math.sin(u);
    }
    return Math.sin(v) > 0 ? 1 * height : -1;
  }
};
};

// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {

let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;

// 为每一个饼图数据,生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {

  sumValue += pieData[i].value;

  let seriesItem = {
    name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false
    },
    pieData: pieData[i],
    pieStatus: {
      selected: false,
      hovered: false,
      k: k
    }
  };

  if (typeof pieData[i].itemStyle != 'undefined') {

    let itemStyle = {};

    typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
    typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;

    seriesItem.itemStyle = itemStyle;
  }
  series.push(seriesItem);
}

// 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
  endValue = startValue + series[i].pieData.value;
  series[i].pieData.startRatio = startValue / sumValue;
  series[i].pieData.endRatio = endValue / sumValue;
  series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

  startValue = endValue;

  legendData.push(series[i].name);
}

// // 补充一个透明的圆环,用于支撑高亮功能的近似实现。
series.push({
  name: 'mouseoutSeries',
  type: 'surface',
  parametric: true,
  wireframe: {
    show: false,
  },
  itemStyle: {
    opacity: 0.1,
    color: 'green',
  },
  parametricEquation: {
    u: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 70,
    },
    v: {
      min: 0,
      max: Math.PI,
      step: Math.PI / 70,
    },
    x: function (u, v) {
      return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
    },
    y: function (u, v) {
      return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
    },
    z: function (u, v) {
      return Math.cos(v) > 0 ? -0.5 : -5;
    },
  },
});

// // 补充一个透明的圆环,用于支撑高亮功能的近似实现。
series.push({
  name: 'mouseoutSeries',
  type: 'surface',
  parametric: true,
  wireframe: {
    show: false,
  },
  itemStyle: {
    opacity: 0.1,
    color: 'red',
  },
  parametricEquation: {
    u: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 70,
    },
    v: {
      min: 0,
      max: Math.PI,
      step: Math.PI / 70,
    },
    x: function (u, v) {
      return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
    },
    y: function (u, v) {
      return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
    },
    z: function (u, v) {
      return Math.cos(v) > 0 ? -5 : -7;
    },
  },
});
series.push({
  name: 'mouseoutSeries',
  type: 'surface',
  parametric: true,
  wireframe: {
    show: false,
  },
  itemStyle: {
    opacity: 0.1,
    color: 'yellow',

  },

  parametricEquation: {
    u: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 70,
    },
    v: {
      min: 0,
      max: Math.PI,
      step: Math.PI / 70,
    },
    x: function (u, v) {
      return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
    },
    y: function (u, v) {
      return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
    },
    z: function (u, v) {
      return Math.cos(v) > 0 ? -7 : -7;
    },
  },
});
return series;
}
// 传入数据生成 option
const optionsData = [
{
  name: '在线',
  value: 24,
  itemStyle: {
    color: '#2beaf9',
  },
},

{
  name: '离线',
  value: 57,
  itemStyle: {
    color: 'darkgrey',
  },
},
{
  name: '告警',
  value: 5,
  itemStyle: {
    color: 'yellow',
  },
},
{
  name: '故障',
  value: 14,
  itemStyle: {
    color: 'red',
  },
},
];

const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);

series.push({
name: 'pie2d',
type: 'pie',
label: {
  opacity: 1,
  fontSize: 13,
  lineHeight: 20,    
  textStyle: {
    fontSize: 14,
  },    
},
  labelLine: {
    length: 50,
    length2: 0,
    // showAbove: true,
    // minTurnAngle: 0,
    // maxSurfaceAngle: 180,
    lineStyle: {
      width: 2,
      type: [3, 5],
      color: '#2beaf9',
      // cap: 'round',
      // join:'round'
    },
  },

  labelLayout: {
    hideOverlap: false,
    moveOverlap: 'shiftY',
    align: 'center',
    // 默认的标签垂直对齐
    verticalAlign: 'bottom',
    // rotate: 90
    // draggable: true,
    // x: '20%',
    // x: 'center',
    // dx: 50,
    // y: '10%',
    // dy: 20,
    // LinePoints: [[20,50], [20,50], [20,50]]
  },
startAngle: 0, //起始角度,支持范围[0, 360]。
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['20%', '50%'],
center: ['50%', '50%'],
data: optionsData,
itemStyle: {
  opacity: 0,
},
});

const initCharts = (ID) => {
  const client = document.getElementById(ID)

  var myChartCA7 = echarts.init(client)
  var option
  // 准备待返回的配置项,把准备好的 legendData、series 传入。
  option = {
    color: ["#2beaf9", "darkgrey", "yellow", "red"],
    legend: {
      icon: 'circle',
      // tooltip: {
      //   show: true,
      // },
      itemWidth: 10,   // 每个图例标记的宽度
      itemHeight: 10,  // 每个图例标记的高度      
      textStyle: {
          color: '#333'  // 文本颜色
      },
      itemGap: 25,      // 图例之间的间距
      orient: 'horizontal',  // 水平布局
      
      itemStyle: {
          borderColor: 'red',  // 边框颜色          
          // 设置圆角样式
          borderRadius: [5, 5, 0, 0]  // 左上、右上、右下、左下四个角分别设置不同的半径值
      },
      data: ['在线', '离线', '故障', '告警'],
      right: '5%',
      top: 'middle',
      orient: 'vertical',
      textStyle: {
        color: "#",
        fontSize: 14,
        rich: {
          text: {
            // color:'#fff',
            fontSize: 14,
          },
          number: {
            fontSize: 16
          }
        }
      },
      data: optionsData,
      formatter: (name) => {
        if (optionsData.length) {
          const item = optionsData.filter((item) => item.name === name)[0];
          return `{text|${name}}    {number|${item.value}}`;
        }
      },
    },

    animation: true,
    tooltip: {
      formatter: params => {
        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
          return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value + ''}`;
        }
      },
      textStyle: {
        fontSize: 18
      },
    },
    title: {
      x: 'center',
      top: '20',
      textStyle: {
        color: '#fff',
        fontSize: 22,
      },
    },
    // backgroundColor: '#333',
    labelLine: {
      show: true,
      lineStyle: {
        type: 'dash',
        color: '#2beaf9',
        dashOffset: 5,
        cap: 'round'
      },
    },
    label: {
      show: true,
      position: 'outer',
      alignTo: 'labelLine',
      formatter: '{b} {d}%',
      // alignTo: 'labelLine',
      // ·圆点
      // backgroundColor: 'auto',
      // height: 0,
      // width: 0,
      // lineHeight: 0,
      // distanceToLabelLine: 0,
      // borderRadius: 2.5,
      // padding: [2.5, -2.5, 2.5, -2.5],
      // formatter: function (params) {
      //     if (params.name !== '') {
      //       return `{a|${params.name}:}{b|${params.value}个}`;
      //     } else {
      //       return '';
      //     }
      //   },
      //   rich: {
      //     a: {
      //       padding: [0, 0, 0, 10],
      //       color: '#fff'
      //     },
      //     b: {
      //       padding: [0, 10, 0, 0],
      //       color: '#fff'
      //     },
      //   }

    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min:-1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.5,
      //top: '30%',
      bottom: '50%',
      // environment: '#021041',
      viewControl: {
        rotateSensitivity: 20,
        distance: 190,
        alpha: 20,
        beta: 0,
        autoRotate: false, // 自动旋转
      }
    },
    series: series,
  };

  const clientWidth = client.clientWidth
  const clientHeight = client.clientHeight

  myChartCA7.setOption(option, true)

  window.onresize = function () {
    myChartCA7.resize()
  }
  window.addEventListener('resize', function () {
    myChartCA7.resize()
  })
}
onMounted(() => {
  randomCoding()
  // initCharts()
})

</script>
<style scoped lang="scss">
.echarts {
  height: 100%;
}
</style>

到了这里,关于vue3.0 使用echarts与echarts-gl 实现可旋转,可放大3D饼图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能,解决dblclick事件失效问题,解决地图下钻后边框不更新保留问题

    目录 先看实现效果:​编辑 步骤一 安装echarts和echarts-gl 步骤二  设置地图容器 在methods中设置初始化地图方法并在mounted中调用 在methods中设置初始化地图方法 在mounted中调用 打开页面效果:​编辑  步骤三 1、给地图添加双击事件dblclick 但是也出现了一个问题,和我们预想的

    2023年04月09日
    浏览(41)
  • echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图

    一、使用插件 echarts@5.2.2 、 echarts-gl@2.0.8 、 jquery ; jquery 是使用 ajax 加载 json 文件的。 二、准备地图json文件 因为找了一圈,网上的地图 js 文件都需要花钱去购买, json 文件可以在阿里云数据可视化平台下载,下载链接为:免费地图json文件下载 ECharts 提供了两种格式的地图数

    2024年02月16日
    浏览(40)
  • echarts-gl的type为map3D修改不同区域的颜色和点击事件

    效果图 regions 的数据格式 以下是 地图初始化代码、双击地图和单击高亮 ,方法是封装后的,mapData 的数据格式我放在后面,均有注释 这个是手动区分,就看绿色框框的,feature.properties.num就是各个区人数 mapData 的数据格式

    2024年02月19日
    浏览(42)
  • Vue3项目中使用ECharts图表并实现自适应效果

    在项目中输入如下代码: 安装完成可以在package.json中看到: 创建ECharts图表的文件barCharts.vue,将它引入并在父组件中使用。在使用setup时,我们把组件直接引入进来,就可以直接使用了,不用像Vue2那样需要注册了。 在父组件中创建一个有宽高的容器,里面放ECharts组件,ECh

    2024年02月03日
    浏览(50)
  • Vue3 实现产品图片放大器

    Vue3 实现类似淘宝、京东产品详情图片放大器功能 环境:vue3+ts+vite 1.创建picShow.vue组件 2.在其他页面引用组件picShow.vue 效果:

    2024年02月14日
    浏览(47)
  • 前端Vue3+TS实现视频放大缩小,放大后实现视频的拖动+拖动边框限制

    最近实现了一个新的需求,大体内容是要对所播放的视频做一个放大缩小的处理,同时在视频放大的同时要实现视频的一个拖拽,拖拽的同时,要对视频拖动的范围作出一个限制,下面来看看我的一个实现的思路。 技术栈:Vue3.2 + TS 1.放大缩小采用的形式是什么? 2.拖动实现

    2024年01月25日
    浏览(41)
  • 【vue3】js + css 实现 视频框选放大:局部细节放大、放大镜效果

    实现鼠标框选区域放大显示。 需求1:放大 按住鼠标左键不放 ——》向右侧拖动,框选出需要放大的区域后 ——》松开鼠标 ——》框选区域放大显示 需求2:还原 按住鼠标左键不放 ——》向左侧拖动,框选出随意大小的区域后 ——》松开鼠标 ——》视图显示大小还原 需求

    2024年02月03日
    浏览(52)
  • vue3+echarts实现3D地球+飞线

    效果图 1、下载         指令 我的版本: 2、html容器 3、js代码 附加纹理图

    2024年02月04日
    浏览(42)
  • Vue3中使用Echarts图表

    Echarts是一个基于JavaScript的开源可视化图表库,由百度开发和维护。它提供了多种类型的图表,包括折线图、柱状图、散点图、饼图、地图等,可以用于展示各种类型的数据。Echarts具有良好的交互性和可扩展性,可以通过自定义主题和图表样式来满足不同的需求。同时,Ech

    2024年02月08日
    浏览(44)
  • vue3使用 echarts - 饼图、折线图

    饼图 - 带中心图形 - graphic - elements 折线图 - 图表标记 markPoint

    2024年02月08日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包