echart 圆角圆环

最新推荐文章于 2024-05-28 15:45:01 发布

春风得意之时

最新推荐文章于 2024-05-28 15:45:01 发布

阅读量430

点赞数

分类专栏： echart#圆环文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/u012513962/article/details/125213637

版权

echart#圆环专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述


var getflname = ['其他', '用餐支出', '用水支出', '用电支出'];
var getflvalue = [10,40,35,15];

// 圆环值
var data1 = [];
for(var i = 0;i<getflname.length;i++){
	data1.push({name:getflname[i],value:getflvalue[i]})
}

// 圆环颜色
var color = [{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
            offset: 0,
            color: '#FDC48D' // 0% 处的颜色
        },
        {
            offset: 1,
            color: '#EAC093' // 100% 处的颜色
        }
    ],
}, {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
            offset: 0,
            color: '#4A92FF' // 0% 处的颜色
        },
        {
            offset: 1,
            color: '#75D0FF' // 100% 处的颜色
        }
    ],
}, {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
            offset: 0,
            color: '#7464F2' // 0% 处的颜色
        },
        {
            offset: 1,
            color: '#7488FF' // 100% 处的颜色
        }
    ],
}, {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
            offset: 0,
            color: '#54C7C0' // 0% 处的颜色
        },
        {
            offset: 1,
            color: '#93FFF3' // 100% 处的颜色
        }
    ],
}, ]



var num = 0
const seriesOption2 = data1.map((item, index) => {
    num += item.value
    const a = {
        type: 'bar',
        data: [, , , num],
        coordinateSystem: 'polar',
        z: 9999 - index,
        name: '抢修项目',
        roundCap: true,
        color: color[index],
        barGap: '-100%',
           itemStyle: {
            normal: {
                // borderWidth: 6,
                shadowBlur: 5,
                // color: 'transparent',
                // borderColor: color[i],
                shadowColor: color[index]
            }
        }
    }
    return a
})


option = {
    backgroundColor: '#010818',
    color: color,
    tooltip: {
        show: false
    },
    legend: {
        show: false,
        icon: "circle",
        orient: 'horizontal',
        // x: 'left',
        data: ['其他', '用餐支出', '用水支出', '用电支出'],
        right: 340,
        bottom: 150,
        align: 'right',
        textStyle: {
            color: "#C1F6FF"
        },
        itemGap: 20
    },
    angleAxis: {
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        min: 0,
        max: 100,
        boundaryGap: ['0', '100'],
        startAngle: 90
    },
    radiusAxis: {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        data: ['a', 'b', 'c','d'],
        z: 10
    },
    polar: {
        radius: '70%'
    },
    toolbox: {
        show: false
    },
    series: [...seriesOption2]
}