双柱图echarts pictorialBar配置项内容和展示

      

        var myData = ['党委办公室', '党委办公室1', '党委办公室2', '党委办公室3', '党委办公室4', '党委办公室5', '党委办公室6', '党委办公室7', '党委办公室8']//中间各数据 类似柱图的x轴文字 

        var legendData=['举行活动次数','参与部门', '部门内参与人数']//顶部三个标题

        var leftData = [23, 20, 62, 34, 55, 65, 33,61,50]//举行活动次数 数据
        var rightData =  [121, 138, 123, 139, 166, 166, 179,148,65]//部门内参与人数 数据

        var areaColor='rgba(11,45,134,0.5)'//中间部门文字背景块
        var areaText={//中间部门文字颜色字体大小
            color:'#fff',
            fontSize:16
        }
        var leftColors=['#fba61b',"#eebb45", 'rgba(158,254,26,0)']//左边柱状图渐变颜色
        var rightColors=['rgba(12,221,211,0)',"#3aefd9", '#3aefd9']//右边柱状图渐变颜色
        var lineColor='#2f6392' //中间两轴线颜色

        var barWidth=20//柱状图宽度
        var barText={
            color:'#ffffff',
            fontSize:16
        }

        var background = "#0e2147" //整个页面背景

        var legendText={//顶部三个标题
            color:'#0bbaca',
            fontSize:20
        }

        var option = {
            baseOption: {
                backgroundColor: background,
                timeline: {
                    show: false,
                    top: 0,
                    data: []
                },
                legend: {
                    top: '5%',
                    bottom:'5%',
                    itemWidth: 12,
                    itemHeight: 22,
                    itemGap: 90,
                    icon: 'none',
                    textStyle: {
                        color:legendText.color,//'#0bbaca',
                        fontSize:legendText.fontSize// 20,
                    },
                    data: legendData,
                    selectedMode:false
                },
                grid: [{
                    show: false,
                    left: '5%',
                    top: '10%',
                    bottom: '8%',
                    containLabel: true,
                    width: '37%',
                }, {
                    show: false,
                    left: '50%',
                    top: '10%',
                    bottom: '8%',
                    width: '20%',
                }, {
                    show: false,
                    right: '5%',
                    top: '10%',
                    bottom: '8%',
                    containLabel: true,
                    width: '37%'
                }],
                xAxis: [{
                    type: 'value',
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    position: 'bottom',
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                }, {
                    gridIndex: 1,
                    show: false,
                }, {
                    gridIndex: 2,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    position: 'bottom',
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false
                    }
                }],
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    position: 'right',
                    axisLine: {
                        show: true,
                        lineStyle:{
                            width:2,
                            color:lineColor
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: myData
                },
                 {
                    gridIndex: 1,
                    type: 'category',
                    inverse: true,
                    inside:true,
                    position: 'left',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        margin:0,
                        textStyle: {
                            color: areaText.color,
                            fontSize:areaText.fontSize,
                            align:'center'
                        },
                        align:'right',
                        lineHeight:50,
                        width:window.innerWidth*0.16,
                        height:(window.innerHeight*0.8)/(myData.length),
                    },
                    data: myData.map(function (value,index) {
                        return {
                            value: value,
                            textStyle: {
                                align: 'center',
                                backgroundColor:index%2==0?areaColor:''
                            }
                        }
                    })
                }, 
                {   gridIndex:2,
                    type: 'category',
                    inverse: true,
                    position: 'left',
                    axisLine: {
                        show: true,
                        lineStyle:{
                            width:2,
                            color:lineColor//'#2f6392'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: myData
                },
            ],
                series: []

            },
            options: []
        }
        option.options.push({
            series: [
                {
                    name:legendData[1],
                    type: 'pictorialBar',
                    data:[],
                    xAxisIndex:1,
                    yAxisIndex:1,
                },
                {
                    name: legendData[0],
                    type: 'bar',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    //  symbol: 'rect',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        // color: "#f7cd6f" // 0% 处的颜色
                                        color:leftColors[0]
                                    }, {
                                        offset: 0.4,
                                        color: leftColors[1] // 60% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: leftColors[2],// 100% 处的颜色
                                    }
                                    ])
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            textStyle: {
                                color: barText.color,
                                fontSize: barText.fontSize
                            }
                        }
                    },
                    data: leftData,
                }, {
                    name:legendData[2],
                    type: 'bar',
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    //   symbol: 'rect',
                    barWidth:barWidth,
                    itemStyle: {
                        normal: {
                            // barBorderRadius: 5,
                            color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        // color: "#f7cd6f" // 0% 处的颜色
                                        color:rightColors[0]
                                    }, {
                                        offset: 0.6,
                                        color:rightColors[1]// 60% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: rightColors[2] ,// 100% 处的颜色
                                    }
                                    ])
                            }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color:barText.color,
                                fontSize:barText.fontSize
                            }
                        }
                    },
                    data: rightData,
                }
            ]
        });