Bölüm 3) echarts.js는 그래픽과 동일합니다.

Tekrar merhaba, bu aralar "The Expanse" adlı diziyi izledik. (6세존). Henüz hala etkisinden kurtulamamışken ilk dashboard'u The Expanse ile ilgili verileri kullanarak yapmaya karar verdim.

Öncelikle 포트폴리오 için 레이아웃 oluşturacağım. Layout içerisinde konularına göre ayrılmış bir Sidebar olacak. Belki sonradan Footer ve Header da ekleriz ama şimdilik gerek yok.

사이드바.tsx:

import type { NextPage } from 'next'

const SideBar: NextPage = () => {
  return (
    <div className="w-72 bg-black text-white h-screen">
      Sidebar
    </div>
  )
}

export default SideBar

레이아웃.tsx:

import Sidebar from "./Sidebar";
import Head from "next/head";
import React from "react";

type Props = {
  children: React.ReactNode
}

const Layout: React.FC<Props> = ({ children }) => {
  return (
    <div className="flex">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Sidebar/>
      <main>{children}</main>
    </div>
  )
}

Bunun için, 페이지 klasörü altında "the-expanse"adında yeni bir sayfa oluşturuyorum ve Layout içine ilk grafiğimi oluşturacağım.

import type { NextPage } from 'next'
import Layout from "../components/Layout"

const TheExpansePage: NextPage = () => {
  return (
    <Layout>
    </Layout>
  )
}

export default TheExpansePage

İlk grafiğim en basitinden bir çubuk grafik (bar chart) olacak ve Güneş sistemindeki gezegenlerin uydu sayılarını gösterecek.

ReactEcharts의 ekliyoruz 및 옵션은 다음과 같습니다. Değişkenimiz bir grafik oluşturmak için en az x ve y eksinindeki değerleri ve grafiğin tipini içermelidir.

import React from "react";
import ReactEcharts from "echarts-for-react";
import type { NextPage } from 'next'

const Orbit: NextPage = () => {
  const option = {
    xAxis: {
      type: 'category',
      data: [ 'Mercury','Venus','Earth', 'Mars','Jupiter', 'Saturn','Uranus', 'Neptune'],
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0,0,1,2,79,82,27,14],
        type: 'bar',
      }
    ]
  };
  return (
    <div className="w-96 h-96">
      <ReactEcharts option={option} />
    </div>

  )
}
export default Orbit;

the-expanse.tsx sayfasına Orbit bileşenimizi(component) ekledikten sonra ilk grafiğimizi oluşturmuş oluyoruz.

import type { NextPage } from 'next'
import Layout from "../components/Layout"
import Orbit from "../components/charts/Orbit";

const TheExpansePage: NextPage = () => {
  return (
    <Layout>
      <Orbit/>
    </Layout>
  )
}

export default TheExpansePage

Grafiğimizde bazı gezegen isimleri görünmüyor. Bunun için x ekseninde bulunan isimleri açılı gösterebiliriz.

      axisLabel: {
        rotate: 60
      },

Sadece veri serisini verdik ve grafik veri setimize göre auto scale edildi. Yani veri 0-82 aralığındaydı ve grafiğim 0-100 aralığında oluştu.

Verinin daha rahat algılanabilmesi için arca planı renklendirebiliriz.

Grafiğe başlık eklemek için:

    title: {
      text: 'Number of Moons'
    },

Üzerine geldiğimizde uydu sayısını göstermesini istersek (tooltip): option değişkenine tooltip özelliğini eklememiz yeterli.

tooltip: {},

Grafik çubuklarının rengini değiştirmek için de color özelliği eklememiz yeterli.

손 두루무:

import React from "react";
import ReactEcharts from "echarts-for-react";
import type { NextPage } from 'next'

const Orbit: NextPage = () => {
  const option = {
    title: {
      text: 'Number of Moons'
    },
    tooltip: {},
    color: '#60a4b3',
    xAxis: {
      type: 'category',
      data: [ 'Mercury','Venus','Earth', 'Mars','Jupiter', 'Saturn','Uranus', 'Neptune'],
      axisLabel: {
        rotate: 60
      },
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0,0,1,2,79,82,27,14],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)'
        }
      }
    ]
  };
  return (
    <div className="w-96 h-96">
      <ReactEcharts option={option} />
    </div>

  )
}
export default Orbit;

Reference

이 문제에 관하여(Bölüm 3) echarts.js는 그래픽과 동일합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ozlemts/bolum-3-echartsjs-ile-ilk-grafigimiz-26fb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Bölüm 3) echarts.js는 그래픽과 동일합니다.

Reference

좋은 웹페이지 즐겨찾기