echarts折线图

echarts 折线图加流动箭头

代码

  let list = [
    {name:'7',value:233},
    {name:'8',value:233},
    {name:'9',value:200},
    {name:'10',value:180},
    {name:'11',value:199},
    {name:'12',value:233},
    {name:'13',value:210},
    {name:'14',value:180},
    {name:'15',value:174},
    {name:'16',value:135,predict:true},
    {name:'17',value:399,predict:true},
    {name:'18',value:480,predict:true},
    ]
    
  let data1 = [];
  let data2 = [];
  list.forEach((item) => {
    if (item.predict) {
      data2.push([item.name, item.value]);
    } 
    else {
      data1.push([item.name, item.value]);
    }
  });
  
    data2.unshift(data1[data1.length - 1]);
    
    
    option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: list.map((m) => {
        return m.name;
      }),
    },
    yAxis: [
      {
        type: 'value',
        name: '(Gbps)',
      },
      {
        type: 'value',
      },
    ],
    series: [
     {
      name: 'test1',
      type: 'line',
      yAxisIndex: 1,
      data: data1,
      symbol: 'circle',
      symbolSize: 16,
      lineStyle: {
        width: 6,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetY: 16,
        shadowBlur: 8,
        color:{
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#2FACFF', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#1666FF', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
      },
      itemStyle: {
        color: '#fff',
        borderWidth: 4,
        borderType: 'solid',
        borderColor: '#53BAFF',
      },
      },
     {
        name: 'test2',
        type: 'line',
        yAxisIndex: 1,
        data: data2,
        symbol: 'circle',
        symbolSize: 16,
        lineStyle: {
          width: 6,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetY: 16,
          shadowBlur: 8,
          color:{
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
   {
                  offset: 1,
                  color: '#F1D361', // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: '#FF8D53', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
        },
        itemStyle: {
          color: '#fff',
          borderWidth: 4,
          borderType: 'solid',
          borderColor: '#53BAFF',
        },
      },
     {
        name: 'test3',
        type:'line',
        itemStyle: {
            color:'none',
            lineStyle: {
              color: "none",
            },
        },
        areaStyle: {
              color:   {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0,146,246,0.9)'
                }],
                global: false, // 缺省为 false
              }
            },
        data:list.map((m) => {
          return m.value;
        }),
      },
     {
        name: 'jiantou',
        type: 'lines',
        yAxisIndex: 1,
        coordinateSystem: 'cartesian2d',
        polyline: true,
        z: 10,
        lineStyle:{
          color:'#fff',
          opacity:0,
        }, 
        effect: {
          period:10,
          show: true,
          symbolSize: 24,
          symbol: 'pin',
           color: 'pink'
        },
        data: [
        {
            coords: list
                .map((d) => {
                  return [d.name, d.value]
                }),
        },
        ],
     }
    ]
    }

实例