ECharts折线图修改数据颜色 端点颜色 标点颜色 直线的点颜色 圆点颜色

原本样式

现在我们需要修改折线上数据的颜色,我们可以通过几个方法来实现

通过series-line. colorBy

series: [{
    type: "line",
    colorBy: "series"//所有数据都是用相同的颜色
    //colorBy: "data"//每个数据项都使用不同的颜色
  }]

colorBy设置为series的时候
整个数据系列将共享一个颜色，即每个端点也就会是相同的颜色

colorBy设置为data的时候
按照数据项分配调色盘中的颜色,每个数据点都具有单独的颜色

通过itemStyle设置颜色

itemStyle: {
      color: 'green', // 数据点颜色
    },

注意:如果不设置线段颜色,会将线段颜色一起更改

给线段添加颜色后

lineStyle:{
      color:'red'
    },
    itemStyle: {
      color: 'green', // 数据点颜色
    },

单独给数据修改颜色data.itemStyle

series: [
    {
      data: [
        {value: 820, 
        itemStyle: { color: 'blue' }
        },
        932, 901, 934, 1290, 1330, 1320
      ],
    },
  ]