echarts 连接线 箭头 不同颜色

要在 echarts 中给连接线箭头设置不同的颜色，可以通过自定义 itemStyle 的方式来实现。

首先，需要使用 series 中的 `lines` 组件来定义连接线的样式，然后在 `lines` 中的 `itemStyle` 中设置颜色属性，可以是一个固定的颜色值或者是一个数组，每个箭头对应一个颜色。

例如，我们可以定义一个包含多个连接线的示例数据，每个连接线对应不同的颜色：

var data = [
  { 
    fromName: '城市A', 
    toName: '城市B', 
    coords: [[120.15507,30.274084], [114.3162,30.581084]], 
    lineColor: 'red'
  },
  { 
    fromName: '城市B', 
    toName: '城市C', 
    coords: [[114.3162,30.581084], [108.320004,30.581084]], 
    lineColor: 'green'
  },
  { 
    fromName: '城市C', 
    toName: '城市D', 
    coords: [[108.320004,30.581084], [106.713478,26.578343]], 
    lineColor: 'blue'
  }
];

然后，在 echarts 中使用以下配置代码来绘制连接线和箭头，并设置箭头的颜色：

option = {
  series: [{
    type: 'lines',
    data: data.map(function (item) {
      return {
        fromName: item.fromName,
        toName: item.toName,
        coords: item.coords,
        lineStyle: {
          color: item.lineColor
        }
      };
    }),
    // 设置箭头样式
    arrow: {
      show: true,
      symbol: 'arrow',
      symbolSize: 10,
      color: function (params) {
        return data[params.dataIndex].lineColor;
      }
    }
  }]
};

通过以上配置，就可以实现连线箭头颜色不同的效果。可以根据具体需求自定义连接线的样式和颜色。