【Echarts】自定义提示框tooltip样式，结合vue在自定义提示框中实现选择器和按钮事件

在ECharts中，可以通过tooltip的formatter回调函数来自定义提示框的内容，同时可以使用Vue的方法来处理事件。以下是一个简单的例子，展示了如何在ECharts的tooltip中添加按钮和选择器，并在Vue中处理它们的点击事件。

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return `<div>${params.name}: ${params.value}</div>` +
              `<button @click='handleButtonClick'>点击我</button>` +
              `<select @change='handleSelectChange($event)'>` +
              `  <option value='option1'>选项1</option>` +
              `  <option value='option2'>选项2</option>` +
              `</select>`;
          }
        },
        series: [
          {
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };
 
      myChart.setOption(option);
 
      // 绑定方法到Vue实例
      this.myChart = myChart;
    },
    handleButtonClick() {
      console.log('Button clicked');
    },
    handleSelectChange(event) {
      console.log('Select changed:', event.target.value);
    }
  }
};
</script>

在这个例子中，我们首先在mounted钩子函数中初始化了ECharts图表。在initChart方法中，我们设置了tooltip的formatter属性，使用字符串模板直接插入了一个按钮和一个选择器。这些HTML元素会被渲染在tooltip中。

当用户点击按钮或者改变选择器的选项时，会触发handleButtonClick和handleSelectChange方法，这些方法定义在Vue组件的methods中，并且可以在这里处理相关的逻辑。这样，我们就实现了在ECharts的tooltip中添加Vue事件处理的功能。