echarts 3d饼图

最新推荐文章于 2024-08-21 17:29:12 发布
最新推荐文章于 2024-08-21 17:29:12 发布
阅读量1.2k 收藏 31
点赞数 29
文章标签： echarts 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85124347/article/details/139623661
版权 
          //   '{c|{c}}{b|台}',
          "{b|{b}}",
        ].join("\n"), // 用\n来换行
        rich: {
          b: {
            // color: '#fff',
            lineHeight: 25,
            align: "left",
            color: color[index],
          },
          c: {
            fontSize: 22,
            // color: '#fff',
            textShadowColor: "#1c90a6",
            textShadowOffsetX: 0,
            textShadowOffsetY: 2,
            textShadowBlur: 5,
            color: color[index],
          },
          d: {
            color: color[index],
            align: "left",
          },
        },
      },
    };
    item.labelLine = {
      normal: {
        length2: 30,
        lineStyle: {
          width: 1,
          color: color[index],
        },
      },
    };
  });
},
// 图表初始化
initChart() {
  this.statusChart = echarts.init(this.$refs.chart);
  // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
  this.option = getPie3D(this.optionData, 0.6, 180, 26, 18, 1);
  this.statusChart.setOption(this.option);
  // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  this.option.series.push({
    name: "信用评价", //自己根据场景修改
    backgroundColor: "transparent",
    type: "pie",
    label: {
      opacity: 1,
      fontSize: 13,
      lineHeight: 20,
    },
    startAngle: -40, // 起始角度，支持范围[0, 360]。
    clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["20%", "60%"],
    center: ["50%", "50%"],
    data: this.optionData,
    itemStyle: {
      opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
    },
  });
  this.statusChart.setOption(this.option);
  this.bindListen(this.statusChart);
},
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
bindListen(myChart, optionName = "option") {
  let selectedIndex = "";
  let hoveredIndex = "";
  // 监听点击事件，实现选中效果（单选）
  // myChart.on("click", (params) => {
  //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
  //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
  //   const isSelected =
  //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
  //   const isHovered =
  //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
  //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
  //   const startRatio =
  //     this[optionName].series[params.seriesIndex].pieData.startRatio;
  //   const endRatio =
  //     this[optionName].series[params.seriesIndex].pieData.endRatio;
  //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
  //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
  //     this[optionName].series[selectedIndex].parametricEquation =
  //       getParametricEquation(
  //         this[optionName].series[selectedIndex].pieData.startRatio,
  //         this[optionName].series[selectedIndex].pieData.endRatio,
  //         false,
  //         false,
  //         k,
  //         this[optionName].series[selectedIndex].pieData.value
  //       );
  //     this[optionName].series[selectedIndex].pieStatus.selected = false;
  //   }
  //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
  //   this[optionName].series[params.seriesIndex].parametricEquation =
  //     getParametricEquation(
  //       startRatio,
  //       endRatio,
  //       isSelected,
  //       isHovered,
  //       k,
  //       this[optionName].series[params.seriesIndex].pieData.value
  //     );
  //   this[optionName].series[params.seriesIndex].pieStatus.selected =
  //     isSelected;
  //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
  //   selectedIndex = isSelected ? params.seriesIndex : null;
  //   // 使用更新后的 option，渲染图表
  //   myChart.setOption(this[optionName]);
  // });
  // 监听 mouseover，近似实现高亮（放大）效果
  myChart.on("mouseover", (params) => {
    // 准备重新渲染扇形所需的参数
    let isSelected;
    let isHovered;
    let startRatio;
    let endRatio;
    let k;
    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    if (hoveredIndex === params.seriesIndex) {
      // 否则进行高亮及必要的取消高亮操作
    } else {
      // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      if (hoveredIndex !== "") {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
        isSelected =
          this[optionName].series[hoveredIndex].pieStatus.selected;
        isHovered = false;
        startRatio =
          this[optionName].series[hoveredIndex].pieData.startRatio;
        endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
        k = this[optionName].series[hoveredIndex].pieStatus.k;
        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
        this[optionName].series[hoveredIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            this[optionName].series[hoveredIndex].pieData.value
          );
        this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
        hoveredIndex = "";
      }
      // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      if (
        params.seriesName !== "mouseoutSeries" &&
        params.seriesName !== "信用评价"
      ) {
        
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
        isSelected =
          this[optionName].series[params.seriesIndex].pieStatus.selected;
        isHovered = true;
        startRatio =
          this[optionName].series[params.seriesIndex].pieData.startRatio;
        endRatio =
          this[optionName].series[params.seriesIndex].pieData.endRatio;
        k = this[optionName].series[params.seriesIndex].pieStatus.k;
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        this[optionName].series[params.seriesIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            this[optionName].series[params.seriesIndex].pieData.value + 60
          );
        this[optionName].series[params.seriesIndex].pieStatus.hovered =
          isHovered;
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = params.seriesIndex;
      }
      // 使用更新后的 option，渲染图表
      myChart.setOption(this[optionName]);
    }
  });
  // 修正取消高亮失败的 bug
  myChart.on("globalout", () => {
    // 准备重新渲染扇形所需的参数
    let isSelected;
    let isHovered;
    let startRatio;
    let endRatio;
    let k;
    if (hoveredIndex !== "") {
      // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
      isHovered = false;
      k = this[optionName].series[hoveredIndex].pieStatus.k;
      startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
      endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
      // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      this[optionName].series[hoveredIndex].parametricEquation =
        getParametricEquation(
          startRatio,
          endRatio,
          isSelected,
          isHovered,
          k,
          this[optionName].series[hoveredIndex].pieData.value
        );
      this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
      // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      hoveredIndex = "";
    }
    // 使用更新后的 option，渲染图表
    myChart.setOption(this[optionName]);
  });
},
// 自适应宽高
changeSize() {
  this.statusChart.resize();
},

},
};


