echarts：柱状图的常用操作

背景

本文将带大家一步一步的熟悉柱状图相 API，关于如何初始化，可以看我这篇文章 echars：图表中核心的概念，本文只讲核心配置。

基础柱状图

这是一个最基础的柱状图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

接下来的示例都是以这个基础做改动

设置柱子的样式 series.itemStyle

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        // 柱子的背景颜色
        color: '#60D87E',
        // 柱子的 border-radius
        barBorderRadius: [15, 15, 0, 0],
      },
      // 设置柱子的默认宽度,可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度。
      barWidth: '50%',
      // 柱条最小高度，可用于防止某数据项的值过小而影响交互。
      barMinHeight: 30,
      // 设置柱子的最大宽度
      // barMaxWidth: 40,
    }
  ]
};

添加标签（柱子上的数字）series.label

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar',
      label: {
        // 显示标签
        show: true,
        // 标签位置，可以设置为 'inside'、'top'、'bottom' 等
        position: 'top',
        // 调整 offset 数值来控制标签的位置
        // offset: [0, 5],
        textStyle: {
          color: '#A9A9A9', // 设置文字颜色为白色
        },
        formatter: function (params) {
          // 判断值是否为 0，是则不显示标签
          return params.value !== 0 ? params.value : '';
        }
      },
    }
  ]
};

添加提示框（点击柱子的弹窗）tooltip

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
  },
  series: [
    {
      name: '柱状图1',
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar'
    }
  ]
};

添加图例 legend

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    // 垂直展示
    orient: 'vertical',
    // 距离右边10px
    right: 10,
    // 上下居中
    top: 'center',
  },
  series: [
    {
      // 一定要加上，否则出不来
      name: '柱状图1',
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar'
    },
    {
      name: '柱状图2',
      data: [120, 300, 150, 80, 70, 110, 50],
      type: 'bar'
    }
  ]
};

默认是放在上方居中位置的，我通过一些设置放在了右侧

滑动图表 dataZoom

图表的滑动包括两种，一种是有滚动条的，一种是手动滑动

手动滑动

const n = 100
// 生成数组 [0-n]
const xData = Array.from({ length: n + 1 }, (_, index) => `第${index}`)
const yData = Array.from({ length: n + 1 }, (_, index) => index)

option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 50
    }
  ],
  series: [
    {
      name: '柱状图1',
      data: yData,
      type: 'bar'
    }
  ]
};

鼠标向右滑动可以继续滑动直到第100。

start 和 end 是 dataZoom 组件中用于控制数据展示范围的两个参数：

• start 表示数据窗口的起始位置，取值范围为 0 到 100，表示百分比。例如，start: 0 表示数据窗口的起始位置是数据的开头，start: 50 表示数据窗口从数据的中间开始。
• end 表示数据窗口的结束位置，同样取值范围为 0 到 100。例如，end: 100 表示数据窗口的结束位置是数据的末尾，end: 80 表示数据窗口到数据的后面 20% 处结束。

滑动条

const n = 100
// 生成数组 [0-n]
const xData = Array.from({ length: n + 1 }, (_, index) => `第${index}`)
const yData = Array.from({ length: n + 1 }, (_, index) => index)

option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
  },
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 50
    }
  ],
  series: [
    {
      name: '柱状图1',
      data: yData,
      type: 'bar'
    }
  ]
};

扩展：左右滑动一页

子组件核心逻辑

properties = {
  // chartData: { xData: [], yData: [] }
  chartData: {
    type: Object,
    value: {},
    observer(newValue) {
      if (Object.keys(newValue).length > 0) {
        wx.nextTick(() => {
          this.initChart();
        });
      }
    },
  }
},
methods = {
  initChart() {
    let mousedownX = 0;
    echartsComponnet = this.selectComponent('#wx-chart');
    echartsComponnet.init((canvas, width, height, dpr) => {
      // 初始化图表
      const chart = echarts.init(canvas, undefined, {
        width,
        height,
        devicePixelRatio: dpr,
      });
      chart.setOption(this.getOptions());

      chart.getZr().on('mousedown', (params) => {
        console.log('测试-mousedown');
        mousedownX = params.offsetX;
      });
      chart.getZr().on('mouseup', (params) => {
        if (this.data.chartType !== 2) {
          if (mousedownX - params.offsetX > 50) {
            console.log('测试-左滑动');
            this.triggerEvent('changChartData', { type: 'next' });
          }
          if (params.offsetX - mousedownX > 50) {
            console.log('测试-右滑动');
            this.triggerEvent('changChartData', { type: 'last' });
          }
        }
      });
      return chart;
    });
  },
  getOptions () {
    const { xData, yData } = this.data.chartData
    // 这里的 xData、yData就只展示当前页面要展示的数据
    const option = {
      xAxis: {
        type: 'category',
        data: xData
      },
      yAxis: {
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100
        }
      ],
      series: [
        {
          name: '柱状图1',
          data: yData,
          type: 'bar'
        }
      ]
    };
    return option
  }
}

父组件核心逻辑

// 子组件
<chart bind:changChartData="changChartData" chartData="{{chartData}}" />

data = {
  chartData: {
    xData: [],
    yData: []
  }
}
methods = {
  changChartData(event) {
    // type: last | next
    const { type } = event.detail;
    // 根据 type 获取要展示的 chartData
    this.chartData = getNewChartData(type);
  }
}

最终效果和上面的 手动滑动 差不多，只不过左右滑动的时候是一整页的翻动