关于Echarts插件中折线实现自动滚动及单个拐点颜色的设计

亲测，十分有效

  drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var SData = [42,40,34,56,13,76,28,36,91,100,82,80,70,65,66,60,50,
      ];
      let myChart = this.$echarts.init(document.getElementById("myChart"));

      // 绘制图表
      var option = {
        xAxis: {
          data: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14", "15","16","17","18"],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
        },
        dataZoom: [
          //滑动条
          {
            show: false, //是否显示滑动条
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 9, // 一次性展示10个。
          },
        ],
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {//分割线
            show: false,
          },
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: [],
            lineStyle: {
              normal: {
                color: "#dd3300", // 线条颜色
              },
            },
          },
        ],
      };

//单个拐点的设置
      for (var k = 0; k < SData.length; k++) {
        //主要实现改变特定点样式代码
        let obj = {};
        if (SData[k] >= 60) {
          //判断是买点
          (obj = {
            value: SData[k],
            itemStyle: {
              normal: {
                color: "#35B65A", //拐点颜色
                borderColor: "green",
                borderWidth: 2,
              },
            },
          }),
            option.series[0].data.push(obj);
        } else {
          (obj = {
            value: SData[k],
            itemStyle: {
              normal: {
                color: "darkgreen", // 会设置点和线的颜色，所以需要下面定制 line
                borderColor: "blue", // 点边线的颜色
                borderWidth: 2,
              },
            },
          }),
            option.series[0].data.push(obj);
        }
      }

      myChart.setOption(option);


//实现自动滚动
      setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == SData.length) {
          option.dataZoom[0].endValue = 10;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      }, 2000);
    },

由于本人较懒没下载制作gif图的软件，所以我这里每隔几秒截取图片（哈哈）