数据可视化大屏项目开发过程中，我们在对接数据的时候，需要将通过接口请求的方式来讲数据渲染到页面中，但是部分客户并没有后台，所以想通过excel表格的形式来将数据渲染到页面中。

今天我们来实现将excel表格数据渲染到页面中。

测试环境

vue3 vite js nodejs 16

准备表格

我们准备一个表格命名为data.xlsx存放目录public/data.xlsx,创建表名为机具信息汇总

读取表格数据

读取表格数据

 async getData() {
      try {
        const response = await fetch('./data.xlsx');
        const arrayBuffer = await response.arrayBuffer();
        const data = new Uint8Array(arrayBuffer);
        const workbook = XLSX.read(data, { type: 'array' });

        const worksheet = workbook.Sheets['机具信息汇总'];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);

        this.list = jsonData.map(row => ({
          name: row['农机名称'],
          value: row['维修数'],
          value2: row['待机数'],
          value3: row['工作数']
        }));

        console.log(this.list);
        this.drawEcharts();
      } catch (error) {
        console.error('加载Excel数据时出错:', error);
      }
    },

渲染数据

drawEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echarts)
      window.addEventListener('resize', () => {
        myChart.resize()
      })

      var option = {
        grid: {
          top: '30px',
          bottom: '10px',
          left: '20px',
          right: '10px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 174, 0, 0.1)'
              }, {
                offset: 1,
                color: 'rgba(255, 174, 0, 0.5)'
              }], false),
            }
          }
        },
        legend: {
          top: 0,
          right: 10,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: 'rgba(157, 185, 233, 1)',
            fontSize: '12'
          },
        },
        xAxis: [{
          data: this.list.map(obj => obj.name),
          axisLabel: {
            margin: 10,
            interval: 0,
            color: '#fff',
            textStyle: {
              fontSize: FontChart(14),
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(49, 119, 214, 1)',
              width: 1
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(39, 76, 129, 0.26)',
              width: 1,
            }
          },
          axisTick: {
            show: false
          },
        }],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#fff',
              textStyle: {
                fontSize: FontChart(14),
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(49, 119, 214, 1)',
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(39, 76, 129, 0.26)',
                width: 1,
              }
            }
          }],
        series: [
          {
            name: '维修数',
            type: 'bar',
            data: this.list.map(obj => obj.value),
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(41, 241, 250, 1)'
                }, {
                  offset: 1,
                  color: '#1968ae'
                }], false),
              }
            },
          },
          {
            name: '待机数',
            type: 'bar',
            data: this.list.map(obj => obj.value2),
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#bedb3b'
                }, {
                  offset: 1,
                  color: '#8d9336'
                }], false),
              }
            },
          },
          {
            name: '工作数',
            type: 'bar',
            data: this.list.map(obj => obj.value3),
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#2bf5ad'
                }, {
                  offset: 1,
                  color: '#159a87'
                }], false),
              }
            },
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },

渲染效果