working in dioxus 0.5?

[malmstroem]

Does anybody know if Charming is working with dioxus 0.5? I am building a demo site and was inspired by the dioxus-web-demo example. However, I get Uncaught ReferenceError: echarts is not defined.

[LukaOber]

I am pretty sure this library will only work with dioxus as a web renderer. You need to add apache-echarts in your index.html or equivalent for dioxus, did you do that? (I am not very familiar with dioxus).

[malmstroem]

Thanks for the fast answer. I am targeting the web platform, so I think it should work. I include the following:

let stylesheets: Vec<String> = vec![
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js".into(),
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js".into(),
];

and then render the graph:

use_future(|| async move {
    let renderer: WasmRenderer = WasmRenderer::new(600, 400);
    let chart = Chart::new()
        .x_axis(
            Axis::new()
                .type_(AxisType::Category)
                .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]),
        )
        .y_axis(Axis::new().type_(AxisType::Value))
        .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260]));
    console::log_1(&chart.to_string().into());
    renderer.render("chart", &chart).unwrap()
});

and then use rsx!:

rsx! {
    body { class: "bg-gray-100",
      for href in &stylesheets {
          link { rel: "stylesheet", href: "{href}", "type": "text/script" }
      }
      div {
        style: "width: 100%; text-align: center;",
        div {
          id: "chart",
          style: "display: inline-block;",
        }
      }
  }
}

this is the line in the js generated by charming (dist/assets/dioxus/dioxus-charming.js) that throws the error:

    const ret = echarts.init(getObject(arg0), getStringFromWasm0(arg1, arg2), takeObject(arg3));

I really appreciate your help!

[LukaOber]

Do you also include echarts in your dioxus.toml file?

[malmstroem]

Working! Thanks so much!