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>
就不写步骤了，间接看正文不便些