echarts的写作技巧:

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

效果如下:
饼图的实际效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值