Bar 柱状图

基本属性

TypeScript 类型提示

import type { EChartsOption } from 'echarts'

const option: EChartsOption = { ... }

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
    },
    // ... 可以添加更多系列
  ],
}

属性说明：

• xAxis/yAxis: 定义 x 轴和 y 轴的属性。
  • type: 轴的类型。
    • category 表示类目轴。
    • value 表示数值轴。
  • data: 类目轴 的数据。
• series: 定义图表的数据系列，这里设置为柱状图类型，并提供了对应的数据。

设置柱样式

常见设置

• itemStyle: 用于设置柱子的样式。

const option = {
  // ... 其他配置
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      itemStyle: {
        color: '#5470C6', // 柱子的颜色
        borderColor: '#000', // 柱子的边框颜色
        borderWidth: 2, // 柱子的边框宽度
        borderRadius: [5, 5, 0, 0], // 柱子的圆角
      },
    },
  ],
}

渐变设置

const option = {
  // ... 其他配置
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#83bff6' }, // 0% 处的颜色
            { offset: 1, color: '#188df0' }, // 100% 处的颜色
          ],
        },
      },
    },
  ],
}

hover 样式

• emphasis: 定义鼠标悬停时的样式。

const option = {
  // ... 其他配置
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      emphasis: {
        itemStyle: {
          color: '#FF5733', // hover 时的颜色
          borderColor: '#C70039', // hover 时的边框颜色
          borderWidth: 3, // hover 时的边框宽度
        },
      },
    },
  ],
}