echarts环形图、渐变、圆角

Question

请问这种图用哪种type好画一点，只有一组数据，要有圆角和渐变色

Answer 1

EChartsDemo集 EChartsDemo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com https://www.isqqw.com/echartsdetail?id=15129

参考这个 ，把颜色改成渐变就行

var data = [
    // {
    //     name: '受理业务总量',
    //     value: 100,
    //     num: 1234,
    // },
    // {
    //     name: '办结业务总量',
    //     value: 50,
    //     num: 5678,
    // },
    // {
    //     name: '在办业务总量',
    //     value: 49,
    //     num: 9012,
    // },
    {
        name: '超期业务总量',
        value: 1,
        num: 50,
    },
];

var titleArr = [],
    seriesArr = [];
colors = [
    ['#5B8FF9', '#E9EEF4'],
    ['#5AD8A6', '#E9EEF4'],
    ['#FFFF80', '#E9EEF4'],
    ['#E86452', '#E9EEF4'],
];
data.forEach(function (item, index) {
    titleArr.push({
        text: item.num + '\n' +item.name,
        left: index * 25 + 10 + '%',
        top: '65%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: '#333',
            textAlign: 'center',
        },
    });
    seriesArr.push({
        name: item.name,
        type: 'pie',
        clockWise: false,
        radius: [60, 70],
        itemStyle: {
            normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
        },
        hoverAnimation: false,
        center: [index * 25 + 10 + '%', '50%'],
        data: [
            {
                value: item.value,
                label: {
                    normal: {
                        formatter: function (params) {
                            return params.value + '%';
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#333',
                        },
                    },
                },
            },
            {
                value: 100 - item.value,
                name: 'invisible',
                itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#16CEB9',
                        },
                        {
                            offset: 1,
                            color: '#6648FF',
                        },
                    ]),
                },
            }
            }
        ]
    });
});

option = {
    backgroundColor: '#fff',
    title: titleArr,
    series: seriesArr,
};

参考一下

option={
        tooltip: {//提示框，可以在全局也可以在
            trigger: 'item',  //提示框的样式
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            color:'#000', //提示框的背景色
            textStyle:{ //提示的字体样式
                color:"black",
            }
        },
        legend: {  //图例
            orient: 'vertical',  //图例的布局，竖直    horizontal为水平
            x: 'right',//图例显示在右边
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
            textStyle:{    //图例文字的样式
                color:'#333',  //文字颜色
                fontSize:12    //文字大小
            }
        },
        series: [
          
            {
                name:'访问来源',
                type:'pie', //环形图的type和饼图相同
                radius: ['50%', '70%'],//饼图的半径，第一个为内半径，第二个为外半径
                avoidLabelOverlap: false,
                color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1'],
                label: {
                    normal: {  //正常的样式
                        show: true,
                        position: 'left'
                    },
                    emphasis: { //选中时候的样式
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },  //提示文字
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                   itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#16CEB9',
                        },
                        {
                            offset: 1,
                            color: '#6648FF',
                        },
                    ]),
                },
              },
                data:[
                    {value:335, name:'直接访问'},
                    // {value:310, name:'邮件营销'},
                    // {value:234, name:'联盟广告'},
                    // {value:135, name:'视频广告'},
                    // {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    }

把这个复制到

Examples - Apache ECharts ECharts, a powerful, interactive charting and visualization library for browser https://echarts.apache.org/examples/zh/editor.html?c=data-transform-multiple-pie

里面