Vue と ECharts4Taro3 実践ガイド: データ駆動型モバイル アプリケーションを最初から構築する

npm install -g @tarojs/cli

taro init myProject
cd myProject

npm install

npm install echarts-for-taro3

export default {
  // ...
  usingComponents: {
    // ...
    "ec-canvas": "@/components/echarts/echarts"
  }
  // ...
}

<template>
  <ec-canvas
    @init="onInit"
    canvas-id="mychart"
    :canvas-type="canvasType"
    :ec="ec"
  ></ec-canvas>
</template>

<script>
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([LineChart, CanvasRenderer]);

export default {
  props: ["data"],
  data() {
    return {
      ec: {
        lazyLoad: true
      },
      canvasType: "2d"
    };
  },
  mounted() {
    this.$emit("init", this.initChart);
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      this.setOptions(chart);
      return chart;
    },
    setOptions(chart) {
      const option = {
        ...
      };
      chart.setOption(option);
    }
  }
};
</script>

<template>
  <view class="container">
    <echarts :data="chartData" @init="onChartInit"></echarts>
  </view>
</template>

<script>
import echarts from "@/components/echarts/echarts.vue";

export default {
  components: {
    echarts
  },
  data() {
    return {
      chartData: [...]
    };
  },
  methods: {
    onChartInit(chart) {
      setTimeout(() => {
        // 更新图表数据
        this.chartData = [...];
        // 重新设置图表选项
        chart.setOptions({
          ...
        });
      }, 1000);
    }
  }
};
</script>