如何使用Vue和ECharts4Taro3创建动态图表效果

npm install taro-vue@next echarts-for-taro@next

<template>  <taro-echarts :ec="ec"></taro-echarts></template><script>import Taro from '@tarojs/taro'import { ref, onMounted } from 'vue'import * as echarts from 'echarts/core'import { BarChart } from 'echarts/charts'import { GridComponent, TitleComponent } from 'echarts/components'import { CanvasRenderer } from 'echarts/renderers'echarts.use([BarChart, GridComponent, TitleComponent, CanvasRenderer])export default {  setup() {    const ec = ref(null)    onMounted(() => {      // 初始化图表      const chart = echarts.init(ec.value)      // 配置项      const option = {        // ...具体配置项...      }      // 将配置项设置到图表中      chart.setOption(option)    })    return {      ec,    }  },}</script>

<script>import { ref, onMounted, computed, watch } from 'vue'export default {  // ...  setup() {    // ...    // 模拟动态数据    const data = ref([10, 20, 30, 40, 50])    const option = computed(() => ({      // 设置图表数据      series: [        {          type: 'bar',          data: data.value,        },      ]    }))    watch(data, () => {      // 图表数据改变时更新图表      chart.setOption(option.value)    })    return {      // ...    }  },}</script>

<template>  <view class="container">    <Chart />    <button @click="updateData">更新数据</button>  </view></template><script>import { ref } from 'vue'import Chart from '@/components/Chart.vue'export default {  components: {    Chart,  },  setup() {    const data = ref([10, 20, 30, 40, 50])    const updateData = () => {      // 模拟数据更新      data.value = data.value.map((item) => item * Math.random())      // 或者通过接口请求数据      // fetch('/api/data').then((response) => {      //   data.value = response.data      // })    }    return {      updateData,    }  },}</script>