ECharts: 改变线条颜色.我选择了2种颜色.这两种颜色都显示为奇数和偶数的风格

问题描述 投票:-1回答:1

我想要 ro 去掉那个自定义的颜色,并添加那个颜色作为循环,就像第一种颜色红色,然后绿色.奇数偶数奇数偶数。

option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            itemStyle: { color: 'green'},

        },
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
         itemStyle: { color: 'red'},
        }

         ]
    };
javascript charts linechart echarts
1个回答
1
投票

你的计划是完美的,是什么阻止了你做?是什么问题阻挡了你下一步的行动?

更新。 请不要把问题的标题和正文分开,我很难理解你的意思。标题应该只包含问题的小结。

回答你的问题:控制颜色最简单的选择是用预计算的颜色生成系列。

就像这样。

  var myChart = echarts.init(document.getElementById('main'));

  var data = [
    [120, 132, 101, 134, 90, 230, 210],
    [340, 280, 310, 360, 280, 310, 410],
    [520, 532, 490, 480, 520, 550, 570],
    [760, 732, 790, 780, 820, 750, 770],
  	[820, 932, 901, 934, 1290, 1330, 1320],
  ];

  var series = data.map((sData, idx) => (
    {
      name:  'series' + idx,
      type:  'line',
      data:  sData,
      color: idx % 2 === 0 ? 'red' : 'green',
    }
  ))

  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: series,
  };

  myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
© www.soinside.com 2019 - 2024. All rights reserved.