Alpine with Echarts

[mccarlosen]

I cannot determine the error. But it does not allow the correct functioning of the echarts graph. When you interact with the legend it gives an error.

However when using vanilla js it works fine.

Here are other examples:

Alpine-with-echarts-1
Alpine-with-echarts-2
Echarts-without-Alpine

Any ideas I appreciate.

[KevinBatdorf]

You could change it to something like this:

  init() {
    window.echart = echarts.init(this.$el);
    window.echart.setOption(this.option);
  }

[mccarlosen]

Awesome @KevinBatdorf ... simple solution. Thanks for such a quick response.

[SimoTod]

You can also define a variable outside the reactive part (so it's still encapsulated in your component and it won't conflict if you have multiple graphs on the same page)

import * as echarts from "echarts";
import Alpine from "alpinejs";

window.Alpine = Alpine;

Alpine.data("echart", () => {
  let echart;
  {
    option: {
      ...
    },
    init() {
      echart = echarts.init(this.$el);
      echart.setOption(this.option);
    }
  }
);

Alpine.start();

[mccarlosen]

@KevinBatdorf Thanks for the recommendations and corrections. You are right every time the component is updated, init() is executed. As for if the first chart overrides the second chart, it doesn't happen. Both work as expected.

[mccarlosen]

I think it looks better this way:

<div class="echarts"
x-data="{
  options: {
    ...
  },
  resizeHandler: $store.utils.$debounce(function() {
    var echart = echarts.getInstanceByDom(this.$el);
    echart.resize();
  }, 100, { leading: true }),
  init() {
    window.echart = echarts.init($el);
    window.echart.setOption(this.options);
  }
}" @resize.window="resizeHandler()">
</div>

So far I can't find a flexible way to extract the Alpine.data method for a Livewire component. I keep investigating. Thank you very much for your help.

[SimoTod]

If you want to inline x-data and you are not bothered about accessing the echart variable directly outside init (I see you can get it back using echarts.getInstanceByDom anyway), you can do

  init() {
    let echart = echarts.init($el);
    echart.setOption(this.options);
  }

By the way, putting that on window is not a problem, the main thing to remember as Kevin said is that if you have 2 components using the same variable and after you try to access window.echart wanting the first graph, you'll get the second one.
This won't be a problem with your current code since you do var echart = echarts.getInstanceByDom(this.$el); echart.resize(); but if you had window.echart.resize(); and 2 graphs instead it wouldn't work correctly for the first one.

[mccarlosen]

@SimoTod If it makes a lot of sense. Thanks.

[carlos-verdes]

Just to share what it worked for me based on all previous answers:

Alpine.data("chart", () => {
  let chart;
  return {
    init() {
      chart = echarts.init(this.$el);

     // init logic here
    },
    resize: {
      ["@resize.window.debounce"]() {
        if (chart) {
          chart.resize();
        }
      }
    }
  }
});

Then to use the chart with resize you just need to x-bind resize:

<div x-data="chart" x-bind="resize">
...