JohnCoene / echarts4r

🐳 ECharts 5 for R
http://echarts4r.john-coene.com/
Other
585 stars 82 forks source link

how to set Gradient Colors in e_color #626

Closed enriquepravia closed 1 month ago

enriquepravia commented 1 month ago

Hey there!

I'm finding difficulties to set gradient colors for a pie chart. What I need to accomplish is to set a gradient color for each value as I would do in ts:

export const COLORS: LinearGradientObject[] = [
  // Value 1
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    {
      offset: 0,
      color: '#C7C7C7',
    },
    {
      offset: 1,
      color: '#ECCDF1',
    },
  ]),
  // Value 2
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    {
      offset: 0,
      color: '#F975A0',
    },

    {
      offset: 1,
      color: '#D433DA',
    },
  ]),
  // Value 3
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    {
      offset: 0,
      color: '#3289FC',
    },
    {
      offset: 1,
      color: '#1139FD',
    },
  ]),
  // Value 4
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    {
      offset: 0,
      color: '#8F7EFE',
    },
    {
      offset: 1,
      color: '#5AB6FB',
    },
  ]),
  // Value 5
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    {
      offset: 0,
      color: '#31CDFC',
    },
    {
      offset: 1,
      color: '#83EBAB',
    },
  ]),
  // Value 6
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    {
      offset: 0,
      color: '#FF64210',
    },
    {
      offset: 1,
      color: '#F41M8A',
    },
  ]),
];

Trying to follow https://github.com/JohnCoene/echarts4r/issues/151 I have tried this approach for the R code:

df |>
  e_charts(class) |> 
  e_pie(value) |> 
  e_title("Pie chart") |>
  e_color(list(
            list(
              list(offset = 0, color = '#3289FC'), 
              list(offset = 1, color = '#1139FD')),
            list(
              list(offset = 0, color="#C7C7C7"),
              list(offset = 1, color="#ECCDF1")),
            list(
              list(offset = 0, color="#31CDFC"),
              list(offset = 1, color="#83EBAB")),
            list(
              list(offset = 0, color="#F975A0"),
              list(offset = 1, color="#D433DA")),
            list(
              list(offset = 0, color="#FF64210"),
              list(offset = 1, color="#F41M8A"))
            )
          )

with no success.

Any help would be appreciated. Thanks in advance!

enriquepravia commented 1 month ago

I finally managed to solve it. I was failing at defining the linear gradient properties in a proper way. For anyone who might need a solution, here's mine:

df |>
  e_charts(class) |> 
  e_pie(value) |> 
  e_title("Pie chart") |>
  e_color(list(
                list(type = 'linear', x = 0, y = 1, x2 = 1, y2 = 1,
                     colorStops = list( list(offset = 0, color = '#3289FC'), list(offset = 1, color = '#1139FD'))),
                list(type = 'linear', x = 0, y = 1, x2 = 1, y2 = 1, 
                     colorStops = list( list(offset = 0, color = '#C7C7C7'), list(offset = 1, color = '#ECCDF1'))),
                list(type = 'linear', x = 0, y = 1, x2 = 1, y2 = 1, 
                     colorStops = list( list(offset = 0, color = '#31CDFC'), list(offset = 1, color = '#83EBAB'))),
                list(type = 'linear', x = 0, y = 1, x2 = 1, y2 = 1, 
                     colorStops = list( list(offset = 0, color = '#F975A0'), list(offset = 1, color = '#D433DA'))),
                list(type = 'linear', x = 0, y = 1, x2 = 1, y2 = 1, 
                     colorStops = list( list(offset = 0, color = '#FF64210'), list(offset = 1, color = '#F41M8A')))
              )
          )

Link to doc that helped me find a way out: https://echarts.apache.org/en/option.html#color

Cheers!

JohnCoene commented 1 month ago

Thanks for sharing, sorry to see you ran into trouble with this.