echart折线图例配置，折点配置、最高值最低值设置

    现在的大屏要求的折线图是不是越来越花里胡哨了，最近我做大屏项目的时候又遇到了这中图，既然用到这么频繁那就分享给大家。

    如下图：

图例和折线图折点要求这样，用到了图例的一些配置属性那他转化成icon，还有symbolSize（图片大小），symbol（图片）这两个配置属性控制折点的样式，相关代码如下

注：需要吧图片转成base64的格式

网站：PNG 转换器 - 免费在线转换您的PNG文件

图例

 legend: {
          type: "scroll",
          right: "2%",
          data: Line,
          icon: img,
          itemWidth: this.fontSize(1),
          itemHeight: this.fontSize(1),

          textStyle: {
            color: "#C8DDF5",
            fontSize: this.fontSize(0.6),
          },
        },

折点 

series：{
     symbolSize: this.fontSize(1),
     symbol: img,
}

 最高值最低值

markLine: {
            symbol: ["none", "none"],
            data: [
              {
                yAxis: 200, // 自定义值
                label: {
                  // 不显示基准线名称
                  show: false,
                },
                lineStyle: {
                  type: "dashed", // 基准线样式为虚线
                  color: "rgba(255, 218, 105, 1)",
                },
              },
              {
                yAxis: "50",
                yAxis: 1800, // 自定义值
                label: {
                  // 不显示基准线名称
                  show: false,
                },
                lineStyle: {
                  type: "dashed", // 基准线样式为虚线
                  color: "rgba(255, 62, 62, 1)",
                },
              },
            ],
          },

最后是完整代码 

  //数据自己设置
      let dataName = [];
      let datavalue = [];
      chartData.forEach((item) => {
        dataName.push(item.name);
        datavalue.push(item.value);
      });
      let myChart = echarts.init(this.$refs.TempChart);
      myChart.clear();

      var Line = ["管道温度"];
      var img = [
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABjklEQVRIibWWXVLDMAyEN2kox+mdeIAz8QB36nFIk5oXr1lvZLswg2Y0bhtVX9aSf6bXj4SOTb2HgTWTLZ3EU2NsJU85JgXPKpAnnOW7ukPUAeAegQlSCH0ORo3VxEnGUKUrUsgM4JSd31UVVdyz79lVVYFGNVLAKcfwcwQigM8UdqiRqiBoyf6UncoURCW34CVod+Sp805TJWdxKpslwQ5gC15AmwMAJlWk00YlZwDP2QnThBuAtQFh7ZrNQJiCrujbBfVUas0AHNeKdxunb2Q6tWGXthasTyMA4P2lzv72WT5q/VTJQZHCokU7Mo0NdxEH/Zs5yPeuatF1TGOj9q5qpPuTdtDGAKmJ25ZjFaY5i6LWvsV1MrJVYARWUFfk2woLfEF/wX7l8dZQVkAO8c5h0tYWtAoonMYFP2cGE/qq5guMNlWF7KibIS32J9ouvxM+OiaiGpWu9fNIgcmSPXrwVQBa1N4wGHfgR49yX08VyG8wDv3r5aSMrmgK/vCb65a/ZHjdioL8njayZuw3b1rdUuzfvfMAAAAASUVORK5CYII=",
      ];
      var color = ["#669DFF", "#00f15a", "#0696f9", "#dcf776"];

      //数据处理
      var datas = [];
      Line.map((item, index) => {
        datas.push({
          symbolSize: this.fontSize(1),
          symbol: img[0],
          name: item,
          type: "line",
          yAxisIndex: 1,
          data: datavalue,
          markLine: {
            symbol: ["none", "none"],
            data: [
              {
                yAxis: 200, // 自定义值
                label: {
                  // 不显示基准线名称
                  show: false,
                },
                lineStyle: {
                  type: "dashed", // 基准线样式为虚线
                  color: "rgba(255, 218, 105, 1)",
                },
              },
              {
                yAxis: "50",
                yAxis: 1800, // 自定义值
                label: {
                  // 不显示基准线名称
                  show: false,
                },
                lineStyle: {
                  type: "dashed", // 基准线样式为虚线
                  color: "rgba(255, 62, 62, 1)",
                },
              },
            ],
          },
          itemStyle: {
            normal: {
              borderWidth: 5,
              color: color[index],
            },
          },
        });
      });

      let option = {
        grid: {
          left: "15%",
          top: "23%",
          bottom: "18%",
          right: "8%",
        },
        legend: {
          type: "scroll",
          right: "2%",
          data: Line,
          icon: img[0],
          itemWidth: this.fontSize(1),
          itemHeight: this.fontSize(1),

          textStyle: {
            color: "#C8DDF5",
            fontSize: this.fontSize(0.6),
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          backgroundColor: "rgba(8, 16, 43, 0.7)", // 提示框浮层的背景颜色
          borderWidth: 0,
          textStyle:{
            color: "rgba(255, 255, 255, 1)",
            fontSize: this.fontSize(0.6),
          },
          formatter: function (params) {
            return (
              "<div>管道温度: " +
              '<span style="color:rgba(102, 157, 255, 1)"+">' +
              params[0].value +'kpa'
              + '</span></div>'
            );
          },
        },
        yAxis: [
          {
            type: "value",
            position: "right",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
          {
            type: "value",
            name: "(℃)",
            nameTextStyle: {
              color: "rgba(200, 221, 245, 1)",
              fontSize: this.fontSize(0.5),
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(178, 194, 211, 0.2)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              color: "rgba(200, 221, 245, 1)",
              fontSize: this.fontSize(0.5),
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(130, 166, 213, 0.6)",
              },
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: "rgba(200, 221, 245, 1)", // x轴颜色
                fontWeight: "normal",
                fontSize: this.fontSize(0.5),
              },
            },
            data: dataName,
          },
          //   {
          //     type: "category",
          //     axisLine: {
          //       show: false,
          //     },
          //     axisTick: {
          //       show: false,
          //     },
          //     axisLabel: {
          //       show: false,
          //     },
          //     splitArea: {
          //       show: false,
          //     },
          //     splitLine: {
          //       show: false,
          //     },
          //     //-----
          //     data: ["1月", "2月", "3月", "4月", "5月", "6月"],
          //   },
        ],
        series: datas,
      };