echarts的写作技巧：

ゞ浴缸里的玫瑰 2023-07-25 11:24 19阅读 0赞

var funPie= function (myChart, dataObj,is1366) { 
        var data = [];
        for (var i = 0; i < dataObj.dataArr.length; i++) { 
            data.push({ 
                value: dataObj.dataArr[i].value,
                name: dataObj.dataArr[i].name,
                itemStyle: { 
                    normal: { 
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: dataObj.color[i],
                        shadowColor: dataObj.color[i]
                    }
                }
            }, { 
                value: 2,
                name: '',
                itemStyle: { 
                    normal: { 
                        label: { 
                            show: false
                        },
                        labelLine: { 
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
        var seriesOption = [{ 
            name: '',
            type: 'pie',
            clockWise: true,//饼图的扇区是否是顺时针排布。
            center:['50%','23%'],
            radius: ['40%', '40%'],
            hoverAnimation: false,
            itemStyle: { 
                normal: { 
                    label: { 
                        show: false,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function (params) { 
                            var percent = 0;
                            var total = 0;
                            for (var i = 0; i < dataObj.dataArr.length; i++) { 
                                total += dataObj.dataArr[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') { 
                                return '开门记录：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                            } else { 
                                return '';
                            }
                        },
                    },
                    labelLine: { 
                        length: 30,
                        length2: 100,
                        show: false,
                        color: '#00ffff'
                    }
                }
            },
            data: data
        }];
        var sum = 0;
        for (var j = 0; j < data.length; j++) { 
            sum += parseFloat(data[j].value);
        }
        var objData = array2obj(data, 'name');
        option = { 
            // backgroundColor: ,
            color: dataObj.color,
            title: { 
                text: dataObj.tit,
                top: '23%',
                textAlign: "center",
                left: "49%",
                textStyle: { 
                   //设置标题的样式
                }
            },
    
            tooltip: { 
                show: true,
                trigger: 'item',
                formatter: "{b} : {c}" + dataObj.unit + " ({d}%)"
            },
            legend: { 
                icon: "emptycircle",//设置成空心圆，circle是实心圆
                itemWidth:12,
                itemHeight:12,
                orient: 'horizontal',
                // x: 'left',
                data: dataObj.legendData,
                // right: 0,
                width:'100%',
                top: '47%',
                align: 'left',//icon居左
                textStyle: { 
                   //设置legend的字体样式
                    rich: { 
                        percent: { 
                            color: 'rgba(16,34,92,1)',
                        }
                    }
                },
                itemGap: 10,
                formatter:function (name) { 
                    var per = ((objData[name].value / sum) * 100).toFixed(2);
                    var result;
                    if (name.length >= 3) { 
                        result = name + '\t\t\t\t' +"{percent|" + per + "%}";
                    } else { 
                        result = name + '\t\t\t\t\t\t\t\t\t\t\t'  +"{percent|" + per + "%}";
                    }
    				 return result;
                }
            },
            toolbox: { 
                show: false
            },
            series: seriesOption
        }
        // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option, true);
        
        if(is1366){ //1366下显示的样式
            
        }
       //监听window变化，重画图表
        $(window).resize(function () { 
            myChart.resize();
        });
        return myChart;
    }

**使用时**

let id= echarts.init(document.getElementById('pieId'));
    //这里需要定义需要的数据
    this.getData();
    				let data = [];
    				data = { 
    					tit: '饼图中间的标题',
    					unit: '单位',
    					dataArr: [{ 
    						name: 'xxx',
    						value: 40
    					}, { 
    						name: 'yyyy',
    						value: 10
    					}, { 
    						name: 'zzzz',
    						value: 30
    					}, { 
    						name: 'mmmm',
    						value: 40
    					}, { 
    						name: 'nnn',
    						value: 40
    					}],
    					legendData: ['xxx', 'yyyy', 'zzzz', 'mmmm', 'nnn'],
    					color: ['#00B1F1', '#7CBF32', '#C10000', '#0070C1', '#6699FF']
    				};
    funPie(id, data, this.is1366);//this.is1366判断屏幕宽度是不是1366

效果如下：  
![饼图的实际效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/c4aa36652d15436a8ffdb62dcb23049c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 markdown高级写作技巧汇总

文章目录 1 代码diff 2 待办事项 3 图片设置宽高 4 折叠 5 锚点链接

男娘i/ 2024年03月22日 23:58/ 0 赞/ 89 阅读

相关 echarts的写作技巧：

var funPie= function (myChart, dataObj,is1366) { var data = []; for

ゞ浴缸里的玫瑰/ 2023年07月25日 11:24/ 0 赞/ 20 阅读

相关 csdn——markdown常用写作技巧

文章目录一、标题 1、使用 \ 号可表示 1-6级标题一级标题二级标题三级标题

快来打我*/ 2023年03月02日 04:53/ 0 赞/ 138 阅读

相关 SCI写作技巧

SCI论文从入门到精通先想先写最后做做研究之前，必须想清楚：结果能不能发表？发表在哪里？先把文章大框写好，空出数据，等做完实验填完空就可以发了；正

今天药忘吃喽~/ 2023年02月22日 05:25/ 0 赞/ 119 阅读

相关写作技巧：如何在word里优雅的插入代码

在现实生活中，我们有时需要在word里插入代码，如果直接复制，缩进哪些会出问题。今天如何讲解下如何优雅的插入代码第一步：打开网站 [http://www.planetb

ゝ一世哀愁。/ 2022年12月31日 04:26/ 0 赞/ 304 阅读

相关 SCI论文写作技巧

本文是基于B站DR\_CAN的[《期刊审稿人手把手教你写一篇SCI》][SCI]系列视频做的学习笔记。推荐一个同义词和反义词网站查询网站：[Thesaurus.com][]

曾经终败给现在/ 2022年11月17日 13:40/ 0 赞/ 270 阅读

相关【csdn博客写作技巧】

文章目录一、插入表格二、插入图像 1、调整图像位置 2、调整图像大小 3、图片并排显示 Reference

川长思鸟来/ 2022年09月10日 00:23/ 0 赞/ 182 阅读

相关 markdown写作技巧

http://[blog.csdn.net/pipisorry/article/details/50638547][blog.csdn.net_pipisorry_articl

淩亂°似流年/ 2022年08月20日 06:19/ 0 赞/ 244 阅读

相关有技巧，写作如有神助

现实的骨感你肯定已经看过了很多的文章，有些文章你看起来津津有味，有些你看了都觉得浪费时间。如果自己写了一篇文章，都希望让人记忆很深刻，可现实总是很及时的用冷水浇醒你。记

约定不等于承诺〃/ 2022年06月07日 02:58/ 0 赞/ 143 阅读

相关学术论文写作方法和技巧

[学术论文写作方法和技巧][Link 1] 该教程从论文发表流程包括确定方向、确定问题、确定思路、确定方法、实验验证、撰写论文的几个过程出发，详细阐述了撰写学术论文的注意事

叁歲伎倆/ 2022年03月17日 09:07/ 0 赞/ 323 阅读