Introducing the Fresh Apache ECharts project by Dennis Rutjes.



Getting Started with Fresh and Apache ECharts

Before we dive into the world of charting, let's make sure you have everything set up correctly. If you haven't already, initialize your Fresh project by following the steps in the Fresh Getting Started Guide. This guide provides you with essential information to get your project up and running smoothly.

Once your Fresh project is ready, it's time to harness the power of Apache ECharts. ECharts is a versatile and feature-rich charting library that offers a wide range of chart types and customization options. You can explore all the possibilities and find inspiration in the Apache ECharts Examples.

Setting Up Your Chart Component

To seamlessly integrate Apache ECharts into your Deno Fresh application, we've got a handy component for you: ReactECharts. This component allows you to create and display charts with ease. Let's take a closer look at how to use it.

Here's a snippet of the ReactECharts component for your reference:

import { useEffect, useRef } from "preact/hooks";
import { CSSProperties, JSX } from "preact";
import type {
    ECharts,
    EChartsOption,
    SetOptionOpts
} from "https://esm.sh/echarts@5.4.3/dist/echarts.min.js?target=es2022";
import { getInstanceByDom, init } from "https://esm.sh/echarts@5.4.3/dist/echarts.min.js?target=es2022";
import { initThemes } from "./theme.tsx";

export interface ReactEChartsProps {
    option: EChartsOption;
    style?: CSSProperties;
    settings?: SetOptionOpts;
    loading?: boolean;
    theme?: "light" | "dark";
}

export default function ReactECharts({
    option,
    style,
    settings,
    loading,
    theme,
}: ReactEChartsProps): JSX.Element {
    // Initialize themes (optional)
    initThemes();

    // Create a reference to the chart container
    const chartRef = useRef<HTMLDivElement>(null);

    // Use useEffect to handle chart initialization and updates
    useEffect(() => {
        // Initialize the chart
        let chart: ECharts | undefined;
        if (chartRef?.current !== null) {
            chart = init(chartRef.current, theme, {
                renderer: "svg"
            });
        }

        // Add chart resize listener
        function resizeChart() {
            chart?.resize();
        }

        globalThis.addEventListener("resize", resizeChart);

        // Cleanup function
        return () => {
            chart?.dispose();
            globalThis.removeEventListener("resize", resizeChart);
        };
    }, [theme]);

    useEffect(() => {
        if (chartRef.current !== null) {
            const echartInstance = getInstanceByDom(chartRef.current);
            echartInstance?.setOption(option, settings);
        }
    }, [option, settings, theme]);

    useEffect(() => {
        if (chartRef.current !== null) {
            const echartInstance = getInstanceByDom(chartRef.current);
            loading === true ? echartInstance?.showLoading() : echartInstance?.hideLoading();
        }
    }, [loading, theme]);

    return <div ref={chartRef} style={{ width: "100%", height: "100px", ...style }} />;
}

Using ReactECharts in Your Project

Now that you have the ReactECharts component at your disposal, you can easily create and customize charts in your Deno Fresh project. Here's a quick overview of how to use it:

  1. Import the ReactECharts component into your project.
  2. Define your chart's configuration using the EChartsOption object.
  3. Customize the appearance and behavior of your chart by specifying the settings and theme props.
  4. Set the loading prop to true if you want to show a loading indicator while your chart is loading data.
  5. Place the ReactECharts component within your project's JSX, providing the necessary props.
import ReactECharts from "./ReactEChart.tsx";

// Your chart configuration
const chartOption: EChartsOption = {
    // ... (configure your chart here)
};

// In your component's JSX:
<ReactECharts
    option={chartOption}
    style={{ width: "100%", height: "300px" }}
    settings={{ animationDuration: 1000 }}
    loading={false}
    theme="light"
/>

Additional Resources

  • If you're interested in using Apache ECharts with React and TypeScript, be sure to check out this article on dev.to. It provides valuable insights and tips on combining ECharts with popular web technologies.

Conclusion

With Apache ECharts and the ReactECharts component, you have the tools you need to create dynamic and visually appealing charts in your Deno Fresh project. Whether you're building a data dashboard or adding charts to your web application, ECharts makes it easy to convey information effectively. Explore the possibilities, experiment with different chart types, and watch your project come to life with interactive data visualizations. Happy charting!