vue实现echarts3D饼图-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现echarts3D饼图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图:
vue实现3d饼图,vue.js,echarts,3d
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.指示线的配置文章来源地址https://www.toymoban.com/news/detail-740301.html

   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);