echarts 柱状图自定义tooltip的内容

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";

export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "250px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        if (val) {
          this.initChart();
        }
      },
    },
  },
  mounted() {
    console.log(this.chartData, "chartData");
    //   在组建再次渲染时，调用 this.initChart()初始化echarts图表
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose(); //在组件销毁的时候，调用chart.dispose()销毁图表实例
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el); //调用echarts.init()方法初始化图表
      this.setOptions();
      /*
      设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，
      ECharts 会合并新的参数和数据，然后刷新图表。
      如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
      */
    },

    setOptions() {
      var xData = [];
      var yData = [];
      var that = this;
      console.log(this.chartData, "this.chartData");
      this.chartData.forEach((item) => {
        xData.push(item.deptName);
        yData.push({
          value: item.reportRate,
          itemStyle: {
            color: "#409EFF",
            emphasis: {
              barBorderRadius: 30,
            },
          },
        });
        for (let i = 0; i < yData.length; i++) {
          if (i == 5) {
            var itemStyle = {
              color: "#6FC346",
              emphasis: {
                barBorderRadius: 30,
              },
            };
            yData.splice(5, 1, { itemStyle, value: yData[5].value });
          }
        }
      });
      var option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,1)",
          formatter: function (params) {
            let index = params[0].dataIndex;//关键代码，可以通过params[0].dataIndex拿到当前鼠标hover的是哪一个柱子
            let len = that.chartData.length;
            let str;
            str = `
              <li style='border-radius:35px;color:#000' class="g2-tooltip-list-item" >
                <span
                  class="g2-tooltip-marker"
                >
                汇报率:${that.chartData[index].reportRate + "%"}
                </span>
              </li>
                <li style='border-radius:35px;color:#000' class="g2-tooltip-list-item" >
                <span
                 style='color:#333;font-size:10px'
                  class="g2-tooltip-marker"
                >
                应汇报:${that.chartData[index].shouldReport}
                </span>
                <span style='color:#333;font-size:10px'>  未汇报:${
                  that.chartData[index].notReported
                } </span> 
              </li>
            `;

            return str;
          },
        },
        xAxis: {
          type: "category",
          name: "司法所",
          data: xData,
          axisLabel: {
            interval: 0, //强制文字产生间隔
            rotate: -10, //文字逆时针旋转45°,文字显示不全的时候让旋转一定的角度
            textStyle: {
              //文字样式
              color: "#333",
              fontSize: 10,
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "汇报率%",
        },
        series: [
          {
            data: yData,

            type: "bar",
            showBackground: true,
            label: {
              // 柱图头部显示值
              show: true,
              position: "top",
              color: "#333",
              fontSize: "12px",
              // formatter: (params) => {
              //   return params.value[params.encode.x[0]];
              // },
              formatter: "{c}%",
            },

            barWidth: "12px",
            itemStyle: {
              backgroundStyle: {
                color: "red",
              },
              normal: {
                // 设置柱子的圆角、
                barBorderRadius: [10, 10, 10, 10],
                color: function (params) {
                  let colorList = [
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      this.chart.setOption(option, true);
      window.onresize = () => {
        this.chart.resize();
      };
    },
  },
};
</script>

效果图如下: