先上最终效果图
#

实现过程：

一、下载引入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 不是valueFormatterformatter: (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(() => {})