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)'//边框颜色
                                }
                            }
                        }]
                    },
                ]
            },
        };
    

      

  • 相关阅读:
    linux下nginx+php+mysql环境搭建
    Linux下配置安装PHP环境
    什么是Apache APR
    全端之Jquery--操作属性
    全端之jQuery基本语法
    全端之Javascript(操作DOM对象二)
    全端之Javascript(DOM对象三)
    全端之Javascript(DOM对象一)
    全端之Javascript对象
    全端开发——css(操作属性补充)
  • 原文地址:https://www.cnblogs.com/theblogs/p/13862552.html
Copyright © 2011-2022 走看看