tooltip属性

提示框组件，用于配置鼠标滑过或点击图表时的显示框

example

<template>
 
    <div ref="main" id="main"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, reactive } from 'vue';
let main = ref<any>(null)
let myChart = reactive<any>(null)
onMounted(() => {
  myChart = echarts.init(main.value);
  myChart.setOption({
    title: {
      text: '主标题'
    },
    tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。
      show: true, // 是否显示
      trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发；'none'：什么都不触发。

      axisPointer: { // 坐标轴指示器配置项。
        type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器'cross' 十字准星指示器。
      },
      // showContent: true, //是否显示提示框浮层，默认显示。
      // triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。
      backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
      borderColor: '#333', // 提示框浮层的边框颜色。
      borderWidth: 0, // 提示框浮层的边框宽。
      padding: 5, // 提示框浮层内边距，
      textStyle: { // 提示框浮层的文本样式。
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 14,
      },
      // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
      // 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
      // formatter: '{a}--{b} 的成绩是 {c}'
      formatter: function (arg:any) {
        return arg[0].name + '的分数是:' + arg[0].data
      }
    },
    legend: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],

  })
})
</script>
<style>
#main {
  width: 500px;
  height: 500px;
}
</style>