柱状图

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

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，更新数据值，显示下一个时间点对应的柱条排序

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。