备选折线+柱状图2echarts 柱状配置项内容和展示

配置项如下
      option = {
    legend: {
      data: ['折线图', '柱状图'],
      x: '200px', // 对齐方式
      itemGap: 200, // item之间的距离
    },
    xAxis: {
        type: 'category',
        data: ['2013', '2014', '2015', '2016', '2017', '2018'],
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        max: 180,
        axisLabel: {
          showMaxLabel: false  
        },
        splitLine: {
            show: false
        }
    },
    series: [
        {
            data: [80, 120, 100, 122, 120, 140],
            type: 'bar',
            name: '柱状图',
            barWidth: 30,
            itemStyle: {
                normal: {
                    barBorderRadius: 15,
                    color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FFFC00'
                      },
                      {
                        offset: 1,
                        color: '#08E4DE'
                      }
                    ])
                }
            }
        },
        { // 背景色
          type: 'pictorialBar',
          stack: '总量',
          symbol: 'fixed',
          symbolSize: [28, 3],
          symbolMargin: 2,
          symbolRepeat: 'repeat',
          symbolBoundingData: 300,
          z: -10,
          data: [100, 140, 116, 136, 132, 152],
          itemStyle: {
              normal: {
                  color: '#007d87'
              }
          }
        },
        { // 替代颜色
          type: 'pictorialBar',
          symbol: 'fixed',
          stack: '总量',
          symbolSize: [28, 3],
          symbolMargin: 2,
          symbolRepeat: 'repeat',
          barCategoryGap: '40%',
          z: -1,
          data: [6, 6, 6, 6, 6, 6],
          itemStyle:{
              normal: {
                  barBorderRadius: [10, 20, 30 ,40],
                  color: 'orange'
              }
          }
        },
        {
            data: [111, 151, 127, 147, 143, 165],
            type: 'line',
            smooth: true,
            name: '折线图',
            symbolSize: 20, // 控制线条上 点 的大小
            lineStyle: {
                color: '#EBE806'
            }
        }
    ]
};

    
截图如下