Echarts之带箭头的折线图

需求：

鼠标移入：


1、容器：

<div id="line" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>

2、在methods中

methods:{
 initChart() {
      let up =  "image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAdCAMAAADb7h9dAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEX///8A6psA6psA6ZsA6pwA65sA758A6psA6pwA6pwA6poA6psA6pwA6psA/78A6pwA/58A6pwA6psA6pUA6ZwA6p0A65sA6pwA6pv///+GCdEAAAAAF3RSTlMAVP2wYnAgeJ/vMM+gqwS3CMPwDHRgQBDFXh0AAAABYktHRACIBR1IAAAAB3RJTUUH5QEMAQQfFU0UXwAAAL5JREFUOMuVz+sCgiAMhuEvNTPDQ5bp/V9poSHbOAj7Od5HEIjPpVjYlDibqsgEqHIBrmeglotbHDT3Vq4eMdAsixRN7IbtkAu9WkPg/zEq9tXqB8flVtD3OIAcGnGsVg9gH9sFWalOAnG5FrRH33Egei1YD/QDBU7PRm3NOFiQ0v/Es3R71U6hHni93R6QQkGO+DkhznsuUnoq0norUnsj3B5z6LFaeHornMN28vZGeA5rICwUcmbO7IFPevoFDDov6xIsBXAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMTFUMTc6MDQ6MzErMDg6MDDhQ7tUAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTExVDE3OjA0OjMxKzA4OjAwkB4D6AAAACB0RVh0c29mdHdhcmUAaHR0cHM6Ly9pbWFnZW1hZ2ljay5vcme8zx2dAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAAyOaY9ED0AAAAWdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANDh/z0egAAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5nP7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADE2MTAzNTU4NzGBWoX4AAAAEXRFWHRUaHVtYjo6U2l6ZQA1NDRCQv4mTv8AAABGdEVYdFRodW1iOjpVUkkAZmlsZTovLy9hcHAvdG1wL2ltYWdlbGMvaW1ndmlldzJfOV8xNjA5OTAzNTkyOTAxODkyN184NV9bMF11BmgsAAAAAElFTkSuQmCC";
      let down =
"image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAdCAMAAADb7h9dAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAY1BMVEX/UFD8WVn/Wlr9Wlr9Wlr9WVn9Wlr8WVn9WVn/WFj8WVn/WVn8WVn9Wlr8Wlr9WVn/WVn9WVn9WVn9WFj9WVn/VVX9WVn9WVn/VVX9Wlr/WVn9Wlr8Wlr9Wlr9WVn///84kd9mAAAAHnRSTlMAEL8wz++Pn8DwIK9IrPew0Dzz8vXlGN/XEs1QgFhS7YhiAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+UBDAEEBegv7SUAAADQSURBVDjLldDZFoIgEIBhiAozc8mybBnf/y3DBWVgxoTLmf87cBDCHLlTIubIPRxihOkhRgw9KY5qpSeEpq9NAGihmYeqEy0091BGaO6hjNDcQxmx9NuE228RuMciJcQZgBXZhbiDOFZkeSFWROl/RpZDIXhRSu8zqhxc4ItSep9RXQEDLPoejeob+MBdj70z6joIwbK2/Tyaeh/Y9dJPI9sHYFy7/TCa+xD0a9ybUT33BBAq8XqR3mENBKd5QBRonhAFWtT/B+0L4sD7g8/3B5Y8O4MmGOxHAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTExVDE3OjA0OjA1KzA4OjAwm4OYpAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0xMVQxNzowNDowNSswODowMOreIBgAAAAgdEVYdHNvZnR3YXJlAGh0dHBzOi8vaW1hZ2VtYWdpY2sub3JnvM8dnQAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABd0RVh0VGh1bWI6OkltYWdlOjpIZWlnaHQAMjmmPRA9AAAAFnRFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADQ4f89HoAAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNjEwMzU1ODQ1rRoSIgAAABF0RVh0VGh1bWI6OlNpemUANTczQkLp3PeUAAAARnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vYXBwL3RtcC9pbWFnZWxjL2ltZ3ZpZXcyXzlfMTYwOTkwMzY1NTc5MTg2MzdfMThfWzBdb15qpQAAAABJRU5ErkJggg==";
      let danwei = "亿元";
      let XLabel = ["2019年", "2020年", "2021年"];
      let YLabel = ["8.73", "6.73", "8.70"];
      let YLabel2 = [12.73, -10.43, 18.12];
      let arrYLabel2 = [];
      /* 
      data:[
        {
          value:6,//数值
          symbol:"",//图片路径
          symbolSize:25//图片大小
        }
      ]
      */
      YLabel2.map((item) => {
        let obj = {};
        obj.value = item;

        if ((item + "").slice(0, 1) == "-") {
          obj.symbol = down;
        } else {
          obj.symbol = up;
        }
        obj.symbolSize = 25;
        arrYLabel2.push(obj);
      });
      let option = {
        color: ["#4F9EFD", "#00EA9C", "#FF923F"],
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "none", crossStyle: { color: "#999" } },
          textStyle: {
            fontSize: 20,
            fontWeight: "bold",
            fontFamily: "BoldCondensed",
          },
          // formatter:
          formatter: function (params) {
            // console.log("1222", params);
            return (
              '<span style="font-size: 20px;font-weight: bold;font-family: SourceHanSansCN;">' +
              params[0].name +
              "</span>" +
              "<br/>" +
              params[0].marker +
              '<span style="color:' +
              params[0].color +
              ';font-size: 20px;font-weight: bold;font-family: SourceHanSansCN;">' +
              "\n" +
              params[0].value +
              danwei +
              "</span>" +
              "<br>" +
              "<div>" +
              `<img style="width:16px;height:16px" src="${params[1].data.symbol.slice(
                8
              )}">` +
              '<span style="color:' +
              [
                (params[1].value + "").slice(0, 1) == "-"
                  ? "#FC5A5A"
                  : "#00EA9C",
              ] +
              ';font-size: 20px;font-weight: bold;font-family: SourceHanSansCN;">' +
              "\n" +
              params[1].value +
              "同比增长率" +
              "</span>" +
              "</div>"
            );
          },
        },
        // legend: {
        //   data: ["钱", "同比增长率"],
        //   right: "0%",
        //   top: "20%",
        //   itemWidth: 10,
        //   itemHeight: 10,
        //   icon: "rect",
        //   textStyle: {
        //     fontSize: 18,
        //     color: "#A0B2D3",
        //     padding: [0, 2, 0, 2],
        //     fontFamily: "SourceHanSansCN-Regular",
        //   },
        // },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "16%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: XLabel,
            axisPointer: { type: "shadow" },
            axisLabel: {
              color: "#A0B2D3",
              fontSize: 20,
              interval: 0,
              fontWeight: "bold",
              padding: [2, 0, 0, 0],
              textStyle: { fontFamily: "BoldCondensed,SourceHanSansCN" },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // interval: 3,
            axisLabel: {
              formatter: "{value}",
              color: "#A0B2D3",
              fontSize: 26,
              fontWeight: "bold",
              textStyle: { fontFamily: "BoldCondensed" },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(22, 39, 60, 1)"],
                width: 1,
                type: "dotted",
              },
            },
            axisTick: { show: false },
            name: "(" + danwei + ")",
            nameTextStyle: {
              fontFamily: "SourceHanSansCN-Regular",
              color: "#A0B2D3",
              fontSize: 20,
              fontWeight: "bold",
              padding: [0, 0, -2, -58],
            },
          },
          {
            type: "value",
            max: 50, //此处调整 箭头 在折线下
            axisLabel: {
              show: false,
              formatter: "{value}",
              color: "#A0B2D3",
              fontSize: 18,
              fontWeight: "bold",
              textStyle: { fontFamily: "BoldCondensed;" },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["rgba(22, 39, 60, 1)"],
                width: 1,
                type: "dotted",
              },
            },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            type: "line",
            data: YLabel,
            lineStyle: { width: 3 },
            cursor: "pointer",
            symbol: "emptyCircle",
            symbolSize: 6,
            hoverAnimation: true,
            itemStyle: { color: "#4F9EFD", borderWidth: "6" },
            emphasis: { itemStyle: { color: "#fff", borderWidth: "1" } },
            yAxisIndex: 0,
          },
          {
            type: "line",
            data: arrYLabel2,
            lineStyle: { opacity: 0, width: 3 }, //隐藏 线
            cursor: "pointer",
            symbolSize: 20,
            hoverAnimation: true,
            // 圆点
            itemStyle: { color: "#00EA9C", borderWidth: "6" },
            // 鼠标移入
            // emphasis: { itemStyle: { color: "#fff", borderWidth: "1" } },
            yAxisIndex: 1,
            label: {
              normal: {
                color: "#A0B2D3",
                fontSize: 20,
                show: true,
                position: "top",
                formatter: "{c}%",
                fontWeight: "bold",
                fontFamily: "BoldCondensed,SourceHanSansCN",
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("line"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
}

3、在mounted中调用

mounted() {
    this.initChart();
  },

以上