vue3+typescript(Echarts tooltip中formatter自定义并求和)

<template>
  <div ref="chartRef" :style="{ width: '600px', height: '400px' }"></div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
 
export default defineComponent({
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    let chartInstance: echarts.ECharts | null = null;
 
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let total = 0;
          const result = params[0].seriesName + '<br/>';
          params.forEach((item: any) => {
            if (item.data) {
              total += item.data;
            }
          });
          return result + '总计: ' + total + ' 元';
        }
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [23, 45, 56, 78]
        }
      ]
    };
 
    onMounted(() => {
      if (chartRef.value) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption(option);
      }
    });
 
    watch(chartRef, (newValue) => {
      if (newValue) {
        chartInstance = echarts.init(newValue);
        chartInstance.setOption(option);
      }
    });
 
    return {
      chartRef
    };
  }
});
</script>

这段代码使用Vue 3和TypeScript创建了一个ECharts图表，并在tooltip的formatter函数中实现了自定义内容和数据求和的功能。在这个例子中，我们定义了一个tooltip对象，其中formatter函数用于接收ECharts传递的参数，并计算这些参数的总和，然后返回自定义的字符串格式。这展示了如何在ECharts中使用tooltip的formatter函数来自定义提示框的内容。