柱状图

柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$zhu = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      window.addEventListener("resize", () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        });
      });
      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

常用属性

柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。除了一些通用属性外，他也有一些属于柱状图的属性

const option = {
  legend: {
    data: ["1月销量", "2月销量", "增长趋势"],
  },
  xAxis: {
    // type: 'value'
    type: "category", // x轴和y轴的数据交换一下，柱状图就会横过来
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    // type: 'category',
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    type: "value", // x轴和y轴的数据交换一下，柱状图就会横过来
  },
  series: [
    {
      name: "1月销量",
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: "#a90000",
          },
        },
        150,
        80,
        70,
        110,
        130,
      ],
      type: "bar",
      colorBy: "data", // 可取 series，data,设置柱的颜色样式
      realtimeSort: true, // 排序
      showBackground: true, // 灰色的背景色
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)",
      },
    },
    // 第二个柱状图
    {
      name: "2月销量",
      data: [140, 100, 110, 150, 230, 200, 40],
      type: "bar",
    },
    // 额外增加折线图
    {
      name: "增长趋势",
      data: [190, 280, 230, 150, 130, 300, 220],
      type: "line",
    },
  ],
};

堆叠柱状图

有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化

使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组

var option = {
  xAxis: {
    type: "category",
    data: ["A", "B", "C", "D", "E"],
  },
  yAxis: {
    type: "value",
  },
  legend: {
    data: ["柱1", "柱2"],
  },
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: "bar",
      name: "柱1",
      stack: "x",
    },
    {
      data: [5, 4, 3, 5, 10],
      type: "bar",
      name: "柱2",
      stack: "x",
    },
  ],
};

动态排序柱状图

动态排序柱状图是一种展示随时间变化的数据排名变化的图表

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$zhu = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      window.addEventListener("resize", () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        });
      });
      var data = [];
      for (let i = 0; i < 5; i++) {
        data.push(Math.round(Math.random() * 200));
      }
      var option = {
        xAxis: {
          max: "dataMax", // 表示用数据的最大值作为 X 轴最大值，
        },
        yAxis: {
          type: "category",
          data: ["中国", "美国", "印度", "古巴", "加拿大"],
          inverse: true, // 表示 Y 轴从下往上是从小到大的排列
          animationDuration: 300, // 动画执行周期
          animationDurationUpdate: 300, // 动画执行时长
          max: 4, // 设为 数据量 - 1
        },
        series: [
          {
            realtimeSort: true, //表示开启该系列的动态排序效果
            name: "经济实力",
            type: "bar",
            data: data,
            label: {
              // 图形上的文本标签（比如柱状图每个柱的数量值）
              show: true,
              position: "right",
              valueAnimation: true, // 数据实时改变
            },
          },
        ],
        // 添加动画
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: "linear", // 动画曲线
        animationEasingUpdate: "linear",
      };
      // 改变数据
      function update() {
        var data = option.series[0].data;
        for (var i = 0; i < data.length; i++) {
          data[i] += Math.round(Math.random() * 2000);
        }
        myChart.setOption(option as any);
      }
      setInterval(function () {
        update();
      }, 3000);
      myChart.setOption(option as any);
    };
  },
};

要点解析

• 柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
• yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
• yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
• yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
• 如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
• xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
• 如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
• animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
• animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
• 以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序