如何在Vue项目中利用ECharts4Taro3实现数据可视化的数据标注

npm install --save echarts4taro

import {EChart} from 'echarts4taro3'

const salesData = [
  {name: '产品A', value: 100},
  {name: '产品B', value: 200},
  {name: '产品C', value: 150},
  {name: '产品D', value: 300},
];

render() {
  return (
    <View className='chart-container'>
      <EChart
        option={this.getOption()}
        onInit={(canvas, width, height) => {
          this.chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
        }}
        echarts={echarts}
      />
    </View>
  )
}

getOption() {
  return {
    xAxis: {
      type: 'category',
      data: salesData.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: salesData.map(item => ({
        value: item.value,
        label: {
          show: true,
          position: 'top'
        }
      })),
      type: 'bar'
    }]
  }
}