1、效果图

2、引入依赖

npm install echarts --save

3、在mian.js中引入

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

4、在HTML声明div

<div style="width:700px;height:500px;" ref="lineref"></div>

5、js中使用绘制折线图

 let _this = this;
      /**获取图表div */
      let curve = this.$echarts.init(this.$refs.lineref);
      mycurve = curve; //赋值 mycure 是声明在export default 外面的变量，用来使vue不进行双向绑定
      /**获取X、Y轴和点的数据 */
      let value = curvedata; //X轴、Y轴的数据
      let option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          }
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          data: [],
        },
        yAxis: [],
        grid: {
          show: true,
        },
        dataZoom: [
          {
            type: "inside", //详细配置可见echarts官网
          },
        ],
        series: [],
      };
      /**设置X轴 */
      option.xAxis.name = "我是X轴名称";
      option.xAxis.data = value[0].x || []; //X轴的数据
      /**设置y轴 */
      let yAxisList = ['温度','电流','容量','能量'];
      let n = 0;
      //拿到Y轴的map;
      let YMap = {};
      let colorMap = {}; //Y轴颜色
      /**拿出相对应的设置的颜色 */
      let ySettingColorlist = {colorLists:["#995055", "#55BFC0", "#639ADE", "#5EBE67"]};;
      /**添加Y轴颜色 */
      yAxisList.forEach((res, i) => {
        option.yAxis.push({
          type: "value",
          name: res, //设置Y轴单位
          // min: 0,
          // max: 250,
          position:
            yAxisList.length == 2
              ? n < 1
                ? "left"
                : "right"
              : n < 2
              ? "left"
              : "right", //判断Y轴的数量
          scale: true,
          offset:
            yAxisList.length == 2
              ? 0
              : n > 1
              ? parseInt((n - 2) * 50)
              : parseInt(n * 50),
          axisLine: {
            show: true,
            lineStyle: {
              color: ySettingColorlist[n],
            },
          },
          splitLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            interval: 0,
          },
        });
        YMap["y" + (n + 1)] = n;
        colorMap["y" + (n + 1)] = ySettingColorlist[n];
        n++;
      });
      /**添加Y轴数据 设置Y轴的条数,这里是设置数据*/
      let yitem = ['y1','y2','y3','y4]
      value.map((item, index) => {
        //yitem = ['y1','y2','y3','y4]
        yitem.map((yitem, yindex) => {
          let valueY = item[yitem];
          if (valueY) {
            let name =  item.bat_cycle_id; //这里设置成为唯一标识，后续如果想要添加点击事件，或者动态隐藏、显示的时候，能够方便找到
            let yIndex = YMap[yitem];
            let yColor = colorMap[yitem];
            let dataArr = valueY || [];
            option.series.push({
              type: "line",
              // sampling:'lttb', //优化方案，设置了点击事件不起效
              yAxisIndex: yIndex, //设置对应Y轴数据
              data: dataArr,
              name:name,
              color: yColor, //设置对应Y轴颜色
              // tooltip:{
              //   formatter:function(params){
              //     console.log(params);
              //     // return '1111';
              //   }
              // },
              emphasis: {
                focus: "series",
                lineStyle: {
                  color: "red",
                  width: 4,
                },
              },
            });
          }
        });
      });
      curve.setOption(option);

5、数据curve的值(这里只是展示一个数据量)

let curve = [{
	"bat_flow_id": "b5c9efa2-a1fe-41da-977d538821212c88",
	"x": ["2021-11-13 16:29:22.156156", "2021-11-13 16:29:23.156534", "2021-11-13 16:29:24.158469",
		"2021-11-13 16:29:25.156247", "2021-11-13 16:29:26.156413", "2021-11-13 16:29:27.156167",
		"2021-11-13 16:29:28.156759", "2021-11-13 16:29:29.157595", "2021-11-13 16:29:30.155837",
		"2021-11-13 16:29:31.156627", "2021-11-13 16:29:32.156122"
	],
	"y1": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
	"y2": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
	"y3": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
	"y4": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
},{
	"bat_flow_id": "b5c9efa2-a1fe-41da-977d538821212c81",
	"x": ["2021-11-13 16:29:22.156156", "2021-11-13 16:29:23.156534", "2021-11-13 16:29:24.158469",
		"2021-11-13 16:29:25.156247", "2021-11-13 16:29:26.156413", "2021-11-13 16:29:27.156167",
		"2021-11-13 16:29:28.156759", "2021-11-13 16:29:29.157595", "2021-11-13 16:29:30.155837",
		"2021-11-13 16:29:31.156627", "2021-11-13 16:29:32.156122"
	],
	"y1": [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1],
	"y2": [0.3, 0.5, 0.7, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.5],
	"y3": [0.2, 0.4, 0.8, 0.4, 0.5, 0.6, 0.3, 0.2, 0.12, 0.10, 0.0],
	"y4": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
},]