Vue和ECharts4Taro3进阶教程：如何实现数据可视化的自定义交互行为

npm install echarts-taro3 --saveyarn add echarts-taro3

import { create } from 'echarts-taro3/core';import { CanvasRenderer } from 'echarts/renderers';import { BarChart } from 'echarts/charts';import { GridComponent, TooltipComponent } from 'echarts/components';

<template>  <view ref="chart" class="chart-container"></view></template><script>export default {  mounted() {    this.createChart();  },  methods: {    createChart() {      const chart = create(this.$refs.chart, null, {        renderer: 'canvas',        width: '100%',        height: '600px'      });      chart.use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);      const option = {        // 图表配置项      };      chart.setOption(option);    }  }}</script><style scoped>.chart-container {  width: 100%;  height: 600px;}</style>

createChart() {  // 省略其他代码  chart.on('click', this.handleChartClick);  // 省略其他代码},handleChartClick(params) {  const { dataIndex } = params;  const { seriesName, data } = chart.getOption().series[params.seriesIndex];  console.log(`点击了${seriesName}的第${dataIndex}个柱子，值为${data[dataIndex]}`);}