echarts条纹柱状图

要制作条纹柱状图，可以使用ECharts的渐变色功能。具体步骤如下：

1. 定义渐变色

var colorList = [
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'red'
  }, {
    offset: 1,
    color: 'white'
  }]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'blue'
  }, {
    offset: 1,
    color: 'white'
  }])
];

这里定义了两个渐变色，一个是红色到白色的渐变，另一个是蓝色到白色的渐变。

2. 配置条形图

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    axisLabel: {
      inside: true,
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#999'
      }
    }
  },
  series: [{
    type: 'bar',
    barWidth: 20,
    itemStyle: {
      normal: {
        barBorderRadius: 20,
        color: function(params) {
          var index = params.dataIndex % colorList.length;
          return colorList[index]
        }
      }
    },
    data: [30, 40, 50, 60, 70, 80, 90]
  }]
};

这里设置了x轴和y轴的样式，然后配置了系列中的条形图。注意，这里的颜色是从渐变色中取的，可以通过dataIndex来确定使用哪个渐变色。

3. 渲染图表

最后，将配置好的option传入echarts实例中进行渲染。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

这样就完成了条纹柱状图的制作。完整的代码可以参考下面的示例：

var colorList = [
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'red'
  }, {
    offset: 1,
    color: 'white'
  }]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'blue'
  }, {
    offset: 1,
    color: 'white'
  }])
];

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    axisLabel: {
      inside: true,
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#999'
      }
    }
  },
  series: [{
    type: 'bar',
    barWidth: 20,
    itemStyle: {
      normal: {
        barBorderRadius: 20,
        color: function(params) {
          var index = params.dataIndex % colorList.length;
          return colorList[index]
        }
      }
    },
    data: [30, 40, 50, 60, 70, 80, 90]
  }]
};

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);