0.前言

在数据可视化中，柱状图是最常用的图表类型之一。

本篇文章我将会带大家深入了解 Echarts 中柱状图的核心知识点和关键属性配置。

1.核心配置

Echarts 的使用流程很简单，其实就两步：

• 获取 DOM 元素
• 配置 option

所以核心就是通过配置 option 来实现各种图表样式。

本篇文章我们将会在 Vue 项目中使用 vue-echarts 组件库来配置柱状图。

option 的配置主要包含以下几项：

• title：标题组件
• tooltip：提示框组件，控制鼠标悬浮展示信息样式
• legend：可以通过点击图例控制哪些系列不显示
• xAxis：x轴，通常展示类目
• yAxis：y轴，数值轴
• series：要展示的数据

1.1 title

title 主要用来设置标题样式

title: {
text: "知否技术文章阅读统计", // 标题文本
  top: "5", // 距离顶部距离，默认auto，可以是20这样的像素值，也可以是 10% 百分比，也可以是 top 、middle、bottom
  left: "center", // 距离左边距离，跟 top 一样，这里为居中
  textStyle: {
    // 标题样式
    fontStyle: "normal", // 字体样式，默认是 normal ,也可以是斜体 'italic'
    fontWeight: "bolder", // 字体粗细，normal、bold、bolder、100、200
    fontSize: "15", // 字体样式
  },
link: "https://www.baidu.com", // 标题链接
target: "self", //指定窗口打开主标题超链接,self 是当前窗口，blank 是新窗口
},

1.2 tooltip

tooltip 主要用来设置提示框的样式

tooltip: {
trigger: "axis", // 触发类型，axis 表示在坐标轴触发，item 表示数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
  // 坐标轴指示器配置项。
  type: "cross", // line 直线指示器，shadow阴影指示器，cross十字准星指示器，none 无指示器
  },
},

trigger ：axis

trigger ：item

axisPointer - type - cross 十字准星

axisPointer - type - shadow 阴影

1.3 legend

图例组件，以通过点击图例控制哪些系列不显示。

 legend: {
    top: "30", // 距离顶部距离
    data: [{ name: "Vue" }, { name: "CSS" }], // 图表
    itemStyle: { color: "red" }, // 图表样式，color 表示统一设置样式
    textStyle: {
      fontSize: 12, // 文字大小
    },
  },

注意：

1.data 里面的 name 必须要和 series 中数据的 name 数量一致、名称一致，英文区分大小写。

2.如果不设置 itemStyle 中的颜色，图标默认跟对应柱状图的颜色一致。

3.我们也可以在 legend 的 data 里面自定义图标的颜色：

4.如果不配置 data，会自动从 series 中取。

1.4 xAxis

xAxis 主要用来配置 x 轴属性。

xAxis: {
  type: "category", // category 类目轴，适用于离散的类目数据。value数值轴，适用于连续数据。
  data: ["4月", "5月", "6月", "7月"], // 类目数据
  axisLabel: { // 坐标轴刻度标签的相关设置。
    rotate: 45, // 旋转45度
    fontSize: 18, // 类目文字大小
    fontWeight: "bold", // 类目文字加粗
  },
},

1.5 yAxis

yAxis 主用用来设置 y 轴属性。

yAxis: {
    type: "value", // 默认 y轴 展示数值
    name: "阅读量/次", // 坐标轴名称
    min: 200, // 最小值
    max: 1000, // 最大值
  },

当然我们也可以设置多个 y轴，例如：

yAxis: [
    {
      type: "value", // 默认 y轴 展示数值
      name: "阅读量/次", // 坐标轴名称
      min: 200, // 最小值
      max: 1000, // 最大值
    },
    {
      type: "value",
      name: "增长率（%）",
      axisLabel: { formatter: "{value}%" }, // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
      position: "right", // 位置，默认第一个在左边，第二个在右边
      min: 0, // 最小值
      max: 100, // 最大值
    },
  ],

1.6 series

series 是要展示的数据

series: [
    {
      name: "Vue", // 系列名称，用于tooltip的显示，legend 的图例筛选，
      type: "bar", // bar 表示柱状图，pie 是饼图，line 是折线图
      data: [300, 600, 700, 800], // 数据
      itemStyle: {
        // 图形样式
        color: "orange", // 图形颜色
      },
    },
    {
      name: "CSS",
      type: "bar",
      data: [360, 320, 580, 960],
      itemStyle: {
        // 图形样式
        color: "red",
      },
    },
  ],

当然我们也可以设置折线图的数据，后续会详细讲解折线图的使用。

 series: [
    {
      name: "Vue", // 系列名称，用于tooltip的显示，legend 的图例筛选，
      type: "bar", // bar 表示柱状图，pie 是饼图，line 是折线图
      data: [300, 600, 700, 800], // 数据
      itemStyle: {
        // 图形样式
        color: "orange", // 图形颜色
      },
    },
    {
      name: "CSS",
      type: "bar",
      data: [360, 320, 580, 960],
      itemStyle: {
        // 图形样式
        color: "red",
      },
    },
    {
      name: "增长率",
      type: "line",
      data: [11, 34, 54, 78],
      yAxisIndex: 1,
      label: {
        position: "top",
      },
      itemStyle: {
        // 图形样式
        color: "blue",
      },
      lineStyle: { color: "green" },
    },
  ],

有时候我们希望数据能够堆叠起来，比如：

只需要配置 stack 属性即可，同个类目轴上系列配置相同的 stack 值可以堆叠放置。

  series: [
    {
      name: "Vue",
      type: "bar",
      data: [300, 600, 700, 800],
      stack: "vue",
    },
    {
      name: "hooks",
      type: "bar",
      data: [10, 18, 30, 70],
      stack: "vue",
    },
    {
      name: "组件传值",
      type: "bar",
      data: [23, 68, 78, 25],
      stack: "vue",
    },
    {
      name: "CSS",
      type: "bar",
      data: [360, 320, 580, 560],
      stack: "css",
    },
    {
      name: "浮动",
      type: "bar",
      data: [88, 99, 100, 113],
      stack: "css",
    },
  ],

2.建议

这里强烈建议大家自行去 Echarts 官网查找学习，官网更全、更详细。

https://echarts.apache.org/zh/option.html#title