ECharts：更改线条颜色

Question

This is my EChart init code:

var option = {
tooltip : {
      trigger: 'axis'
  },
  calculable : true,
  xAxis : [
      {
          type : 'category',
          boundaryGap : false,
          data : cat
      }
  ],
  yAxis : [
      {
          type : 'value'
      }
  ],
  series : [
      {
          name:'Series 1',
          type:'line',
          smooth:true,
          itemStyle: {normal: {areaStyle: {type: 'default'}}},
          data:val
      }
  ]
};

The line appears with area (correct) and colored in red (I think by default, I haven't added anything to my code). How can I change the color of the chart's line?

I've tried with

itemStyle: {normal: {areaStyle: {type: 'default'}}, color: '#d5ceeb'},

but it doesn't work.

Answer 1

You are writing color inside itemStyle which changes color of your data points, not the line. It should be written in lineStyle for the line color to change.

series : [
  {
      name:'Series 1',
      type:'line',
      smooth:true,
      itemStyle: {normal: {areaStyle: {type: 'default'}}},
      data:val
      lineStyle: {color: '#d5ceeb'}

  }

]

For more options on lineStyle refere here

Answer 2

As you can see on image below, if you don't neet to define details of line or item (in case scatter chart type) color can be specified on the same level as data, type ... etc