Echarts 数据可视化实现半圆饼图效果，渐变颜色

101 阅读 0 评论 67 点赞

我是靠谱客的博主粗心口红，这篇文章主要介绍Echarts 数据可视化实现半圆饼图效果，渐变颜色，现在分享给大家，希望可以做个参考。

Echarts 实现半圆饼图，渐变颜色

在Echarts的实例库当中并没有半圆的饼图，但是我们又想实现一个半圆的饼图，并且想要一个渐变颜色的效果，那该怎么做呢。效果如下：
半圆饼图

首先我们可以在Echarts的饼图实例中选取一个效果如下图的饼图全圆饼图
接着，我们修改option中的配置项属性。

上面饼图的option中的data项为5项，我们只需要将其删减为3项，并且将其value值按照2:1:1划分。
设置饼图的角度startAngle属性。

复制代码

1
2
startAngle: 0, // 角度根据value值的分配情况进行修改

饼图调整角度图

将设置好data值中，饼图最大的那一部分的itemStyle里面的normal中的color设置为transparent //透明色，代码如下：

复制代码

1
2
3
4
5
6
itemStyle: {
           normal: {
           color: "transparent" // 透明色
                   }
             },

设置data值中任意一项数据的颜色为渐变色，代码如下，颜色可根据自己的需求更改

复制代码

1
2
3
4
5
6
7
8
itemStyle: {
            normal: { // 渐变色操作
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           		{ offset: 0, color: '#FFCCCC' },  // 初始颜色
                { offset: 1, color: '#FF99CC' }])  // 结束颜色
                        }
                   },

设置好后即可完成饼图的半圆效果。
po一下整个代码：

复制代码

option = {
                series: [
                    {
                        startAngle: 0, // 饼图的角度
                        hoverAnimation: false,  // 取消饼图放大效果
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 100,
                                itemStyle: {
                                    normal: {
                                        color: "transparent" // 透明色
                                    }
                                }, name: ''
                            },
                            {
                                value: 60, name: '',
                                itemStyle: {
                                    normal: { // 渐变色操作
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#FFCCCC' },  // 起始颜色
                                            { offset: 1, color: '#FF99CC' }])  // 结束颜色
                                    }
                                },
                            },
                            {
                                value: 40, name: '',
                                itemStyle: {
                                    // 原本的颜色
                                    normal: { color: "#CCCCFF" },
                                    // 鼠标移动上去覆盖高亮的颜色
                                    emphasis: { color: '#CCCCFF' }

},
                            },
                        ]
                    }
                ]
            };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
option = {
                series: [
                    {
                        startAngle: 0, // 饼图的角度
                        hoverAnimation: false,  // 取消饼图放大效果
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 100,
                                itemStyle: {
                                    normal: {
                                        color: "transparent" // 透明色
                                    }
                                }, name: ''
                            },
                            {
                                value: 60, name: '',
                                itemStyle: {
                                    normal: { // 渐变色操作
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#FFCCCC' },  // 起始颜色
                                            { offset: 1, color: '#FF99CC' }])  // 结束颜色
                                    }
                                },
                            },
                            {
                                value: 40, name: '',
                                itemStyle: {
                                    // 原本的颜色
                                    normal: { color: "#CCCCFF" },
                                    // 鼠标移动上去覆盖高亮的颜色
                                    emphasis: { color: '#CCCCFF' }

                                },
                            },
                        ]
                    }
                ]
            };