3D环饼图

//

<first-title title="分析对象统计"></first-title>

</div>

import * as echarts from 'echarts';

import 'echarts-gl';

data() {

return {

legend: [

{

color: '#DDD246'

{

color: '#2B8EF3'

{

color: '#3CD495'

{

color: '#BEE5FB'

}

optionData: [

{

value: 1000,

itemStyle: {

color: '#DDD246'

}

{

value: 116,

itemStyle: {

color: '#4D74FF'

}

{

value: 616,

itemStyle: {

color: '#5AF3B8'

}

{

value: 616,

itemStyle: {

color: '#FFFFFF'

}

]

};



init() {

            //构建3d饼状图

            let myChart = echarts.init(document.getElementById('anaChartPie'));

            // 传入数据生成 option

            this.option = this.getPie3D(this.optionData, 0.8);

            myChart.setOption(this.option);

            //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption

            this.option.series.push({

                name: 'pie2d',

                type: 'pie',

                labelLine: {

                    show: false,

                    length: 10,

                    length2: 10

                },

                startAngle: -20, //起始角度，支持范围[0, 360]。

                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式

                radius: ['20%', '50%'],

                center: ['50%', '50%'],

                data: this.optionData,

                itemStyle: {

                    opacity: 0

                }

            });

            myChart.setOption(this.option);

            this.bindListen(myChart);

        },

        getPie3D(pieData, internalDiameterRatio) {

            //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 === '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') {

                    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，也就是实现每一个扇形。

            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 = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

                startValue = endValue;

                let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);

                legendData.push({

                    name: series[i].name,

                    value: bfb

                });

                legendBfb.push({

                    name: series[i].name,

                    value: bfb

                });

            }

            let boxHeight = this.getHeight3D(series, 18); //通过传参设定3d饼/环的高度，26代表26px

            // 准备待返回的配置项，把准备好的 legendData、series 传入。

            let option = {

                label: {

                    show: false,

                    position: 'outside',

                    rich: {

                        b: {

                            color: '#7BC0CB',

                            fontSize: 12,

                            lineHeight: 20

                        },

                        c: {

                            fontSize: 16

                        }

                    },

                    formatter: '{b|{b} \n}{c|{c}}{b|  亩}'

                },

                tooltip: {

                    formatter: params => {

                        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {

                            let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2);

                            return `${params.seriesName}<br/>` + `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + `${bfb}% +${option.series[params.seriesIndex].pieData.value}`;

                        }

                    }

                },

                xAxis3D: {

                    min: -1,

                    max: 1

                },

                yAxis3D: {

                    min: -1,

                    max: 1

                },

                zAxis3D: {

                    min: -1,

                    max: 1

                },

                grid3D: {

                    show: false,

                    boxHeight: boxHeight, //圆环的高度

                    viewControl: {

                        //3d效果可以放大、旋转等，请自己去查看官方配置

                        alpha: 40, //角度

                        distance: 150, //调整视角到主体的距离，类似调整zoom

                        rotateSensitivity: 0, //设置为0无法旋转

                        zoomSensitivity: 0, //设置为0无法缩放

                        panSensitivity: 0, //设置为0无法平移

                        autoRotate: false //自动旋转

                    }

                },

                series: series

            };

            return option;

        },

        //获取3d丙图的最高扇区的高度

        getHeight3D(series, height) {

            series.sort((a, b) => {

                return b.pieData.value - a.pieData.value;

            });

            return (height * 25) / series[0].pieData.value;

        },

        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation

        getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {

            // 计算

            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) * h * 0.1;

                    }

                    return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;

                }

            };

        },

        fomatFloat(num, n) {

            var f = parseFloat(num);

            if (isNaN(f)) {

                return false;

            }

            f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂

            var s = f.toString();

            var rs = s.indexOf('.');

            //判定如果是整数，增加小数点再补0

            if (rs < 0) {

                rs = s.length;

                s += '.';

            }

            while (s.length <= rs + n) {

                s += '0';

            }

            return s;

        },

        bindListen(myChart) {

            // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。

            let that = this;

            let selectedIndex = '';

            let hoveredIndex = '';

            // 监听点击事件，实现选中效果（单选）

            myChart.on('click', function (params) {

                // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。

                let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;

                let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;

                let k = that.option.series[params.seriesIndex].pieStatus.k;

                let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;

                let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;

                // 如果之前选中过其他扇形，将其取消选中（对 option 更新）

                if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {

                    that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[selectedIndex].pieData.startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[selectedIndex].pieData.value);

                    that.option.series[selectedIndex].pieStatus.selected = false;

                }

                // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）

                that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value);

                that.option.series[params.seriesIndex].pieStatus.selected = isSelected;

                // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex

                isSelected ? (selectedIndex = params.seriesIndex) : null;

                // 使用更新后的 option，渲染图表

                myChart.setOption(that.option);

            });

            // 监听 mouseover，近似实现高亮（放大）效果

            myChart.on('mouseover', function (params) {

                // 准备重新渲染扇形所需的参数

                let isSelected;

                let isHovered;

                let startRatio;

                let endRatio;

                let k;

                // 如果触发 mouseover 的扇形当前已高亮，则不做操作

                if (hoveredIndex === params.seriesIndex) {

                    return;

                    // 否则进行高亮及必要的取消高亮操作

                } else {

                    // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）

                    if (hoveredIndex !== '') {

                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。

                        isSelected = that.option.series[hoveredIndex].pieStatus.selected;

                        isHovered = false;

                        startRatio = that.option.series[hoveredIndex].pieData.startRatio;

                        endRatio = that.option.series[hoveredIndex].pieData.endRatio;

                        k = that.option.series[hoveredIndex].pieStatus.k;

                        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）

                        that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, that.option.series[hoveredIndex].pieData.value);

                        that.option.series[hoveredIndex].pieStatus.hovered = isHovered;

                        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空

                        hoveredIndex = '';

                    }

                    // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）

                    if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {

                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。

                        isSelected = that.option.series[params.seriesIndex].pieStatus.selected;

                        isHovered = true;

                        startRatio = that.option.series[params.seriesIndex].pieData.startRatio;

                        endRatio = that.option.series[params.seriesIndex].pieData.endRatio;

                        k = that.option.series[params.seriesIndex].pieStatus.k;

                        // 对当前点击的扇形，执行高亮操作（对 option 更新）

                        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);

                        that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;

                        // 记录上次高亮的扇形对应的系列号 seriesIndex

                        hoveredIndex = params.seriesIndex;

                    }

                    // 使用更新后的 option，渲染图表

                    myChart.setOption(that.option);

                }

            });

            // 修正取消高亮失败的 bug

            myChart.on('globalout', function () {

                // 准备重新渲染扇形所需的参数

                let isSelected;

                let isHovered;

                let startRatio;

                let endRatio;

                let k;

                if (hoveredIndex !== '') {

                    // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。

                    isSelected = that.option.series[hoveredIndex].pieStatus.selected;

                    isHovered = false;

                    k = that.option.series[hoveredIndex].pieStatus.k;

                    startRatio = that.option.series[hoveredIndex].pieData.startRatio;

                    endRatio = that.option.series[hoveredIndex].pieData.endRatio;

                    // 对当前点击的扇形，执行取消高亮操作（对 option 更新）

                    that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, that.option.series[hoveredIndex].pieData.value);

                    that.option.series[hoveredIndex].pieStatus.hovered = isHovered;

                    // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空

                    hoveredIndex = '';

                }

                // 使用更新后的 option，渲染图表

                myChart.setOption(that.option);

            });

        }

3D环饼图的更多相关文章

FusionCharts 3D环饼图
1.设计静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
4-Highcharts 3D图之3D普通饼图
<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title& ...
利用echarts highcharts 实现自定义地图关系图效果侧边3D柱形图饼图散点图
github 地址: https://https://github.com/Gengshaoxuan/medataMap github 地址: https://https://github.com ...
FusionCharts 2D环饼图
1.静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
FusionCharts 3D环饼图报错
1.在设计FusionCharts 3D环饼图时,出现错误,图显示不出来,具体错误如下图: 2.经过检查,发现声明的变量和下面引用的变量不一致 var doughnut2D = new FusionC ...
JFreeChart 使用一饼图之高级特性
原文链接:http://www.cnblogs.com/jtmjx/archive/2013/04/23/jfreechart_advantage.html 本文主要讲解JFreeChart中饼图的一 ...
3-Highcharts 3D图之3D柱状图分组叠堆3D图
<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...
2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
FusionCharts多数据验证饼图label是否重叠
昨天,有人问我一个问题:由于饼图的数据太多,label标签上的汉字过多,导致重叠,该怎么解决? 今天我用大量的数据,label标签的字符也很多,但是通过验证没有发现有重叠的情况啊! 1.验证的JSP页 ...
三分钟学会funsioncharts
由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

随机推荐

[转帖]Debian开启SSH
一.Debian开启SSH 参考链接: https://blog.csdn.net/zzpzheng/article/details/71170572 https://help.aliyun.com/ ...
[转帖]AMD处理器ZEN一代之国产化海光
https://huataihuang.gitbook.io/cloud-atlas-draft/os/linux/kernel/cpu/amd_hygon 2020年国产化处理器受到了广泛的关注 ...
[转帖]使用 TiUP bench 组件压测 TiDB
https://docs.pingcap.com/zh/tidb/stable/tiup-bench 在测试数据库性能时,经常需要对数据库进行压测,为了满足这一需求,TiUP 集成了 bench 组件 ...
[转帖]MySQL InnoDB存储引擎大观
https://baijiahao.baidu.com/s?id=1709263187856706948&wfr=spider&for=pc MySQL InnoDB 引擎现在广为 ...
[转帖]一行Python代码实现同一局域网内的文件共享
在不同的设备之间传输文件除了数据线,网盘传输外是否还有其他优雅的方法?我们可以使用一行Python代码使局域网内的所有设备都可以访问并下载文件夹内的文件. 要求: 电脑中安装配置好python 访问的 ...
【转帖】linux 软连接的使用
https://www.cnblogs.com/sueyyyy/p/10985443.html 软连接是linux中一个常用命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接. 具体用法是: ...
[转帖]GCC 编译及编译选项
俗话说:'工欲善其事,必先利其器',一直在工作中使用GNU C编译器(以下简称GCC),这里对GCC的一些警告选项细致的分析,并列举几个简单的例子[注1]供分析参考. 1. -Wall集合警告选项我们 ...
一文详解 Netty 组件
作者:京东物流张弓言一.背景 Netty 是一款优秀的高性能网络框架,内部通过 NIO 的方式来处理网络请求,在高负载下也能可靠和高效地处理 I/O 操作作为较底层的网络通信框架,其被广泛应用在 ...
语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
语义检索系统:基于Milvus 搭建召回系统抽取向量进行检索,加速索引目标:使用 Milvus 搭建召回系统,然后使用训练好的语义索引模型,抽取向量,插入到 Milvus 中,然后进行检索. 语义搜 ...
C/C++ 使用CRC检测内存映像完整性
前面的那一篇文章中所使用的技术只能有效抵抗解密者直接修改硬盘文件,当我们使用动态补丁的时候,那么内存中同样不存在校验效果,也就无法抵御对方动态修改机器码了,为了防止解密者直接对内存打补丁,我们需要在硬 ...

3D环饼图

3D环饼图的更多相关文章

随机推荐

热门专题