vue实现echarts3D饼图

效果图:
在这里插入图片描述
1.首先安装依赖

npm install echarts
npm install echarts-gl

2.mainjs中导入以及挂载

import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts;

3.传入数据生成3D的配置项以及option的配置

 let series = getPie3D(this.optionData, 0);
       let option = {
        tooltip: {
          trigger: "manual",
          formatter: (params) => {
            if (
              params.seriesName !== "pie2d"
            ) {
              return `<div style="padding:0 10px">${params.seriesName}${(
                option.series[params.seriesIndex].pieData.proportion * 100
              ).toFixed(2)}%</div>`;
            }
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false, //是否显示三维笛卡尔坐标系。
          boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
          top: "-10%",
          // environment: "#000", //背景
          viewControl: {
            alpha: 30, //角度
            distance: 300, //调整视角到主体的距离,类似调整zoom 重要
            // rotateSensitivity: 0, //设置为0无法旋转
            zoomSensitivity: 0, //设置为0无法缩放
            panSensitivity: 0, //设置为0无法平移
            autoRotate: false, //自动旋转
          },
        },
        series: series,
      };

4.指示线的配置

   option.series.push({
        name: "pie2d",
        type: "pie",
        label: {
          color: "#fff",
          fontSize: 12,
          position: "bottom",
          formatter: function (params) {
            return `{nameSty|${params.name}:}{valueSty|${params.value}}`;
          },
          rich: {
            nameSty: {
              fontSize: 14,
              color: "#fff",
            },
            valueSty: {
              fontSize: 14,
              color: "#fff",
            },
          },
          // formatter: (item) => {
          //   //  console.log(item)
          //   return item.data.name + ":" + item.data.value + "";
          // },
        },
        avoidLabelOverlap: false,
        labelLine: {
          length: 10,
          length2: 20,
          minTurnAngle: 0,
          lineStyle: {
            color: "#ffffff",
            width: 1,
          },
        },
        startAngle: 340, //起始角度,支持范围[0, 360]。 //重要
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["40%", "24%"],
        center: ["50%", "50%"], // 左右,上下
        data: this.optionData,
        itemStyle: {
          opacity: 0,
        },
        selectedOffset: 30, // 分离距离
        bottom: "4%",
        // avoidLabelOverlap: true, //防止标签重叠
      });
      this.myChartCricleBtmf.setOption(option);
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值