在echart.js的代码

/**

  • 绘制3d图
  • @param pieData 总数据
  • @param internalDiameterRatio:透明的空心占比
  • @param distance 视角到主体的距离
  • @param alpha 旋转角度
  • @param pieHeight 立体的高度
  • @param opacity 饼或者环的透明度
    */
    const getPie3D = (
    pieData,
    internalDiameterRatio,
    distance,
    alpha,
    pieHeight,
    opacity = 1
    ) => {
    const series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let legendBfb = [];
    const 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;
    const 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,
    },
    center: [“10%”, “50%”],
    };
    if (typeof pieData[i].itemStyle !== “undefined”) {
    const itemStyle = {};
    itemStyle.color =
    typeof pieData[i].itemStyle.color !== “undefined”
    ? pieData[i].itemStyle.color
    : opacity;
    itemStyle.opacity =
    typeof pieData[i].itemStyle.opacity !== “undefined”
    ? pieData[i].itemStyle.opacity
    : opacity;
    seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
    }

// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
legendData = [];
legendBfb = [];
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;
const bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
name: series[i].name,
value: bfb,
});
legendBfb.push({
name: series[i].name,
value: bfb,
});
}
const boxHeight = getHeight3D(series, pieHeight); // 通过pieHeight设定3d饼/环的高度，单位是px
// 准备待返回的配置项，把准备好的 legendData、series 传入。
const option = {
legend: {
show: false,
data: legendData,
orient: “vertical”,
left: 10,
top: 10,
itemGap: 10,
textStyle: {
color: “#A1E2FF”,
},
icon: “circle”,
formatter: function (param) {
const item = legendBfb.filter((item) => item.name === param)[0];
const bfs = fomatFloat(item.value * 100, 2) + “%”;
return ${item.name} ${bfs};
},
},
labelLine: {
show: true,
lineStyle: {
color: “#fff”,
},
},
label: {
show: true,
position: “outside”,
formatter: “{b} \n{c} {d}%”,
},
tooltip: {
backgroundColor: “#033b77”,
borderColor: “#21f2c4”,
textStyle: {

ES6

  • 列举常用的ES6特性：

  • 箭头函数需要注意哪些地方？

  • let、const、var

  • 拓展：var方式定义的变量有什么样的bug？

  • Set数据结构

  • 拓展：数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求？

  • 有哪些参数传值的方法？

  • 你使用过哪些方法，来提高微信小程序的应用速度？

  • 小程序和原生App哪个好？

  • 简述微信小程序原理？

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题？

2401_85124347
关注
echarts 3D环状饼图
weixin_36106791的博客
10-19 3494
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Echarts 3D饼图开发
m0_67403076的博客
08-01 1172
!560px;height150px;">//生成扇形的曲面参数方程，用于series-surface.parametricEquation//计算//如果只有一个扇形，则不实现选中效果。}//计算选中效果分别在x轴、y轴方向上的位移（位移均为0）//计算选中效果在z轴方向上的位移（未选中，位移均为0）0.150;...
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 8万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
vue+echarts 3D饼图
最新发布
weixin_44997264的博客
08-21 389
ECharts 3D 饼图
echarts3d饼图
前端学习分享
09-14 4456
echarts 3d饼图
Echarts-3d饼图
weixin_43327235的博客
02-17 1万+
<template> <div :id="echartsId"></div> </template> <script> import 'echarts-gl' var echarts = require('echarts') export default { props: { echartsId: { type: String, default: 'chart-panel' }, k: {...
echarts的3D饼图
weixin_45859470的博客
12-01 3285
免费--echarts的3D饼图--附有代码文件
echarts 3d饼图资源
05-12
总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据和配置，是进行数据可视化的有力工具。通过深入理解和灵活运用这些资源，开发者可以创建出既美观又实用的 3D 数据展示效果，提升数据分析和...
echarts 3D饼图组件
09-26
import PieChart3D from "@/components/PieChart3D" <PieChart3D values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} />
Echarts 3d饼状图
qq_43209807的博客
10-25 1万+
记录使用Echarts 实现3D饼状图的过程。
E charts 3D饼图
Jocker_0701的博客
08-15 354
demo拉下来可以直接运行，也可以直接打开chart.html查看
echarts 3D饼状图
weixin_43483746的博客
03-16 5837
echarts 3D饼状图。
【echarts 3D饼图】
weixin_40030173的博客
01-31 1299
1、安装 echarts 和 echarts-gl。
Echarts3D图 / Echart3D饼图
Crayon111的博客
05-26 1万+
**注意事项** 1. 安装Echarts并引入 2. 将示例的方法复制到methods中，并新建一个用来初始echarts的方法，将该方法挂载到mounted状态中 3. **在使用的页面中引入echarts3d**`<script>import 'echarts-gl'</script>;` 4. **给需要挂载的dom设置宽高**
e-charts 3D饼图
Humor_L的博客
05-30 1651
import 'echarts-gl' // 3d图表库。四、echat.js代码。
echarts+3d饼图
weixin_44727080的博客
08-22 1万+
前言: echarts实现3d饼图 效果图： 实现源码： var salesData = [{ label: "Basic", color: "#2f7ed8" }, { label: "Plus", color: "#0d233a" }, { label: "Lite", color: "#8bbc21" }, { label: "Elite", color: "#910000" }, { label: ...
echarts 3D饼图
07-28
ECharts是一个基于JavaScript的开源可视化库，用于创建交互式的数据可视化图表。它支持多种类型的图表，包括3D饼图。 要创建一个ECharts的3D饼图，你需要先引入ECharts的库文件，然后在HTML中创建一个容器元素来显示图表，最后通过JavaScript代码配置和渲染图表。 下面是一个简单的示例代码，展示如何创建一个基本的3D饼图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 3D饼图示例</title> <!-- 引入ECharts库文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 定义一个容器元素来显示图表 --> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 基于准备好的容器，初始化ECharts实例 var myChart = echarts.init(document.getElementById('chart')); // 配置图表的选项和数据 var option = { title: { text: 'ECharts 3D饼图示例' }, tooltip: {}, series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 你可以根据自己的需求修改数据和样式，来创建不同类型的3D饼图。详细的配置选项和API文档可以在ECharts官方网站上找到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值