圆形柱状图echarts pictorialBar配置项内容和展示

圆形柱状图

      var lineColor = '#406A92';
var labelColor = '#fff';
var fontSize = '38';
var lineWidth = 3;
option = {
        backgroundColor:'#031845',
        grid: {
            left: '0%',
            right: '10%',
            top: '15%',
            bottom: '7%',
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle:{
                fontSize:fontSize
            }
        },
        legend: {
            show: true,
            x: 'center',
            y: '1%',
            itemWidth: 45,
            itemHeight: 18,
            textStyle: {
                color: '#fff',
                fontSize: fontSize
            },
        },
        xAxis: [
            {
                type: 'category',
                name: '',
                nameTextStyle: {
                    fontSize: fontSize,
                    color:labelColor,
                    lineHeight:90,
                },
                axisLabel: {
                    color: labelColor,
                    fontSize: fontSize,
                    margin:30,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor,
                        width: lineWidth
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#195384'
                    }
                },
                data: ['2017年','2018年','2019年']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                nameTextStyle: {
                    fontSize: fontSize,
                    color:labelColor
                },
                nameGap:30,
                axisLabel: {
                    show: false,
                    formatter: '{value}',
                    margin:20,
                    textStyle: {
                        color: labelColor,
                        fontSize: fontSize,

                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color:lineColor,
                        width: lineWidth
                    }
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ["rgba(128,160,176,.1)", "rgba(250,250,250,0)"]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor
                    }
                }
            }
        ],
        series: [
            {
                "name": "",
                type: 'pictorialBar',
                symbolSize: [50, 25],
                symbolOffset: [0, -10],
                symbolPosition: 'end',
                z: 12,
                tooltip:{
                    show:false
                },
                "label": {
                    "normal": {
                        "show": true,
                        "position": "top",
                        fontSize: fontSize,
                        color: '#fff'
                    }
                },
                color: "#26B2E8",
                data: [298, 300, 430]
            },
            {
                name: '',
                type: 'pictorialBar',
                tooltip:{
                    show:false
                },
                symbolSize: [70, 30],
                symbolOffset: [0, 15],
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#2EA9E5',
                        borderType: 'solid',
                        borderWidth: 3
                    }
                },
                data: [298, 300, 430]
            },
            {
                name: '',
                type: 'pictorialBar',
                tooltip:{
                    show:false
                },
                symbolSize: [90, 40],
                symbolOffset: [0, 20],
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#26B2E8',
                        borderType: 'solid',
                        borderWidth: 4
                    }
                },
                data: [298, 300, 430]
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [50, 25],
                tooltip:{
                    show:false
                },
                symbolOffset: [0, 10],
                z: 12,
                "color": "#26B2E8",
                "data": [298, 300, 430]
            },
            {
                type: 'bar',
                "barWidth": "50",
                barGap: '10%',
                barCateGoryGap: '10%',
                itemStyle: {
                    normal: {
                        color: '#26B2E8',
                        opacity: .8
                    },
                },
                data: [298, 300, 430]
            }
        ]
    };