echarts水球图分享

Qin__

已于 2024-08-27 12:33:29 修改

阅读量338

点赞数

分类专栏：前端学习文章标签： echarts

于 2022-11-04 15:26:18 首次发布

本文链接：https://blog.csdn.net/Uookic/article/details/127689888

版权

前端学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

var value = 0.45;
var value1 = 0.76;
var data = [value, value1];
var option = {
     backgroundColor: '#0F224C',
    title: [
        {
            text: '本年收缴率',
            x: '22%',
            y: '70%',
            textStyle: {
                fontSize: 14,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
            },
        },
        {
            text: '本月收缴率',
            x: '73%',
            y: '70%',
            textStyle: {
                fontSize: 14,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
            },
        },
    ],
    series: [
        {
            type: 'liquidFill',
            radius: '47%',
            center: ['25%', '45%'],
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#446bf5',
                        },
                        {
                            offset: 1,
                            color: '#2ca3e2',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            data: [value, value], // data个数代表波浪数
            backgroundStyle: {
                borderWidth: 1,
                color: 'RGBA(51, 66, 127, 0.7)',
            },
            label: {
                normal: {
                    textStyle: {
                        fontSize: 50,
                        color: '#fff',
                    },
                },
            },
			            outline: {
			                // show: false
			                borderDistance: 0,
			                itemStyle: {
			                    borderWidth: 2,
			                    borderColor: '#112165',
			                },
			            },
        },


        { //第二个球的填充
            type: 'liquidFill',
            radius: '47%',
            center: ['75%', '45%'],
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#2aa1e3',
                        },
                        {
                            offset: 1,
                            color: '#08bbc9',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            data: [value1, value1], // data个数代表波浪数
            backgroundStyle: {
                borderWidth: 1,
                color: 'RGBA(51, 66, 127, 0.7)',
            },
            label: {
                normal: {
                    textStyle: {
                        fontSize: 28,
                        color: '#fff',
                    },
                },
            },
			            outline: {
			                // show: false
			                borderDistance: 0,
			                itemStyle: {
			                    borderWidth: 2,
			                    borderColor: '#112165',
			                },
			            },
        },
    ],
};