用echarts画的百分比圆

待我称王封你为后i 2022-12-20 03:26 239阅读 0赞

# 用echarts画的百分比圆 #

/\* 百分比 \*/

#echarts {
    
    background-color: #fff;
    
    border-radius: 0 0 20px 20px;
    
    box-shadow: 0.5px 3px 15px #eae8e8;
    
    }
    
    
    
    
    
    .da_program {
    
    width: 100%;
    
    height: 434rpx;
    
    font-size: 12rpx;
    
    position: relative;
    
    }
    
    
    
    /* 百分比圆球 */
    
    .round {
    
    position: absolute;
    
    width: 200rpx;
    
    height: 200rpx;
    
    background-color: #fff;
    
    bottom: 45rpx;
    
    left: 50%;
    
    margin-left: -100rpx;
    
    z-index: 1000;
    
    border: 10px solid #cccccc38;
    
    display: flex;
    
    flex-direction: column;
    
    align-items: center;
    
    justify-content: center;
    
    }
    
    
    
    /* 百分比圆球里的文字 */
    
    .round .roundText {
    
    font-size: 10rpx;
    
    color: #598BFF;
    
    }
    
    
    
    
    
    // 引入echarts插件
    
    import echarts from 'echarts'
    
    
    
    mounted() {
    
    this.creat_echarts()
    
    },

methods: {
    
    // 创建 echarts 图表
    
    creat_echarts() {
    
    // 基于准备好的dom，初始化echarts实例
    
    let myChart = echarts.init(document.getElementById('echarts'))
    
    let option = {
    
    backgroundColor: '#fff',
    
    series: [{
    
    name: '测试',
    
    type: 'pie',
    
    // 起始角度
    
    startAngle: 0,
    
    // 第一个参数是内半径 第二个是外半径
    
    radius: ['120%', '140%'],
    
    // 饼图的中心（圆心）坐标
    
    center: ['50%', '100%'],
    
    // 不显示文本标签
    
    label: {
    
    normal: {
    
    show: false,
    
    }
    
    },
    
    // 不显示视觉引导线
    
    labelLine: {
    
    normal: {
    
    show: false
    
    }
    
    },
    
    data: [
    
    // 这是下面那个半圆 被隐藏住了
    
    {
    
    value: 600,
    
    itemStyle: {
    
    normal: {
    
    color: "#EEEEFF 58%"
    
    }
    
    }
    
    },
    
    // 这是数据
    
    {
    
    value: 420,
    
    itemStyle: {
    
    normal: {
    
    color: "#4B5AE2"
    
    }
    
    }
    
    
    
    },
    
    // 这是总数减去数据
    
    {
    
    value: 180,
    
    itemStyle: {
    
    normal: {
    
    color: "#9999FF"
    
    }
    
    }
    
    }
    
    ]
    
    }]
    
    };
    
    myChart.setOption(option);
    
    }
    
    },