教你如何利用Vue和ECharts4Taro3打造跨端数据可视化应用

npm install -g @vue/clivue create my-projectcd my-project

npm install echarts4taro3

<template>  <view class="chart-container">    <ec-canvas id="chart" canvas-id="chart" ec="{{ ec }}" ref="canvas"></ec-canvas>  </view></template><script>import * as echarts from 'echarts4taro3';export default {  name: 'Chart',  props: {    data: {      type: Array,      default: () => [],    },  },  data() {    return {      ec: {        lazyLoad: true,      },    };  },  mounted() {    this.initChart();  },  methods: {    initChart() {      this.$refs.canvas.init((canvas, width, height, canvasId) => {        const chart = echarts.init(canvas, null, {          width: width,          height: height,          devicePixelRatio: this.$scope.devicePixelRatio,        });        canvas.setChart(chart);        const option = {          // 设置图表的配置项和数据          // ...        };        chart.setOption(option);      });    },  },};</script><style>.chart-container {  width: 100%;  height: 300px;}</style>

<template>  <view class="home">    <chart :data="chartData" />  </view></template><script>import Chart from '../components/Chart.vue';export default {  name: 'Home',  components: {    Chart,  },  data() {    return {      chartData: [        // 数据项        // ...      ],    };  },};</script><style>.home {  width: 100%;  height: 100%;}</style>

npm run serve