echarts 简化水柱图

最新推荐文章于 2024-05-30 09:55:08 发布

林林_4年

最新推荐文章于 2024-05-30 09:55:08 发布

阅读量406

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jghjh56564/article/details/135400844

版权

var value = 0.2;  //剩余比例
var value1 = 75.2  //当前剩余流量
var value2 = 75.2 //已用流量
var data = [value];


var option = {
    backgroundColor: '#fff',
    title: [
        {
            text: '当前流量剩余：'+value1,
            left: '50%',
            top: "58%",
            textAlign: 'center',
            textStyle: {
                fontSize: '20',
                fontWeight: '400',
                color: '#fff',
                
                textAlign: 'center',
            },
        },
        {
            text: 'MB',
            left: '61.5%',
            top: "58.5%",
            textAlign: 'center',
            textStyle: {
                fontSize: '18',
                fontWeight: '400',
                color: '#fff',
                
                textAlign: 'center',
            },
        },
        {
            text: '已用流量：'+value2+'M',
            left: '50%',
            top: "64%",
            textAlign: 'center',
            textStyle: {
                fontSize: '20',
                fontWeight: '400',
                color: '#fff',
                
                textAlign: 'center',
            },
        },
        {
            text: (value * 100).toFixed(0),
            left: '47.5%',
            top: '30%',
            textAlign: 'center',
            textStyle: {
                fontSize: 70,
                color: '#fff',
            },
        },

        {
            text:"%",
            left: '56%',
            top: '34%',
            textAlign: 'center',
            textStyle: {
                fontSize: 40,
                color: '#fff',
            },
        },
    ],
    series: [{
            type: 'liquidFill',
            radius: '70%',
            z: 6,
            center: ['50%', '50%'],
           
            amplitude: 20,
            backgroundStyle: {
                borderWidth: 1,
                color: 'rgba(201,219,252, 1)', // 球体
            },
             color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 1,
                            color: value==0.2?'orange':'#ccc',
                        },
                        {
                            offset: 0,
                            color: value==0.2?'orange':'#ccc',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            data:data,
            label: {
                normal: {
                    formatter: '',
                }
            },
            outline: {
                show: true,
                itemStyle: {
                    borderWidth: 0,
                },
                borderDistance: 0,
            }
        },
       
        
    ]
}