android 3D效果的饼状图实现销售漏斗

先上效果图

实现思路：核心其实就是圆柱的绘制，上下两个椭圆中间用线起来就行了。

直接上代码

/**
* Created by catos on 2016/7/21.
* 销售漏斗
*/

public class CylinderView extends View {
Context context;
Paint paint;
Path path;
int sub_line = 2, sub_cicle = 24, distance = 120; //两个椭圆的缩进、两个圆柱的缩进、两个圆柱的距离
int width, height; //屏幕宽高
float left, right, top, bottom, left2, right2, top2, bottom2, start, middle, temp_top, temp_left,
c_height1,c_height2,c_height3,c_height4,c_height5,c_height6; //构成圆柱的上下两个椭圆的位置坐标,每个圆柱背景高度
RectF rel; //椭圆

ArrayList<Float> planList = new ArrayList<>();
ArrayList<Float> logList = new ArrayList<>();
ArrayList<String> titleList = new ArrayList<>();

public CylinderView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
}

public void renewCylinderView(ArrayList<Float> planList, ArrayList<Float> logList, ArrayList<String> titleList) {
    this.planList = planList;
    this.logList = logList;
    this.titleList = titleList;
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.WHITE);
    //屏幕宽度
    Resources resources = context.getResources();
    DisplayMetrics dm = resources.getDisplayMetrics();
    width = dm.widthPixels;
    height = dm.heightPixels;

    rel = new RectF();

    sub_line = ScreenUtil.dp2px(context, 1);
    sub_cicle = ScreenUtil.dp2px(context, 8);
    distance = ScreenUtil.dp2px(context, 40);

    //画笔2
    paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setAntiAlias(true); //去锯齿
    paint.setTextSize(ScreenUtil.dp2px(context, 16));
    paint.setColor(ContextCompat.getColor(context, R.color.cricle_purplebac));

    if (planList.size() == 4 || logList.size() == 4) {
        draw1stMipsBac(canvas);
        drawSecMipsBac(canvas);
        drawThrMipsBac(canvas);
        draw4stMipsBac(canvas);

        draw4stMips(canvas);
        drawThrMips(canvas);
        drawSecMips(canvas);
        draw1stMips(canvas);
    } else if (planList.size() == 6 || logList.size() == 6) {
        draw1stMipsBac(canvas);
        drawSecMipsBac(canvas);
        drawThrMipsBac(canvas);
        draw4stMipsBac(canvas);
        draw5stMipsBac(canvas);
        draw6stMipsBac(canvas);

        draw6stMips(canvas);
        draw5stMips(canvas);
        draw4stMips(canvas);
        drawThrMips(canvas);
        drawSecMips(canvas);
        draw1stMips(canvas);
    }
}

//第1个圆柱
private void draw1stMips(Canvas canvas) {
    float f;
    paint.setColor(ContextCompat.getColor(context, R.color.common_btn_nomal));
    canvas.drawText(Integer.valueOf(logList.get(0).toString().replace(".0", "")) + "/" + Integer.valueOf(planList.get(0).toString().replace(".0", "")),
            width / 5 * 4, height / 24 + ScreenUtil.dp2px(context, 36), paint);
    canvas.drawText(titleList.get(0), width / 12, height / 24 + ScreenUtil.dp2px(context, 36), paint);
    if (planList.get(0) == 0 && logList.get(0) > 0) {
        f = 1;
    } else if (planList.get(0) == 0 && logList.get(0) == 0) {
        return;
    } else {
        f = logList.get(0) / planList.get(0);
    }
    if (f > 1) {
        f = 1;
    }
    f = 1 - f;

    left = width / 4;
    right = 3 * width / 4;
    temp_left = left;
    left = temp_left + (right - temp_left) * f / 2;
    right = right - (right - temp_left) * f / 2;

    top = height / 24;
    bottom = top + (right - left) / 5;
    temp_top = top;
    top = top + (c_height1) * f;
    bottom = bottom + (c_height1) * f;

    left2 = left + sub_line;
    right2 = right - sub_line;
    top2 = top + (right - left) / 8;
    bottom2 = top2 + (right - left) / 6;

    start = bottom - (bottom - top) / 2;  //第一个椭圆的y坐标
    middle = bottom2 - (b