在vue项目中使用echarts中的dataset制作多维度的柱状图

1.背景

公司给我分配了一个任务是做一个大屏项目，类似于监控中心那种。页面内容比较简单，最下面是两个柱状图，柱状图是多维度的，而我也是第一次在项目中使用echarts，记录一下此次过程。

2.开始

2.1安装echarts

npm install echarts --save

2.2在页面中引入echarts

import echarts from 'echarts'

2.3创建echarts渲染所需要的DOM容器

<div id="histogramOne" style="width: 960px;height: 500px">div>

注意：这里我要做的项目是大屏项目，UI给的设计图是1920*1080的尺寸，我这个柱状图是要占据屏幕的一半，所以宽度是960px。

2.4获取echarts所需要的option

  /**
     * 获取柱状图的配置
     * @param dimensions
     * @param source 数据源
     */
getLeftEchartOption(dimensions, source) {
      const option =
        {
          legend: {
            x: 'right', // 可设定图例在左、右、居中
            y:
              'top',
            padding: // 设定图例的内边距
              [50, 70, 0, 0]
          },
          tooltip: {},
          title: {
            text: '数据筛查(2021年)', // 图表的标题文字
            left:
              '26%',
            top:
              '35px',
            textStyle:
              {
                fontSize: 42, // 文字的字号
                color:
                  '#333' // 文字的颜色
              }
          },
          dataset: {
            dimensions, // 用 dimensions 指定了维度的顺序。直角坐标系中，默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
            source // 数据源
          },
          grid: {
            top: '100px', // 距离容器顶部的距离
            left: // 距离容器左边的距离
              '8%',
            right: // 距离容器右边的距离
              '4%',
            bottom: // 距离容器底部的距离
              '120px'
          },
          xAxis: {
            type: 'category'
          },
          textStyle: {
            fontSize: 24
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              itemStyle: {
                color: '#ff3c3c' // 定义柱子的颜色
              },
              label: {
                show: true, // 是否显示label（柱状图上面的文字）
                fontSize: 10, // 定义label的字体大小
                // 过滤为0的数据，如果为0则不显示
                formatter: function (params) {
                  if (params.data['大哥'] === 0) {
                    return ''
                  } else {
                    return params.data['大哥']
                  }
                }
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#ff8839'
              },
              label: {
                show: true,
                fontSize: 10,
                formatter: function (params) {
                  if (params.data['二弟'] === 0) {
                    return ''
                  } else {
                    return params.data['二弟']
                  }
                }
              }
            },
            {
              type: 'bar',
              barGap: 0,
              itemStyle: {
                color: '#ccc'
              },
              label: {
                show: true,
                fontSize: 10,
                formatter: function (params) {
                  if (params.data['三妹'] === 0) {
                    return ''
                  } else {
                    return params.data['三妹']
                  }
                }
              }
            }
          ]
        }
      return option
    },

2.5开始画图表

 /**
     *
     * @param leftDimensions 左侧柱状图数据维度的顺序
     * @param leftDataSource 左侧柱状图数据来源
     */
    drawLeftEchart(leftDimensions, leftDataSource) {
      const leftChartDOM = document.getElementById('histogramOne')
      const leftChart = echarts.init(leftChartDOM)
      const option = this.getLeftEchartOption(leftDimensions, leftDataSource)
      leftChart.setOption(option)
    },

2.6何时调用方法来渲染echarts？

我一开始是在获取到数据之前进行的渲染，页面不报错，就是图表没渲染出来，经过一番搜索，当然是要等到数据都准备好了以后才能渲染出来图表啦~
于是，我把它写在获取到后台数据以后了

getScreenData() {
      getCscScreenData(obj).then(res => {
        if (res.code === 1) {
          const data = res.data
          this.screenData = data
          // 转成左侧图表需要的数据
          this.leftEchartData.dataSource = this.transformLeftList(data.sc_list)
          // 数据已有，绘制图表
          this.drawLeftEchart(this.leftEchartData.dimensions, this.leftEchartData.dataSource)
        }
      })
    },

3.效果图

谢谢

谢谢你能看完这篇文章。