柱状图- 双y轴（渐变）echarts 柱状配置项内容和展示

      option = {
        xAxis: {
          type: 'category',
          data: ['桥梁1梁1梁1标', '梁1桥梁2标', '梁1桥梁3标', '桥梁4标'],
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: 'rgba(0,0,0,0.75)', // X轴文字颜色
              padding: [0, 0, 0, 0],
              fontSize: 12
            }
          }
        }, 
        
        legend: {
         textStyle:{
           color: 'rgba(0,0,0,0.75)'
         },
          data:[
            {
              name: '合同金额',
              itemStyle: {
                color: '#1F94D4' ,
                borderWidth: 10
              }
            },
            {
              name: '累计完成',
              itemStyle: {
                color: '#43D5A0' ,
              }
            },
            {
              name: '完成百分比',
              itemStyle: {
                color: '#E6BB56' ,
              }
            }
          ]
        },
        // grid: {
        //   // containLabel: true,
        //   // // 显示数据的图表位于当前canvas的坐标轴
        //   // top: 30,
        //   // bottom: 40,
        //   // left: 50,
        //   // right: 50
        // },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (params) {
            console.log(params, params.data)
            return (
              '<div><span style="color: #333;font-size: 14px; font-weight: 600;margin-right: 10px">合同金额: </span><span style="color: #5396b9;float: right;">' +
              params.data.total +
              '万元</span><br/>' +
              '<span style="color: #333;font-size: 14px; font-weight: 600;margin-right: 10px">累计完成: </span><span style="color: #5396b9;float: right;">' +
              params.data.completes +
              '万元</span><br/>' +
              '<span style="color: #333;font-size: 14px; font-weight: 600;margin-right: 10px">完成率: </span><span style="color: #5396b9;float: right;">' +
              params.data.percentage +
              '%</span><br/>' +
              '</div>'
            )
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '(万元)',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.40)',
              padding: [0, 0, 0, -25] // 四个数字分别为上右下左与原位置距离
            },
            splitLine: {
              // show: false // 不显示网格线
              lineStyle: {
                type: 'dashed',
                color: '#344a53'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: 'pink'
            }
          },
          {
            type: 'value',
            min: 0,
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value} %'
            },
            splitLine: {
              show: false // 不显示网格线
            },
            axisTick: {
              show: false // 不显示坐标轴刻度线
            }
          }
        ],
        series: [
          {
            name: '合同金额',
             barGap: '50px',
            // data: [120, 150, 80, 50, 70, 90, 120],
            data: [
              {
                value: 1000,
                total: 1000,
                completes: 500,
                percentage: 50
              },
              {
                value: 800,
                total: 800,
                completes: 200,
                percentage: 25
              },
              {
                value: 1000,
                total: 1000,
                completes: 300,
                percentage: 30
              },
              {
                value: 1000,
                total: 1000,
                completes: 600,
                percentage: 60
              },
              {
                value: 1000,
                total: 1000,
                completes: 700,
                percentage: 70
              }
            ],
            type: 'bar',
            yAxisIndex: 0,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#1F94D4' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,148,212,.5)' // 100% 处的颜色
                  }
                ],
                false
              )
            }
          },
          {
            name: '累计完成',
            barGap: '50px',
            data: [
              {
                value: 500,
                total: 1000,
                completes: 500,
                percentage: 50
              },
              {
                value: 200,
                total: 800,
                completes: 200,
                percentage: 25
              },
              {
                value: 300,
                total: 1000,
                completes: 300,
                percentage: 30
              },
              {
                value: 600,
                total: 1000,
                completes: 600,
                percentage: 60
              },
              {
                value: 700,
                total: 1000,
                completes: 700,
                percentage: 70
              }
            ],
            type: 'bar',
            yAxisIndex: 0,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#43D5A0' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(67,213,160.5)' // 100% 处的颜色
                  }
                ],
                false
              )
            }
          },
          {
            name: '完成百分比',
            barGap: '0px',
            data: [
              {
                value: 50,
                total: 1000,
                completes: 500,
                percentage: 50
              },
              {
                value: 25,
                total: 800,
                completes: 200,
                percentage: 25
              },
              {
                value: 30,
                total: 1000,
                completes: 300,
                percentage: 30
              },
              {
                value: 60,
                total: 1000,
                completes: 600,
                percentage: 60
              },
              {
                value: 70,
                total: 1000,
                completes: 700,
                percentage: 70
              }
            ],
            type: 'bar',
            yAxisIndex: 1,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#E6BB56' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(230,187,86,.5)' // 100% 处的颜色
                  }
                ],
                false
              )
            }
          }
        ]
      }