ECharts4Taro3 を Vue プロジェクトに迅速に統合してデータの視覚化とデータのインポートを実現する方法

npm install @tarojs/cli -g
taro init my-project
cd my-project
npm install

npm install echarts-for-taro@beta

import { EChart } from 'echarts-for-taro';

export default {
  components: {
    EChart,
  },
}

<template>
  <view>
    <e-chart :option="chartOption" canvasId="chart" />
  </view>
</template>

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, CanvasRenderer]);

export default {
  data() {
    return {
      chartOption: {},
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(Taro.createSelectorQuery().select('#chart').node);

      // 在这里添加你的图表配置和数据
      const option = {
        ...,
      };

      chart.setOption(option);

      this.chartOption = option;
    },
  },
}

npm install xlsx file-saver

import { readFile } from 'xlsx';

export default {
  methods: {
    importData() {
      Taro.chooseMessageFile({
        count: 1,
        type: 'file',
        success: (res) => {
          const filePath = res.tempFiles[0].path;
          const fileData = readFile(filePath, { type: 'binary' });
          const worksheet = fileData.Sheets[fileData.SheetNames[0]];
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

          // 在这里处理解析后的jsonData
          ...
        },
      });
    },
  },
}