echarts 波浪柱状图

ECharts 是百度开源的一个基于 JavaScript 的可视化图表库，支持多种图表类型。如果要实现波浪柱状图，可以使用 ECharts 的水波纹图和柱状图结合的方式。具体实现步骤如下：

1. 配置水波纹图

使用 ECharts 的水波纹图可以实现波浪效果。具体配置如下：

option = {
  series: [{
    type: 'liquidFill',
    data: [0.6], // 水波纹的填充值
    radius: '70%', // 水波纹的半径
    label: {
      normal: {
        formatter: '{a|{c}}%',
        rich: {
          a: {
            fontSize: 36,
            color: '#fff',
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          }
        },
        position: ['50%', '45%']
      }
    },
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#0080ff'
        }, {
          offset: 1,
          color: '#00ffff'
        }]),
        opacity: 0.8
      }
    },
    backgroundStyle: {
      borderWidth: 5,
      borderColor: '#0080ff',
      color: '#fff'
    }
  }]
};

2. 配置柱状图

使用 ECharts 的柱状图可以实现柱状图效果。具体配置如下：

option = {
  series: [{
    type: 'bar',
    data: [0.5], // 柱状图的填充值
    barWidth: 20, // 柱状图的宽度
    barGap: '-100%', // 柱状图的间距
    itemStyle: {
      normal: {
        color: '#fff',
        opacity: 0.5
      }
    }
  }]
};

3. 结合水波纹图和柱状图

将水波纹图和柱状图结合起来，就可以实现波浪柱状图了。具体配置如下：

option = {
  series: [{
    type: 'liquidFill',
    data: [0.6],
    radius: '70%',
    label: {
      // 省略
    },
    itemStyle: {
      // 省略
    },
    backgroundStyle: {
      // 省略
    },
    // 结合柱状图
    graphic: [{
      type: 'group',
      left: 'center',
      bottom: 10,
      children: [{
        type: 'rect',
        z: 100,
        left: 'center',
        top: 'middle',
        shape: {
          width: 20,
          height: 90
        },
        style: {
          fill: '#fff'
        }
      }, {
        type: 'bar',
        z: 50,
        data: [0.5],
        barWidth: 20,
        barGap: '-100%',
        itemStyle: {
          normal: {
            color: '#fff',
            opacity: 0.5
          }
        }
      }]
    }]
  }]
};

最终效果就是一个波浪柱状图。