最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ECharts: change line color - Stack Overflow

programmeradmin10浏览0评论

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.

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.

Share Improve this question edited Mar 2, 2019 at 21:47 gigapico00 asked Mar 2, 2019 at 13:41 gigapico00gigapico00 4672 gold badges9 silver badges25 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 14

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

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

发布评论

评论列表(0)

  1. 暂无评论