echarts胶囊柱状图

echarts中的胶囊柱状图是一种特殊的柱状图，它的柱子是由两个半圆柱体拼接而成，看起来像一个胶囊。这种图表通常用于展示两个数据之间的对比情况，例如展示两个时间段内的销售额对比情况等。

在echarts中，可以通过设置series中的type为'pictorialBar'来创建胶囊柱状图。同时，还需要设置symbol为'roundRect'，并且设置symbolSize中的第一个值为柱子的宽度，第二个值为柱子的高度。

以下是一个简单的胶囊柱状图的示例代码：

option = {
    xAxis: {
        type: 'category',
        data: ['2019', '2020', '2021']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'pictorialBar',
        symbol: 'roundRect',
        symbolSize: [20, 10],
        data: [200, 300, 400]
    }]
};

相关问题

echarts横向胶囊柱状图

好的，关于echarts横向胶囊柱状图，你需要先准备好数据，然后使用echarts的option配置项进行设置。下面是一个简单的示例代码：

// 准备数据
var data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
  { name: 'D', value: 400 },
  { name: 'E', value: 500 }
];

// 设置option
var option = {
  xAxis: {
    type: 'value',
    show: false
  },
  yAxis: {
    type: 'category',
    data: data.map(item => item.name),
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      data: data.map(item => item.value),
      barWidth: 20,
      itemStyle: {
        color: '#1890ff'
      }
    },
    {
      type: 'bar',
      data: data.map(item => item.value),
      barWidth: 20,
      itemStyle: {
        color: '#f0f2f5'
      }
    }
  ]
};

// 渲染图表
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

以上代码中，我们使用了两个bar系列来实现横向胶囊柱状图的效果。其中第一个系列的颜色为蓝色，第二个系列的颜色为灰色，通过设置两个系列的barWidth来控制柱子的宽度，从而实现胶囊的效果。

echarts实现竖向胶囊柱状图

ECharts是一个强大的JavaScript图表库，可以创建各种复杂的可视化图表，包括竖向胶囊柱状图（也称为胶囊堆叠柱状图）。这种类型的柱状图通常用于显示不同类别之间的比较，其中每个胶囊代表一个数据系列，高度表示值的大小。

以下是使用ECharts实现竖向胶囊柱状图的基本步骤：

1. 首先，在HTML中引入ECharts库和相关的CSS样式文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.2.2/theme/white.css">

2. 创建一个div容器，并给它一个id，以便在JavaScript中引用：

<div id="chartContainer" style="width: 600px;height:400px;"></div>

3. 使用JavaScript初始化ECharts实例，并配置数据和选项：

var myChart = echarts.init(document.getElementById('chartContainer'));

// 数据配置，假设我们有两组数据
var data = [
  {name: 'A', value: [1, 2, 3]},
  {name: 'B', value: [4, 5, 6]}
];

// 柱状图配置
var option = {
  type: 'candlestick',
  // 设置x轴和y轴的数据源
  xAxis: {
    data: data.map(item => item.name)
  },
  yAxis: {},
  series: [
    {
      name: '胶囊柱状图',
      type: 'candlestick',
      data: data,
      // 胶囊效果的设置
      itemStyle: {
        normal: {
          color: 'green',
          lineStyle: {
            color: 'black'
          }
        },
        emphasis: {
          color: 'red'
        }
      }
    }
  ]
};

// 绘制图表
myChart.setOption(option);