echart常用基础环形图

最新推荐文章于 2024-09-07 09:00:00 发布

低_调_哥

最新推荐文章于 2024-09-07 09:00:00 发布

阅读量4.6k

点赞数

分类专栏：前端-echart

本文链接：https://blog.csdn.net/caiyongshengCSDN/article/details/79158528

版权

前端-echart 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

附图:

//环状图
constructionRingOption = {
    color: ['#5bd1ca', '#bdd95e', '#e9996e', '#f6bb42', '#9e9bd7'],
    tooltip: {
        trigger: 'item',
        padding: 10,
        formatter: function(params) {
            return params.name + '：' + params.value + '万元' + '<br/>' + '占&nbsp;&nbsp;&nbsp;比：' + params.data.percent + '%';
        }
        // formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',    //是否竖向排列
        x : 'left',
        y:'30',
        textStyle: {
            color: '#666'
        },
        data: ['车站主体', '出入口', '风道', '监测', '车站']
    },
    calculable: true,
    series: [{
        type: 'pie',
        center: ['50%', '60%'],   //图表位置调整
        radius: ['55%', '70%'],   //内外圆半径
        itemStyle: {
            normal: {
                label: {           //标示文字
                    show: true
                },
                labelLine: {    //牵引线
                    show: true
                }
            },
            emphasis: {  //鼠标悬停时
                label: {   文字显示
                    show: true,
                    position: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                }
            }
        },
        data: [{
            value: 335,
            percent: 25,
            name: '车站主体'
        }, {
            value: 310,
            percent: 34,
            name: '出入口'
        }, {
            value: 234,
            percent: 4,
            name: '风道'
        }, {
            value: 135,
            percent: 6,
            name: '监测'
        }, {
            value: 1548,
            percent: 9,
            name: '车站'
        }]
    }]
};