echarts

echarts 折线图 （多 y 轴）

• 多 y 轴配置

        yAxis: [
          {
            type: "value",
            position: "right",
            name: "电流A",
            offset: 50,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(248, 118, 156)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgb(248, 118, 156)",
              },
            },
          },
          {
            type: "value",
            name: "电压V",
            position: "right",
            axisLabel: {
              textStyle: {
                color: "rgb(248, 199, 83)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(248, 199, 83)",
              },
            },
          },
        ],
        series: [
          {
            name: "电流",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
            yAxisIndex: 0,  // 对应y轴数组的第几项,如果出现相同情况，会导致只有一条y轴有刻度
            itemStyle: {
              color: "#000",
              borderWidth: 4,
              borderColor: "green",
            },
            lineStyle: {
              color: "green",
            },
            data: [],
          },
          {
            name: "电压",
            type: "line",
            smooth: true,
            symbol: "circle",
            yAxisIndex: 1, // 对应y轴数组的第几项,如果出现相同情况，会导致只有一条y轴有刻度
            symbolSize: 10,
            showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
            itemStyle: {
              // 折线点的样式
              color: "#000",
              borderWidth: 4,
              borderColor: "yellow",
            },
            lineStyle: {
              // 线的样式
              color: "yellow",
            },
            data: [],
            markPoint: {
              symbol: "rect",
            },
          },
        ],

• legend

      legend: {
          textStyle: {
            color: "#FFF",
          },
          itemHeight: 0, //圆点大小  折线中间圆点大小
          itemWidth: 20, // 线的长度
          right: 10,
          bottom: 250,
          orient: "vertical",   // 设置垂直还是水平排列
        },

• tooltip: 重写图表移入提示框(formatter属性)

      tooltip: {
          trigger: "axis",
          backgroundColor: "transparent",
          borderColor: "transparent",
          // 指示器
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "line", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          formatter: (obj) => {
            // console.log(obj);
            let tooltipsContent = "";
            obj.forEach((item) => {
              tooltipsContent += `
                <p class="itemTitle">${item.seriesName}</p>
              `;
              let valueItem = this.dianliu[obj[0].dataIndex];
              let tip = "";
              if (valueItem.length > 0) {
                tooltipsContent += `
                <div class="itemInfo">
                      <div class="itemText">
                        <span class="symbolCircle" style="background-color:${item.color};border-color:${item.borderColor};"></span>
                        <span class="itemName">${item.seriesName}</span>
                      </div><div class="itemText">`;
                valueItem.forEach((item1, index) => {
                  if (index == 0) {
                    tip = "max";
                    tooltipsContent += `
                      <span class="itemParams">${item1}(${tip})</span>
                    `;
                  } else if (index == 1) {
                    tip = "avg";
                    tooltipsContent += `
                      <span class="itemParams">${item1}(${tip})</span>
                    `;
                  } else if (index == 2) {
                    tip = "min";
                    tooltipsContent += `
                      <span class="itemParams">${item1}(${tip})</span>
                    `;
                  }
                });
                tooltipsContent += `</div></div>`;
              } else {
                tooltipsContent += `<div class="itemInfo">
                  <div class="itemText">
                    <span class="symbolCircle" style="background-color:${item.color};border-color:${item.borderColor};"></span>
                    <span class="itemName">${item.seriesName}</span>
                  </div>
                  <span class="itemParams">${item.value}</span>
                </div>`;
              }
            });
            return `
            <div class="echarts_tooltips_container">
              <p class="average">30 minutes average</p>
              <div class="tooltip_time">${obj[0].axisValueLabel}</div>
              <div class="tooltips_content">
                ${tooltipsContent}
              </div>
            </div>
            `;
          },
          showContent: true,
        },