vue2使用echarts自定义tooltip内容

先上最终效果图
#

实现过程：

一、下载引入echarts

1. 下载

npm install echarts --save

2. 在main.js中引入

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

二、使用

<template>
  <div id="myechart" style="width: 100%;height: 350px;"></div>
</template>

<script>
  export default {
    data() {
      return {
        powerEchartData: [
          { "thisPower": 220, "voltage": 227.30, "current": 2.00, "temperature": "6", "portTemperature": "7", "state": "1", "port": "00", "occupyTime": "", "chargeTime": "0小时0分钟10秒", "chargeAmount": 0.00, "createTime": "2024-02-02 15: 49:58" },
          { "thisPower": 230, "voltage": 233, "current": 2.00, "temperature": "6", "portTemperature": "7", "state": "1", "port": "00", "occupyTime": "", "chargeTime": "0小时0分钟10秒", "chargeAmount": 0.00, "createTime": "2024-02-02 15: 59:58" },
          { "thisPower": 240, "voltage": 223, "current": 2.00, "temperature": "6", "portTemperature": "7", "state": "1", "port": "00", "occupyTime": "", "chargeTime": "0小时0分钟10秒", "chargeAmount": 0.00, "createTime": "2024-02-02 16: 09:58" },
        ],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.renderChart();
      })
    },
    methods: {
      renderChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myechart"));
        let xAxisData = this.powerEchartData.map(ele => ele.createTime);

        // 绘制图表
        var option = {
		  color: ['#F1072C', '#62A0ED'], // 设置折线图颜色
          tooltip: {
            trigger: 'axis',
            show: true,
            backgroundColor: 'rgba(0,0,0,0.6)', // 设置背景色，
            textStyle: {
             	color: 'white', // 设置字体颜色
            },
            // 注意，这里是formatter 不是valueFormatter
            formatter: (params) => {
              // 获取到的数据不需要做复杂处理
              // let str = '';
              // let unit = ['', 'W', 'V', 'A', '度', '度', '', '', '', '', '', '度']
              // params.forEach((ele, idx) => {
              //   str += ele.seriesName + ele.value + unit[idx] + '<br />'
              // });
              // return str;
              // 获取到的数据需要处理
              return `
                ${params[10].value} <br />
                ${params[0].seriesName}: ${params[0].value}W <br />
                ${params[1].seriesName}: ${params[1].value}V <br />
                ${params[2].seriesName}: ${params[2].value}A <br />
                ${params[3].seriesName}: ${params[3].value}度 <br />
                ${params[4].seriesName}: ${params[4].value}度 <br />
                ${params[5].seriesName}: ${params[5].value == 1 ? '充电中' : params[5].value == 2 ? '浮充' : ''} <br />
                ${params[6].seriesName}: ${params[6].value < 10 ? '0' + (Number(params[6].value) + 1).toString() : params[6].value} <br />
                ${params[7].seriesName}: ${params[7].value}分 <br />
                ${params[8].seriesName}: ${params[8].value} <br />
                ${params[9].seriesName}: ${params[9].value}度 <br />
              `;
            }
          },
          xAxis: {
            type: 'category',
            alignTicks: false,
            data: xAxisData,
            axisTick: {
              show: true,
            },
          },
          yAxis: [{
            type: 'value',
            name: '功率',
            axisLine: {
              show: true
            },
            // min: 0, // 最小值
            // max: 300, // 最大值
            // interval: 50, // 间隔值
            axisLabel: { // Y轴标签的相关设置
              formatter: function (value) {
                return value + 'W'
              },
              color: '#f1072c'
            },
          }, {
            type: 'value',
            name: '电压',
            axisLine: {
              show: true
            },
            min: 0,
            // max: 300,
            interval: 50,
            axisLabel: {
              formatter: function (value) {
                return value + 'V'
              },
              color: '#3e8ae9'
            },
          }],
          series: [
            {
              name: '功率',
              type: 'line',
              yAxisIndex: 0,
              data: this.powerEchartData.map(ele => ele.thisPower)
            },
            {
              name: '电压',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.voltage),
            },
            // 以下数据在tooltip中展示 但不在图表中展示
            {
              name: '电流',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.current),
              symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
              showSymbol: false, // 不显示symbol不显示
              lineStyle: {
                width: 0, // 线宽是0不显示线
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              }
            },
            {
              name: '环境温度',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.temperature),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '端口温度',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.portTemperature),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '端口状态',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.state),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '端口',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.port),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '充电总时长',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.occupyTime),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '已充时长',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.chargeTime),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '累积电量',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.chargeAmount),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
            {
              name: '',
              type: 'line',
              yAxisIndex: 1,
              data: this.powerEchartData.map(ele => ele.createTime),
              symbolSize: 0,
              showSymbol: false,
              lineStyle: {
                width: 0,
                color: 'rgba(0, 0, 0, 0)'
              }
            },
          ]
        };

        myChart.setOption(option);
      }
    }
  }
</script>

三、其他
若报错：[Vue warn]: Error in v-on handler: "Error: Initialize failed: invalid dom."
原因：在渲染前就执行这个方法
解决方案：等元素被初始化成功后执行，使用 this.$nextTick(() => {})