echarts图表设置多环形图、渐变色及背景图添加

在echarts应用中，经常遇到复杂图标的设置。

现将echarts图表中多环形图、渐变色、背景图添加整理如下。
代码片.

var value1 = 4,value2=6,value3 = 3,value4=5,value5=value1+value2+value2+value4
//var value1 = data.fxs1,value2=data.fxs2,value3 = data.fxs3,value4=data.fxs4,value5=data.fxs5

option = {
    graphic: [
        {
            type: 'image', // 图形元素类型
            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
            left: '0', // 根据父元素进行定位 （居中）
            top: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
            z: 0,  // 层叠
            bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
            style: {
                image: 'https://t7.baidu.com/it/u=3673393794,3821784015&fm=193&f=GIF',
                width: 1350,//背景图宽度
                height:810  //背景图高度
            }
        }
    ],
    //backgroundColor: '#36467E',
    title: [
      {
        text: value1,//红色数量图数量定义
        left: '11.5%',
        top: '62%',
        textStyle: {
            color: '#fff',
            fontSize: 32,
            fontWeight: 'bold',
        }
    }, {
        text: '红色数量',//红色数量图分类定义
        left: '7.5%',
        top: '80%',
        textStyle: {
            color: '#fff',
            fontSize: 28,
            align:"center"
        }
    },
      {
        text: value2,//橙色数量图数量定义
        left: '36%',
        top: '62%',
        textStyle: {
            color: '#fff',
            fontSize: 32,
            fontWeight: 'bold',
        }
    }, {
        text: '橙色数量',//橙色数量图分类定义
        left: '32.5%',
        top: '80%',
        textStyle: {
            color: '#fff',
            fontSize: 28
        }
    },
    {
        text: value3,//蓝色数量图数量定义
        left: '61.5%',
        top: '62%',
        textStyle: {
            color: '#fff',
            fontSize: 32,
            fontWeight: 'bold',
        }
    }, {
        text: '蓝色数量',//蓝色数量图分类定义
        left: '58%',
        top: '80%',
        textStyle: {
            color: '#fff',
            fontSize: 28
        }
    },
      {
        text: value4,//青色数量图数量定义
        left: '86.5%',
        top: '62%',
        textStyle: {
            color: '#f',
            fontSize: 32,
            fontWeight: 'bold',
        }
    }, {
        text: '青色数量',//青色数量图分类定义
        left: '83%',
        top: '80%',
        textStyle: {
            color: '#fff',
            fontSize: 28
        }
    },
          {
        text: value5,//总数数量定义
        left: '70%',
        top: '15%',
        textStyle: {
            color: '#fff',
            fontSize: 48,
            fontWeight: 'bold',
        }
    }, {
        text: '颜色总数',//总数分类定义
        left: '15%',
        top: '15%',
        textStyle: {
            color: '#fff',
            fontSize: 36
        },
    },
    ],
    series:[
                  {
                name: '上层进度变色-红色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['12.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 50,
                    name: '',
                    itemStyle: {
        "color": {
          "x": 1,
      "y": 0.2113248654051872,
      "x2": 0,
      "y2": 0.7886751345948129,
          "type": "linear",
          "global": false,
          "colorStops": [{
              "offset": 1,
              "color": "rgba(199, 29, 30, 0.9)"
      }, 
      {
          offset: 0,
          color: "rgba(235, 93, 29, 0.9)",
          borderWidth: 0
      }]
      }
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:5  
            },
            {
                name: '背景框-红色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['12.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
        color: 'rgba(249, 209, 210, 0.9)',
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:0  
            },
    {
                name: '外边框-红色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['12.5%', '65%'],
                radius: ['37%', '37%'],
                startAngle: 220,
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#c71d1e',
                            color: 'transparent'
                        }
                    },
                  z:2  
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
                z:0
            },
    {
                name: '上层进度变色-橙色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['37.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 50,
                    name: '',
                    itemStyle: {
        "color": {
          "x": 1,
      "y": 0.2113248654051872,
      "x2": 0,
      "y2": 0.7886751345948129,
          "type": "linear",//线性渐变
          "global": false,
          "colorStops": [{
              "offset": 1,
              "color": "rgba(225, 123, 18, 0.9)"
      }, 
      {
          offset: 0,
          color: "rgba(248, 202, 146, 0.9)",
          borderWidth: 0
      }]
      }
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:5  
            },
            {
                name: '背景框-橙色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['37.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
        color: 'rgba(252, 232, 200, 0.9)',
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:0  
            },
    {
                name: '外边框-橙色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['37.5%', '65%'],
                radius: ['37%', '37%'],
                startAngle: 220,
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ebb058',
                            color: 'transparent'
                        }
                    },
                  z:2  
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
                z:0
            },
            {
                name: '上层进度变色-蓝色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['62.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 50,
                    name: '',
                    itemStyle: {
        "color": {
          "x": 1,
      "y": 0.2113248654051872,
      "x2": 0,
      "y2": 0.7886751345948129,
          "type": "linear",//线性渐变
          "global": false,
          "colorStops": [{
              "offset": 1,
              "color": "rgba(0, 122, 215, 0.9)"
      }, 
      {
          offset: 0,
          color: "rgba(20, 202, 227, 0.9)",
          borderWidth: 0
      }]
      }
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:5  
            },
            {
                name: '背景框-蓝色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['62.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
        color: 'rgba(181, 252, 255, 0.9)',
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:0  
            },
    {
                name: '外边框-蓝色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['62.5%', '65%'],
                radius: ['37%', '37%'],
                startAngle: 220,
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#14b2ef',
                            color: 'transparent'
                        }
                    },
                  z:2  
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
                z:0
            },
    {
                name: '上层进度变色-青色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['87.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 50,
                    name: '',
                    itemStyle: {
        "color": {
          "x": 1,
      "y": 0.2113248654051872,
      "x2": 0,
      "y2": 0.7886751345948129,
          "type": "linear",//线性渐变
          "global": false,
          "colorStops": [{
              "offset": 1,
              "color": "rgba(2, 173, 147, 0.9)"
      }, 
      {
          offset: 0,
          color: "rgba(85, 240, 216, 0.9)",
          borderWidth: 0
      }]
      }
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:5  
            },
            {
                name: '背景框-青色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['87.5%', '65%'],
                radius: ['25%', '35%'],
                startAngle: 220,
                labelLine: {
            normal: {
                show:false
            }
        },
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
        color: 'rgba(190, 211, 250, 0.9)',
    },
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
              z:0  
            },
    {
                name: '外边框-青色数量',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['87.5%', '65%'],
                radius: ['37%', '37%'],
                startAngle: 220,
                data: [{
                    value: 100,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#00e8bc',
                            color: 'transparent'
                        }
                    },
                  z:2  
                },
                {
                    name: '',
                    value: 38,
                    itemStyle: {
                        color: 'transparent'
                    }
                }],
                z:0
            },
    ]
}

最终生成效果图

代码007普通

打赏 收藏 海报 链接