【求助】ECharts如何自定义环形图?

问题描述:
需求是想要把环形图改成第二张看起来有立体感的效果,怎么样可以实现?

尝试过的方法:
使用 canvas 自己画,但不能鼠标移入放大图表比例

有做过的大佬吗,求助求助

当前环形图

image

想要的立体效果

ECharts环形图

阅读 4.2k
2 个回答

image

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '情况统计',
            type: 'pie',
            selectedMode: 'single',
            radius: ['40%', '45%'],
            label: {
                show: false
            },
            data: [
                {value: 324, name: '达标',itemStyle: {
                    color: '#63d48b',
                }},
                {value: 250, name: '预警',itemStyle: {
                    color: '#2599da',
                }},
                {value: 250, name: '告警',itemStyle: {
                    color: '#ced095',
                }},
                {value: 200, name: '应急',itemStyle: {
                    color: '#cf8084',
                }}
            ]
        },
        {
            name: '情况统计',
            type: 'pie',
            radius: ['44%', '60%'],
            data: [
                {value: 324, name: '达标',itemStyle: {
                    color: '#6fed9f',
                }},
                {value: 250, name: '预警',itemStyle: {
                    color: '#31b4fa',
                }},
                {value: 250, name: '告警',itemStyle: {
                    color: '#feea93',
                }},
                {value: 200, name: '应急',itemStyle: {
                    color: '#f1797d',
                }}
            ]
        }
    ]
};

可以设置阴影的,不过跟你要得效果有点差距。在data里设置每一个数据的itmeStyle里的color和shadow相关的属性就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题