Vue と ECharts4Taro3 の高度なチュートリアル: モバイルで複雑なデータの視覚化を実装する方法

npm install echarts --save
npm install @tarojs/taro-echarts --save

import TaroEcharts from '@tarojs/taro-echarts'

data() {
  return {
    chartData: {
      xData: ['A', 'B', 'C', 'D', 'E'],
      yData: [10, 20, 30, 40, 50]
    }
  }
}

<template>
  <view>
    <TaroEcharts :option="chartOption" />
  </view>
</template>

computed: {
  chartOption() {
    return {
      title: {
        text: '柱状图'
      },
      xAxis: {
        type: 'category',
        data: this.chartData.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: this.chartData.yData
      }]
    }
  }
}

data() {
  return {
    lineChartData: {
      xData: ['January', 'February', 'March', 'April', 'May'],
      yData: [100, 200, 300, 400, 500]
    },
    pieChartData: {
      data: [
        { name: 'A', value: 10 },
        { name: 'B', value: 20 },
        { name: 'C', value: 30 },
        { name: 'D', value: 40 },
        { name: 'E', value: 50 }
      ]
    }
  }
}

computed: {
  lineChartOption() {
    return {
      title: {
        text: '折线图'
      },
      xAxis: {
        type: 'category',
        data: this.lineChartData.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'line',
        data: this.lineChartData.yData
      }]
    }
  },
  pieChartOption() {
    return {
      title: {
        text: '饼图'
      },
      series: [{
        type: 'pie',
        radius: '50%',
        data: this.pieChartData.data
      }]
    }
  }
}

<template>
  <view>
    <TaroEcharts :option="lineChartOption" />
    <TaroEcharts :option="pieChartOption" />
  </view>
</template>