Custom Widget Examples

const {a, div, li, p, ul} = van.tags;

function LineChart(options) {
  const chartDom = div({ style: "width: 100%; height: 400px;" });

  setTimeout(() => {
    const myChart = echarts.init(chartDom);
    myChart.setOption(options);

    // Redimensionar automáticamente si cambia el tamaño de la ventana
    window.addEventListener("resize", () => myChart.resize());
  }, 0);

  return chartDom;
}

return div(
  p(
    "👋Hello",
  ),
  ul(
    li(
      "🗺️World",
    ),
    li(
      a({href: "https://vanjs.org/"},
        "🍦VanJS",
      ),
    ),
  ),
  LineChart( {
  xAxis: { type: "category", data: ["Lun", "Mar", "Mié", "Jue", "Vie"] },
  yAxis: { type: "value" },
  series: [{ data: [150, 230, 224, 218, 135], type: "line" }]
})
);