zoukankan      html  css  js  c++  java
  • echarts 饼图给外层加边框

    在series里面再加一个圆,设置他的位置和边框大小即可。

    data() {
        return {
            option: {
                title: {
                    show: true,
                    text: '项目总数',
                    subtext: 230,
                    itemGap: 8,
                    left: '49%',
                    top: '42%',
                    textStyle: {
                        color: '#B4E4FF',
                        fontSize: 16,
                    },
                    textAlign:'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    icon: "rect",
                    top: 0,
                    right: 0,
                    itemWidth: 15,
                    itemHeight: 15,
                    textStyle: {
                        color: '#B4E4FF',
                        fontSize: 15
                    },
                    data: ['970分以上', '950-970分', '900-950分', '900分以下']
                },
                color : [ '#502092', '#0d8888', '#a4224a', '#af3b14' ],
                graphic: {
                    type: 'text',
                    style: {
                        textAlign: 'center',
                        fill: 'rgb(149,162,255)',
                         30,
                        height: 30,
                    }
                },
                series: [
                    {
                        name: '项目分数',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: true
                        },
                        data: [
                            {value: 335, name: '970分以上'},
                            {value: 310, name: '950-970分'},
                            {value: 234, name: '900-950分'},
                            {value: 135, name: '900分以下'},
                        ]
                    },
                    {
                        name: '外边框',
                        type: 'pie',
                        clockWise: false, 
                        radius: ['74%', '74%'],//边框大小
                        center: ['50%', '50%'],//边框位置
                        data: [{
                            value: 10,
                            itemStyle: {
                                normal: {
                                    borderWidth: 8,//设置边框粗细
                                    borderColor: 'rgb(9,37,71, 0.5)'//边框颜色
                                }
                            }
                        }]
                    },
                ]
            },
        };
    

      

  • 相关阅读:
    ossec配置使用腾讯企业邮箱告警
    网络排除工具之tcping
    pyenv 安装
    CVE-2020-1472 漏洞检测
    容器技术的核心
    简述 进程、线程、协程的区别 以及应用场景--记录
    php函数使用
    php使用表单post方法进行页面
    CURL方式使用代理访问网站
    nginx下隐藏admin和当前域名下得index.php
  • 原文地址:https://www.cnblogs.com/theblogs/p/13862552.html
Copyright © 2011-2022 走看看