echars 半圆环形图记录

 // 半圆环形图
var myChart = echarts.init(document.getElementById(id));

var option = {
        title: {
            text: ['测试'],
            show: true,
            x: "center",
            y: "bottom",
            textStyle: {
                color: '#a3a6b4',
                fontSize: 13,
                fontWeight: 'bold'
            },
            left: 'center',
            top: '90%',
            bottom: '69%',
            itemGap: 60,
        },
        tooltip: {
            show: false,
        },
        color: ['#B7DD7'],

        legend: {
            orient: 'vertical',
            x: 690,
            y: 120,
            data: ['www'],

        },
        series: [{
            type: 'pie',
            //起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            tooltip: {},
            radius: ["30%", "47%"],
            center: ['50%', '80%'],
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    color: '#fff',
                    formatter: function(params) {
                        return params.value
                    },
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: [50],
                itemStyle: {
                    normal: {
                        color: "rgba(80,150,224,0)"
                    }
                }
            },

            ]
        },
            {
                type: 'pie',
                startAngle: 0,
                hoverAnimation: false,
                radius: ["70%", "87%"],
                center: ['50%', '80%'],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '10',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{//代表下半部分隐藏的半圆(不能为0)
                    value: 300,
                    itemStyle: {
                        normal: {
                            color: "rgba(1,218,220,0)"
                        }
                    }
                },
                    {//上半部分半圆所占比例
                        value: 200,
                        itemStyle: {
                            normal: {
                                color: "rgba(1,218,220,1)"
                            }
                        }

                    },
                    {//上半部分圆剩下的比例(不能为0)
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(1,218,220,0.1)"
                            }
                        }
                    },
                ]
            }
        ]
    };

 myChart.setOption(option);

如图所示

发布了22 篇原创文章 · 获赞 3 · 访问量 2768
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览