CODEWITHSUNDEEP
javascriptecharts
efxlab
efxlab

Reputation: 73

ECharts visualMap with severals lines for each series

My modified ECharts option code can be copied in this url: https://echarts.apache.org/examples/en/editor.html?c=line-gradient

or on codesandbox.io : https://codesandbox.io/s/apache-echarts-demo-forked-lxns3f?file=/index.js

I would like color only per serie-line with seriesIndex:

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
option = {
  // Make gradient line here
  visualMap: {
        type: 'piecewise',
        top: 50,
        right: 10,
        pieces: [
          {
            max: 30000,
            min: 200,
            color: 'red',
            seriesIndex: [0]
          },
          {
            max: 200,
            min: 100,
            color: 'green',
            seriesIndex: [1]
          }
        ],
        outOfRange: {
          color: 'blue'
        }
      },
  title: [
    {
      left: 'center',
      text: 'Gradient along the y axis'
    },
    {
      top: '55%',
      left: 'center',
      text: 'Gradient along the x axis'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList,
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

Seem it color all the line and ignore seriesIndex, anyone have this experience with ECharts ? I use the ECharts visualMap.pieces.seriesIndex like in the doc: https://echarts.apache.org/en/option.html#visualMap-continuous.seriesIndex

seriesIndex: [0] // or number

Each line should have its own color with seriesIndex ID.

Upvotes: 1

Views: 792

Answers (1)

efxlab
efxlab

Reputation: 73

I solved the issue, seriesIndex is for visualMap object not series. The right setup is, with several visualMap objects:

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", -129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
option = {
  // Make gradient line here
  visualMap: [
        {
          type: 'piecewise',
          top: 50,
          right: 10,
          seriesIndex: 1,
          pieces: [
            {
              // 200 to infinite
              min: 200,
              color: "red",
              label: "Danger",
          },
            {
              // 200 to 150
              max: 200,
              min: 150,
              color: 'green',
            },
            {
              // -50 to infinite
              max: -50,
              // min: -200,
              color: 'orange',
            }
          ],
          outOfRange: {
            color: 'blue'
          }
       },
      {
          type: 'piecewise',
          top: 50,
          right: 10,
          seriesIndex: 0,
          pieces: [
            {
              // 200 to infinite
              min: 200,
              color: "orange",
              label: "Danger",
          },
            {
              // 200 to 150
              max: 200,
              min: 150,
              color: 'brown',
            },
            {
              // -50 to infinite
              max: -50,
              // min: -200,
              color: 'yellow',
            }
          ],
          outOfRange: {
            color: 'cyan'
          }
       },
      ],
  title: [
    {
      left: 'center',
      text: 'Gradient along the y axis'
    },
    {
      top: '55%',
      left: 'center',
      text: 'Gradient along the x axis'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList,
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

Upvotes: 0

Related Questions