双轴图1echarts 柱状配置项内容和展示

      option = {
                    backgroundColor: '#fff',
                    tooltip: {
                         show:true,
                         trigger: 'item',
                         backgroundColor: 'rgba(0,0,0,0.5)',
                         axisPointer: {
                              lineStyle: {
                                   color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                             offset: 0,
                                             color: '#A7D6FF'
                                        }, {
                                             offset: 0.5,
                                             color: '#fff',
                                        }, {
                                             offset: 1,
                                             color: '#A7D6FF'
                                        }],
                                        global: false
                                   }
                              },
                         }
                    },
                    legend: {
                          data: ['参与演练人数', '部门总人数 ', '参与率'],
                    left: '0%',
                    top:'0%',
                    bottom:'2%',
                    textStyle: {
                        color: "#666666",
                        fontSize:14,
                    },
                    itemWidth: 15,
                    itemHeight: 10,
                    itemGap: 25
                    },
                    grid: {
                         top: '10%',
                         left: '3%',
                         right: '5%',
                         bottom: '12%',
                    },
                    xAxis: [
                         {
                              type: 'category',
                              data: ['产品部', '技术部', '销售部', '人事部', '售前部', '售后部', '市场部', '平台部', '测试部', '运维部' ] ,
                              axisTick: {
                                   show: false // 是否显示坐标轴轴线
                              },
                              axisLabel: {
                                   color: '#282828',
                                   fontSize:14,
                              },
                              splitLine: {
                                   show: false
                              },
                              boundaryGap: true,
                              axisLine: { //坐标轴轴线相关设置。
                                   show: true,
                                   inside: false,
                                   lineStyle: {
                                        color: '#000'
                                   }
                              }
                         },
                    ],

                    yAxis: [
                     {
                         type: 'value',
                         min: 0,
                         splitNumber: 4,
                         splitLine: {show: true},
                         axisLabel: { //坐标轴刻度标签的相关设置。
                              show: true,
                              textStyle: {
                                    color: '#737373',
                                    fontSize:14,
                              }
                         },
                         axisLine: {
                              show: true,
                         },
                         axisTick: {
                              show: false,
                         },
                         splitLine: {
                              lineStyle: {
                                   color: 'rgba(131,101,101,0.2)',
                                   type: 'dashed',
                              }
                         },
                         show: true,
                    },
                    {
                        type: "value",
                        name: "百分比",
                        nameTextStyle: {
                            color: "#666666"
                        },
                        position: "right",
                        axisLine: {
                            lineStyle: {
                                color: '#cdd5e2'
                            }
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            formatter: "{value} %", //右侧Y轴文字显示
                            textStyle: {
                                color: "#666666",
                                 fontSize:14,
                            }
                        }
                    }
                    ],
                      dataZoom: [
    {
        show: true,
        realtime: true,
        "height": 12,
        start: 0,
        end: 70,
         bottom:'2%',
    },
    {
        type: 'inside',
        realtime: true,
        "height": 12,
        start: 0,
        end: 70
    }
],
                    series: [
                         {
                           name: '参与演练人数',
                              type: 'bar',
                              barMaxWidth: 20,
                              zlevel: 10,
                              // barGap: '100%',
                              data: [40, 59, 50,40, 19, 50,40, 79, 50,40, 23, 50],
                              itemStyle: {
                                   normal: {
                                        color: {
                                             type: 'linear',
                                             x: 0,
                                             y: 0,
                                             x2: 0,
                                             y2: 1,
                                             colorStops: [{
                                                  offset: 0,
                                                  color: '#4F93FE' 
                                             }, {
                                                  offset: 1,
                                                  color: '#A7D6FF' 
                                             }]
                                        },
                                        barBorderRadius: [30, 30, 0, 0],
                                   }
                              },
                         },
                         {
                           name: '部门总人数',
                              type: 'bar',
                              itemStyle: {
                                   normal: {
                                        color: '#E9E9E9',
                                   }
                              },
                              silent: true,
                              barWidth: 30,
                               barGap: '-125%',
                              data: [120, 80, 60,60, 23,  80, 80,80, 100, 100,70, 40, 60]
                         },
                         {
                        name: "参与率",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        smooth: false, //平滑曲线显示
                        symbol: "circle", //标记的图形为实心圆
                        symbolSize: 8, //标记的大小
                        itemStyle: {
                            normal: {
                                color: '#ffa43a',
                                borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
                                borderWidth: 7
                            },

                        },
                        lineStyle: {
                            color: "#ffa43a"
                        },

                        data: [34, 73, 83, 67, 63, 50, 79,100,50,58,58,84]
                    }
                    ]
               };