双坐标轴柱状图echarts none配置项内容和展示

进度管理（柱状图渐变，双y轴,自定义legend、dataZoom）

      barOption={
          color: ['#00FFFF', '#7CFC00','#F08080', '#7CFC00',  '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          xAxis: ['便道', '湿喷桩', '管桩', '土方', '钻孔桩', '立柱', '盖梁', '预制箱梁', '现浇箱梁','桥面铺装','护栏'],
          seriesData:  {
            population: [100, 120, 160, 180, 140, 170, 50, 90, 120,150,140],
            thisWeek:  [30, 40, 40, 50, 60, 50, 20, 55, 60,30,40],
            notAccumulated: [36, 20, 45, 38, 46, 52, 30, 25, 10,10,20],
          }
        }
 option = { grid: {
          // 显示数据的图表位于当前canvas的坐标轴
        top: 30,
        bottom: 50
        },
        legend: {
          data: [
            {
              name: '总工程量',
              itemStyle: {
                color: '#7461D1',
              }
            },
            {
              name: '本周完成',
              itemStyle: {
                color: '#09E3EF '
              }
            },
            {
              name: '至本周末累计',
              itemStyle: {
                color: '#1B85BE '
              }
            }
          ],
          textStyle: {
            color: '#5789c6',
            fontSize: 14
          },
          itemWidth: 10,
          itemHeight: 10,
          left: 'center',
          top: 5
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: '{b}-{a}: {c}'
        },
        xAxis: [
          {
            type: 'category',
            data: barOption.xAxis,
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            // show: false // 不显示网格线
            lineStyle: {
              type: 'dashed',
              color: '#344a53'
            }
          },
        }, {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}%'
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          }
        }], 
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: [0],
            
zoomLock: true , minValueSpan:4,
maxValueSpan:5,
            left: '50',
            bottom: 0,
            height: 6,
            backgroundColor: 'rgba(255,255,255,.2)',
            start: 0,
            borderColor: 'none',
            end: 20,
            dataBackground: {
              lineStyle: {
                color: 'none'
              },
              areaStyle: {
                color: 'none'
              }
            },
            selectedDataBackground: {
              lineStyle: {
                color: 'none'
              },
              areaStyle: {
                color: 'none'
              }
            },
            borderWidth: 0,
            handleSize: '0px',
            fillerColor: '#09E3EF',
            moveHandleSize: 0,
            showDetail: false
          }
        ],
        series: [
          {
            name: '总工程量',
            data: barOption.seriesData.population,
            type: 'bar',
            barWidth: 12,
            yAxisIndex: 0,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#7461D1' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(116, 97, 209, 0.3)' // 100% 处的颜色
                  }
                ],
                false
              )
            },
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'none',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter: '{b}-{a}: {c}'
            },
          },
          {
            name: '本周完成',
            data: barOption.seriesData.thisWeek,
            type: 'bar',
            barWidth: 12,
            yAxisIndex: 0,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#09E3EF ' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(9, 227, 239, 0.3)' // 100% 处的颜色
                  }
                ],
                false
              )
            },
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'none',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter: '{b}-{a}: {c}'
            },
          },
          {
            name: '至本周末累计',
            data: barOption.seriesData.notAccumulated,
            type: 'bar',
            barWidth: 12,
            yAxisIndex: 1,
            itemStyle: {
              // 柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#1B85BE' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(27, 133, 190, 0.3)' // 100% 处的颜色
                  }
                ],
                false
              )
            },
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'none',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter: '{b}-{a}: {c}%'
            },
          },
        ]
      }