vue中使用echarts与echarts-gl 实现3D饼图环形饼图

最新推荐文章于 2024-06-09 13:42:05 发布

NPC-

最新推荐文章于 2024-06-09 13:42:05 发布

阅读量1.2w

点赞数 27

文章标签： vue.js echarts 3d vue

本文链接：https://blog.csdn.net/weixin_47336389/article/details/128477978

版权

效果图：（移动上去也会有效果的那种哦）

在这里插入图片描述

第一步：vue中安装echarts和echarts-gl

npm install echarts
npm install echarts-gl

注意：我不知道版本差异会不会有影响（可以指定版本也可以借鉴我的）
在这里插入图片描述

指定版本命令加个@后面跟版本号即可

npm install echarts-gl@2.0.9

成功之后可以在package.json中检查是否安装成功（如上图）

第二步：在vue文件中引入

引入位置：我没有在main.js中全局引用，而是哪个页面用到就引入哪里
在这里插入图片描述

代码：

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

第三步：实现具体代码（完整的）

注意：我没有封装起来（你也可以先直接在页面中实现，然后在考虑封装需求）

1、有一个装饼图的容器（可以都复制走为了成功实现效果）

	<!-- 饼图 -->
   <div class="container">
        <div class="chartsGl" id="charts"></div>
         <!-- 饼图下面的底座 -->
         <div class="buttomCharts"></div>
    </div>

2、对应样式

 //饼图(外面的容器)
   .container {
   
        width: 100%;
        height: 100%;
    }
    //饼图的大小
    .chartsGl {
   
        height: 200px;
        width: 400px;
    }
    //饼图底座（我也想给你们底座图片 可是我不知道咋给）
    .buttomCharts{
   
        background: center top url(/src/assets/images/bg/buttom-charts.png) no-repeat;
        background-size: cover;
        height: 78px;
        width: 180px;
        margin-top: -155px;
        margin-left: 18%;
    }

3、饼图数据

data() {
   
          return {
   
            //饼图数据+颜色
              optionData: [
                {
   
                  name: '休闲室',//名称
                  value: 19,//值
                  itemStyle: {
   //颜色 紫色
                    color: 'rgba(123, 167, 212,1)'
                  }
              }, {
   
                  name: '羽毛球室',//蓝色
                  value: 13,
                  itemStyle: {
   
                    color: 'rgba(98, 195, 250,1)',
                  }
              }, {
   
                  name: '瑜伽室',//绿色
                  value: 15,
                  itemStyle: {
   
                      color: 'rgba(140, 189, 107,1)'
                  }},
                  {
   
                  name: '动感单车室',//橙色
                  value: 16,
                  itemStyle: {
   
                      color: 'rgba(245, 182, 94,1)'
                  }}
                  ,
                  {
   
                  name: '兵乓球室',//黄色
                  value: 5,
                  itemStyle: {
   
                      color: 'rgba(237, 222, 111,1)'
                  }}
                ],
          }
      },

4、钩子中调用mouted

  mounted() {
   
      this.$nextTick(function() {
   
          this.init();
      });
  },

5、具体方法methods（为了你也方便修改样式我注释尽量给到）

//初始化构建
  init() {
   
      //构建3d饼状图
      let myChart = echarts.init(document.getElementById('charts'));
      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
      this.option = this.getPie3D(this.optionData, 0.85);
      //将配置项设置进去
      myChart.setOption(this.option);
      //鼠标移动上去特效效果
     this.bindListen(myChart);
  },

//配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
          getPie3D(pieData, internalDiameterRatio) {
   
              let that = this;
              let series = [];
              let sumValue = 0;
              let startValue = 0;
              let endValue = 0;
              let legendData = [];
              let legendBfb = [];
              let k = 1 - internalDiameterRatio;
              pieData.sort((a, b) => {
   
                  return (b.value - a.value);
              });
              // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
              for (let i = 0; i < pieData.length; i++) {
   
                  sumValue += pieData[i].value;
                  let seriesItem = {
   
                      //系统名称
                      name: typeof pieData[i].name ===