Echarts

There are few options on how to include/import Echarts into your project.

Install from NPM

Install the Echarts Js library from command prompt from the root directory of the project:

npm install echarts --save

Add the echart js file link.

<script src="assets/libs/echarts/echarts.js"></script>

Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.

import { getColorCodes } from "../helpers/helper.js";

Below the example how to use the package and make it working ApexTree on any page.

Laravel

<div class="card-body" x-data="basicBarApp">
    <div class="h-80" x-ref="basicBarChart" data-chart-colors="[bg-sky-500, bg-gray-200, bg-gray-800]" data-chart-dark-colors="[bg-sky-500, bg-dark-800, bg-dark-100]"></div>
</div>

<script src="assets/libs/echarts/echarts.js"></script>

JavaScript

import { getColorCodes } from "../helpers/helper.js";

document.addEventListener("alpine:init", () => {
    Alpine.data("basicBarApp", () => ({
        basicBarChart: null,
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ],
        init() {
            // Reload chart on window resize
            window.addEventListener('resize', this.renderChart.bind(this));
        },
        renderChart() {
            // Handle the logic for resizing
            if (this.basicBarChart)
                this.basicBarChart.dispose();
            this.colorCodes = getColorCodes(this.$refs.basicBarChart.dataset);
            this.basicBarChart = echarts.init(this.$refs.basicBarChart, 'light');
            this.basicBarChart.setOption(this.options);
        },
        get options() {
            return {
                series: this.series,
                color: this.colorCodes,
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                legend: {
                    textStyle: {
                        color: this.colorCodes[2]
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: this.colorCodes[1] // Change this to the color you want for the horizontal lines
                        }
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: this.colorCodes[1]
                    }
                },
                grid: {
                    top: '5%',
                    left: '5%',
                    right: '0%',
                    bottom: '6%',
                },
            };
        }
    }));
});