vue+echart :点击趋势图中的某一点或是柱状图，出现弹窗，并传输数据

在Vue中结合ECharts实现点击图表元素后弹窗并传递数据，你可以通过监听ECharts的click事件来实现。下面是一个简单的示例：

1. 安装并引入ECharts：

npm install echarts --save

2. 在Vue组件中使用ECharts：

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
  <Modal v-if="selectedItem" :item="selectedItem" @close="selectedItem = null"></Modal>
</template>
 
<script>
import * as echarts from 'echarts';
import Modal from './Modal.vue'; // 假设有一个Modal组件用于显示数据
 
export default {
  components: {
    Modal
  },
  data() {
    return {
      chart: null,
      selectedItem: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.initChart();
    this.chart.on('click', (params) => {
      this.selectedItem = params.data; // 假设params.data包含了你想传递的数据
    });
  },
  methods: {
    initChart() {
      const option = {
        // ECharts 配置项
      };
      this.chart.setOption(option);
    }
  }
};
</script>

3. 在Modal.vue组件中，你可以显示传递过来的数据，并提供一个方法来关闭弹窗：

<template>
  <div v-if="item">
    <!-- 显示item数据的内容 -->
    <button @click="closeModal">关闭</button>
  </div>
</template>
 
<script>
export default {
  props: ['item'],
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
};
</script>

这个例子中，我们监听了ECharts图表的click事件，并在事件处理函数中设置了selectedItem数据。然后，我们使用了一个Modal组件来显示这些数据，并通过一个方法来清除选中的项。这个方法会触发一个自定义事件@close，这可以用来关闭弹窗。