echarts给到的默认样式略为有点朴素，本文记录一下修改tooltip默认样式，忘了的时候来查查看一下

默认tooltip样式图修改过后的tooltip样式图代码如下

<template>  <div class="echartsBox" id="main"></div></template><script>export default {  data() {    return {      xData: ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马", "白骨精", "狐狸精"],      yData1: [115, 198, 88, 77, 99, 123, 36],      yData2: [88, 89, 77, 66, 100, 145, 53],      yData3: [18, 55, 42, 63, 77, 85, 58],      grid: {        // 网格线配置        show: true,        lineStyle: {          color: ["#e9e9e9"],          width: 1,          type: "solid",        },      },    };  },  mounted() {    // 在通过mounted调用让echarts渲染    this.echartsInit();  },  methods: {    echartsInit() {      let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器      this.$echarts.init(main).setOption({        xAxis: [          {            type: "category", // 类别            data: this.xData, // x轴类别对应的值            splitLine: this.grid, // 给x轴加上网格线          },        ],        yAxis: {          type: "value",          splitLine: this.grid, // 给y轴加上网格线          axisLabel: {            formatter: function (value, index) {              return value + "分";            },          },        },        tooltip: {          trigger: "axis", // 鼠标移入到柱子里面就会有一个提示，默认是item方式，如果有多个柱状图，堆在一块item就不太好了，个人喜欢axis方式的          triggerOn: "mousemove", // 什么时候触发提示小图标，点击click的时候，或者鼠标滑过的时候，默认是mousemove鼠标滑过          /* formatter可以以字符串模板方式写，也可以用回调函数写，不过字符串模板略有限制，我们使用回调函数会灵活点 */          formatter: function (params) {            console.log("--x轴类目对应的参数数组--", params); // 比如当鼠标hover到孙悟空同学这一列的时候，这个params数组存放的每一项数据分别是语数外三门成绩的具体信息            var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分              "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;background:pink;border-radius:3px;'><p>" +              params[0].name +              " </p></div>";            for (var i = 0; i < params.length; i++) {              //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去              res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[                    params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据                  ]};"></span>                  ${params[i].seriesName}                  ${params[i].data}分                </div>`;            }            return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果          },        },        legend: {          // legend 是对series进行筛选，所以data中每一项就是series中的每一项的标识，所以就是以name为标识          data: ["语文成绩", "数学成绩", "英语成绩"],        },        series: [          {            name: "语文成绩",            data: this.yData1,            type: "bar", // 类型为柱状图            barWidth: 40, // 柱状图的宽度            label: {              // 展示具体柱状图的数值              show: true,            },            barGap: "0",            /*              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。            */            stack: "值无所谓，但要保持一致",          },          {            name: "数学成绩",            data: this.yData2,            type: "bar", // 类型为柱状图            barWidth: 40, // 柱状图的宽度            label: {              // 展示具体柱状图的数值              show: true,            },            /*              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。            */            stack: "值无所谓，但要保持一致",          },          {            name: "英语成绩",            data: this.yData3,            type: "bar", // 类型为柱状图            barWidth: 40, // 柱状图的宽度            label: {              // 展示具体柱状图的数值              show: true,            },            /*              注意，如果想要把数据堆在一块，堆叠放置，只需要在series数组中的每个对象中都加入stack属性，stack英文单词的释义是：              一叠，一摞，一堆的意思，设置stack的属性值是什么倒无所谓，但是要让其stack的属性值保持一致，保持一致，才会堆叠到一块。            */            stack: "值无所谓，但要保持一致",          },        ],      });    },  },};</script><style lang="less" scoped>.echartsBox {  width: 900px;  height: 500px;}</style>

就不写步骤了，直接看注释方便些