关于vue.js:echarts修改tooltip默认样式使用formatter函数拼接加工

53次阅读

共计 2757 个字符,预计需要花费 7 分钟才能阅读完成。

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>

就不写步骤了,间接看正文不便些

正文完
 0