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 i vue-echarts

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.

Vue template

<template class="card-body" x-data="basicBarApp">
    <VueECharts :option="basicLineChart" :style="`height: 300px`" />
</template>

JavaScript

<script>
import VueECharts from 'vue-echarts';
import { getColorCodes } from "../helpers/helper.js";
const basicLineChart = {
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
  color: ["#0d6efd", "#f8f9fa", "#343a40"], // Directly set colors here
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  legend: {
    textStyle: {
      color: "#343a40", // Set color directly
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: "#6B7280", // Set color directly
      },
    },
  },
  axisLine: {
    lineStyle: {
      color: "#f8f9fa", // Set color directly
    },
  },
  grid: {
    top: "5%",
    left: "6%",
    right: "0%",
    bottom: "8%",
  },
};
</script>