Apache ECharts 5.6 เปิดตัวแล้ว

 (echarts.apache.org)
11 คะแนน โดย GN⁺ 2025-04-09 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • Apache ECharts คือ ไลบรารีโอเพนซอร์สสำหรับการแสดงผลข้อมูลด้วย JavaScript ที่ช่วยสร้าง visualization บนเว็บได้อย่างรวดเร็ว
  • รองรับ ประเภทแผนภูมิมากกว่า 20 แบบ และสามารถผสานคอมโพเนนต์หลายรายการได้ จึงยืดหยุ่นสำหรับการสร้างแดชบอร์ดและหน้าจอวิเคราะห์
  • รองรับการเรนเดอร์แบบเรียลไทม์สำหรับ ข้อมูล 10 ล้านรายการ ผ่านการ สลับระหว่าง Canvas และ SVG, progressive rendering และ stream loading
  • ใช้ได้กับเวิร์กโฟลว์การวิเคราะห์หลายมิติผ่านการจัดการแบบ dataset และ การแปลงข้อมูล เช่น การกรอง การจัดกลุ่ม และ regression
  • มีคำอธิบายแผนภูมิที่สร้างอัตโนมัติและ decal pattern ช่วยให้ผู้ใช้ที่ต้องการการเข้าถึงสามารถเข้าใจเนื้อหาและบริบทของแผนภูมิได้ง่ายขึ้น

ภาพรวม Apache ECharts

  • Apache ECharts คือไลบรารีโอเพนซอร์สสำหรับการแสดงผลข้อมูลด้วย JavaScript
  • สามารถดูเว็บไซต์ทางการได้ที่ https://echarts.apache.org
  • หน้าแรกมีประกาศเปิดตัว Apache ECharts 6.1 พร้อมคำแนะนำให้ตรวจสอบ changelog
  • เอกสารเริ่มต้นและตัวอย่างมีให้ที่ Get Started, Demo

ชุดฟีเจอร์

  • แผนภูมิและคอมโพเนนต์

    • ประเภทแผนภูมิที่มีมาให้โดยพื้นฐานมี มากกว่า 20 แบบ
    • มีคอมโพเนนต์ราว 12 รายการให้ใช้งานร่วมกัน และสามารถนำแต่ละองค์ประกอบมาผสมกันได้ตามต้องการ

  • การเรนเดอร์และข้อมูลขนาดใหญ่

    • สามารถสลับระหว่าง การเรนเดอร์ด้วย Canvas และ SVG ได้อย่างง่ายดาย
    • สามารถเรนเดอร์ ข้อมูล 10 ล้านรายการ แบบเรียลไทม์ด้วย progressive rendering และ stream loading

  • การวิเคราะห์ข้อมูล

    • จัดการข้อมูลด้วย dataset
    • รองรับการแปลงข้อมูล เช่น การกรอง การจัดกลุ่ม และ regression ทำให้วิเคราะห์ข้อมูลชุดเดียวกันได้หลายมิติ

  • การออกแบบภาพ

    • ดีไซน์พื้นฐานยึดตามหลักการของ visualization
    • รองรับ responsive design และปรับแต่งได้ด้วยการตั้งค่าที่ยืดหยุ่น

  • คอมมูนิตี้และการขยายความสามารถ

    • คอมมูนิตี้โอเพนซอร์สที่แข็งขันช่วยพัฒนาโครงการอย่างต่อเนื่อง
    • มีส่วนขยายจาก third party หลากหลายให้ใช้งาน

  • การเข้าถึง

    • มีคำอธิบายแผนภูมิที่สร้างอัตโนมัติ
    • decal pattern ช่วยให้ผู้ใช้ที่มีความพิการเข้าใจเนื้อหาและบริบทของแผนภูมิได้

เอกสารอ้างอิงและช่องทางคอมมูนิตี้

  • ผู้ใช้ ECharts สามารถอ้างอิงบทความวิชาการในกิจกรรมที่เกี่ยวข้อง เช่น โครงการ R&D, ผลิตภัณฑ์, งานวิจัย, รายงานทางเทคนิค, ข่าว, หนังสือ, การนำเสนอ, การศึกษา และสิทธิบัตร
  • บทความวิชาการสำหรับอ้างอิงมีให้ในรูปแบบ Visual Informatics, 2018 PDF
  • ช่องทางอัปเดตที่แนะนำ ได้แก่ GitHub, WeChat, Weibo และบัญชี X

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
jhk0530 2025-04-09

echart สวยและใช้ได้ดีครับ โดยส่วนตัวแล้วผมรู้สึกว่าใช้งานง่ายกว่า highcharts
 
GN⁺ 2025-04-09
ความคิดเห็นจาก Hacker News

  • ตอนสร้าง Briefer(https://briefer.cloud) ผมลองไลบรารีสำหรับการทำ Visualization มาแทบทั้งหมด และพูดได้อย่างมั่นใจว่า Apache ECharts ดีที่สุด
    ไลบรารีอื่น ๆ ส่วนใหญ่มักจะหน้าตาไม่สวย ใช้งานยากเพราะต้องควบคุมแบบ imperative หรือไม่ก็ขาดความยืดหยุ่น
    ECharts มีดีไซน์พื้นฐานที่สวย สามารถคำนวณสเปกกราฟแบบ declarative ที่ฝั่งแบ็กเอนด์ แล้วส่งไปยังฟรอนต์เอนด์เฉพาะสเปกที่ต้องเรนเดอร์ได้ และยืดหยุ่นพอที่จะรองรับแทบทุกอย่างที่เครื่องมือ BI แบบดั้งเดิมทำได้
    ไม่เคยต้องขยายไลบรารีเพื่อเพิ่มฟีเจอร์ใหม่เลย สิ่งที่ต้องการมีอยู่ครบแล้ว

    • นอกจากนั้น ECharts ยังเป็นหนึ่งในไลบรารีไม่กี่ตัวใน dependency ของโปรเจกต์ที่อัปเกรดแล้วไม่ต้องกังวลว่าจะพัง
      แม้ตอน อัปเกรดจาก 3.x เป็น 5.x ก็ยังทำงานได้ดีต่อเนื่องด้วยแค่ npm update ให้ความรู้สึกน่าเชื่อถือมาก ซึ่งหาได้ยากในยุคนี้
      เหมาะกับทั้ง SSR และ SPA และส่วนใหญ่เป็น JavaScript ล้วน ๆ จึงทำงานได้ลื่นไหลไม่ใช่แค่กับ React/Vue/Alpine แต่รวมถึงแอป server rendering แบบดั้งเดิมอย่าง Rails/ASP.NET/PHP ด้วย
      ในแอป SSR ทั่วไปอย่าง https://www.jitbit.com/ สามารถใช้ LINQ query บนเซิร์ฟเวอร์สร้างอ็อบเจ็กต์ JSON ของชาร์ตแล้วส่งให้ ECharts ได้ และแม้ส่งอ็อบเจ็กต์ reactive ของ SPA ที่ใช้ Vue ก็ยังทำงานได้ดีเหมือนเดิม
      ถึงจะต้องใช้วิธีเลี่ยงบางอย่าง เช่น แสดงเปอร์เซ็นต์ตัวหนาใน tooltip ของ pie chart ก็แทบไม่ต้องไปขุดซอร์สโค้ด เพราะส่วนใหญ่มีวิธีแก้อยู่แล้ว และหาได้ง่ายด้วยการค้นหาหรือ LLM
    • เหมือนเคยเห็นเมื่อหลายปีก่อน แต่สุดท้ายเลือก Chart.js และจนถึงตอนนี้แทบไม่มีอะไรที่ทำไม่ได้ แม้แต่งาน custom แปลก ๆ แบบใช้ครั้งเดียว
      สำหรับ business analytics ก็โฮสต์เซิร์ฟเวอร์ Metabase เอง
      อยากให้ Metabase มีตัวเลือก visualization มากกว่านี้ แต่การตั้งค่า model และ query ทำได้ง่ายมาก จึงไม่ค่อยมีคำขอที่มีเหตุผลพอจะทำ custom chart
    • ช่วงหลังต้องทำ gradient line chart ที่แต่ละขั้นบนแกน Y แทนสีและต้องผสมกับสีข้างเคียง หลังลองหลายตัวแล้วมีแค่ ECharts ที่สมเหตุสมผล
      ตอนแรกกังวลเพราะไม่มีการผสานกับ React ที่ชัดเจน แต่สุดท้ายก็ใช้งานได้ง่ายเหมือน JavaScript library อื่น ๆ และดีกว่าที่คาด
    • เห็นด้วยกับการประเมินนั้นยาก และ https://plotly.com/javascript/ ก็ดีมากเช่นกัน
      https://observablehq.com/plot/ ก็ติดตามอยู่เรื่อย ๆ และดูเหมือนกำลังไปในทิศทางที่ยอดเยี่ยมจริง ๆ
    • วิธี implementation ดูคล้ายกันมาก เลยสงสัยว่าดีกว่า Chart.js ตรงไหน

  • go-echarts https://github.com/go-echarts/go-echarts ก็น่าแนะนำ
    เมื่อประกาศชาร์ตด้วย Go type แล้ว JSON marshaler ของ Go จะ bind เป็น JSON ให้อัตโนมัติ เคยใช้ในหลายโปรเจกต์ และเมื่อมี issue หรือ PR เข้ามา maintainer ก็ตอบกลับอย่างรวดเร็ว
    วิธี embed ฟังก์ชัน JavaScript และ SQL query ใน Go น่าสนุกดี และข้อมูล·SQL·Go·JavaScript ก็ผสมกันอย่างแปลก ๆ
    ตัวอย่าง Go ที่ดึงข้อมูลจาก DuckDB แล้วสร้างไฟล์ candlestick chart ที่มี JavaScript tooltip อยู่ที่นี่: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • ใช้ Go กับ DuckDB เยอะ แต่จนถึงตอนนี้สำหรับชาร์ตยังใช้ชุด JavaScript/html/template ที่ค่อนข้างหยาบ ๆ อยู่
      อันนี้ดูน่าเอาไปลองเล่น

  • มองว่า ECharts คือดีที่สุดที่มีอยู่ตอนนี้
    แปลกที่ไม่ค่อยโผล่ในรายชื่อไลบรารีชาร์ตหรือผลการค้นหา แต่หลังจากใช้ chart.js, Google Charts, amCharts, Highcharts, ApexCharts มาหมดแล้ว ตอนนี้เราใช้มันในเครื่องมือ/ไลบรารีของเรา https://docs.chartsql.com/

    • น่าจะเพราะเป็นโปรเจกต์จากจีน
      Ant Design Components ก็ยอดเยี่ยมจริง ๆ แต่ไม่ได้เป็นที่รู้จักเท่าที่ควร
    • สงสัยว่า D3.js จะเป็นอย่างไร
      รู้ว่า D3.js เป็นระดับ low-level แต่ถ้ามี AI ก็ง่ายขึ้นพอสมควร
    • ชอบ VisX เพราะควบคุมได้ละเอียด
    • ชอบ Plotly

  • หลังลองหลายไลบรารี ปีที่แล้วทีมก็ตัดสินใจใช้ Apache ECharts และไม่เสียใจเลย
    เอกสารยอดเยี่ยม ประสิทธิภาพดี ตั้งค่าได้สูงแต่ก็ใช้งานง่าย และรองรับชนิดชาร์ตทั้งหมดที่ต้องการ เช่น bar, stacked bar, map, time series ที่ซูม/เลื่อนได้, scatter plot เป็นต้น

    • สงสัยว่าเมื่อเทียบกับ ag-grid charts แล้วเป็นอย่างไร

  • line race ดูเจ๋งจริง ๆ
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    เปิดสวิตช์แล้วการแข่งขันจะเริ่ม
    เพิ่มเติมคือ นอร์เวย์ทำได้ดี

    • ดูเรียบร้อยดี แต่ต่างจากตัวอย่างของ Hans Rosling ที่มีคนอื่นกล่าวถึง แอนิเมชันนี้ไม่ได้ให้ข้อมูลเพิ่มเติม
      แค่แสดงเฟรมสุดท้ายก็สื่อสารข้อความเดียวกันได้เร็วกว่าและเข้าถึงได้ง่ายกว่าเยอะ และเป็น chartjunk แบบหนึ่ง
      https://en.wikipedia.org/wiki/Chartjunk
    • คงต้องยกเครดิตให้ Hans Rosling: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • มีอะไรบางอย่างไม่ตรงกัน
      ข้อมูลดูเหมือนเป็น life-expectancy-table.json แต่ชื่อเรื่องชี้ไปที่ Income
      ไม่รู้ว่าผิดพลาดตรงไหน
    • สงสัยว่าส่วนที่ว่า “นอร์เวย์ทำได้ดี” มีความสัมพันธ์กับ ราคาน้ำมัน มากแค่ไหน

  • หากกำลังมองหาไลบรารีกราฟสำหรับเว็บไคลเอนต์ ขอแนะนำ charts.css ด้วย
    พูดตามตรงคือเหมือนผู้ช่วยชีวิตเลย แนวคิดของมันเรียบง่ายกว่าไลบรารีกราฟส่วนใหญ่มาก แต่ก็สร้างสิ่งเดียวกันได้
    เอาไปใช้กับการเรนเดอร์ฝั่งเซิร์ฟเวอร์แบบเก่า ๆ, htmx ฯลฯ ได้ง่ายมาก
    https://chartscss.org/

    • ในแนวคล้าย ๆ กัน ผมชอบ https://pancake-charts.surge.sh/ ที่เสริมด้วย JavaScript มานานแล้ว
      ทีมกราฟิกของ NYT พัฒนาขึ้น และถูกใช้กับกราฟโควิด
    • Chart.css ค่อนข้างเป็นเพียงหนึ่งในไลบรารีจำนวนมากที่วาดกราฟเส้นได้ และเป็นคนละโลกกับ ECharts โดยสิ้นเชิง
    • ที่บอกว่า “สร้างสิ่งเดียวกันได้” นี่สงสัยว่าเคยดูเดโมของ ECharts หรือเดโมของ amCharts แบบเสียเงิน https://www.amcharts.com/demos หรือเปล่า
      ไม่ได้มีอคติกับ charts.css เองนะ แต่ให้ความรู้สึกเหมือนเอาของเล่นพลาสติกสำหรับเด็กไปเทียบกับกระสวยอวกาศจริง ๆ
      ผมใช้เวลาทำงานส่วนใหญ่พัฒนาแอปวิเคราะห์ธุรกิจหนัก ๆ อย่าง Apache Superset ซึ่งทำด้วยของอย่าง chart.css ไม่ได้
    • เห็นด้วยกับคำตอบอื่น ๆ ว่า ECharts มีฟีเจอร์มากกว่ามาก แต่แนวทาง แปลงตารางข้อมูลที่มีความหมายให้เป็นกราฟ ก็ดูดีทีเดียว
      ผมใช้ ECharts อย่างพอใจอยู่ แต่ในจุดที่ต้องมี sparkline ในทุกแถวของตารางข้อมูล ก็ต้องสร้างอินสแตนซ์ ECharts เยอะเกินไป
      สำหรับการใช้งานแบบนั้น ไลบรารีนี้ดูจะเหมาะดี
    • ตัวอย่างแอนิเมชันของ chartscss น่ารำคาญ และในเชิงฟังก์ชันก็ดูไม่ได้ดีนัก

  • น่าจะดีกว่าถ้าปล่อยให้มีคำว่า Apache ติดอยู่ในชื่อ
    ถ้าบอกว่า “ECharts, แพ็กเกจกราฟ JS” จะรู้สึกเหมือนจะเลิกดูแลภายใน 1 ปี แต่ถ้าบอกว่า “Apache ECharts, แพ็กเกจกราฟ JS” จะรู้สึกว่ายังได้รับการดูแลถึงปีหน้า

    • น่าสนใจที่ผมรู้สึกตรงกันข้ามเลย
      พอเห็นมี Apache ติดอยู่ ผมจะเดาว่าการพัฒนาหยุดไปแล้ว เป็นโปรเจกต์เลกาซี หรือแค่คอยบำรุงรักษาเท่านั้น
      ยังมีคำพูดว่า “Apache คือที่ที่โปรเจกต์ไปตาย” ด้วย

  • ดีใจที่ ECharts ได้รับการยอมรับอย่างที่ควร
    จะบอกว่าเป็นไลบรารี visualization แบบโอเพนซอร์สที่ดีที่สุดในปัจจุบันก็ไม่เกินจริง
    โดยพื้นฐานใช้ Canvas จึงเร็วกว่าไลบรารีใด ๆ ที่ผมเคยใช้ และยืดหยุ่นพอให้วางวิดเจ็ตอย่าง tooltip แบบกำหนดเองลงบนกราฟได้เอง
    ยังให้เมทาดาต้าจำนวนมาก เช่น ตำแหน่งของจุดใดจุดหนึ่งภายในกราฟที่เรนเดอร์แล้ว ทำให้นำไปใช้ในโค้ดได้ดีมาก ใช้กับเว็บแอปเลกาซีได้ดีมาก และในเว็บไซต์ยังมีตัวเลือกให้ดาวน์โหลด custom build ได้ด้วย
    การจัดการข้อมูลแบบสตรีมมิงก็ยอดเยี่ยม แอนิเมชันระหว่างการเปลี่ยนแปลงข้อมูลลื่นมาก
    ผมใช้มาเกือบ 7 ปีในโปรเจกต์ production และโปรเจกต์ส่วนตัวหลายงาน และยังคงเป็นตัวเลือกแรก เอกสารก็พัฒนาขึ้นมากในช่วงที่ผ่านมา
    บั๊กเก่า ๆ อย่างปัญหาการจัดการค่า 0 บนสเกลลอการิทึมอาจน่าหงุดหงิดบ้าง แต่มีวิธี workaround และแทบไม่เคยเจอบั๊กที่ทำให้ติดขัดในกรณีใช้งานทั่วไปเลย

    • ไม่รู้ว่าทำไมถึงเห็นในบทเปรียบเทียบไลบรารีกราฟน้อยขนาดนี้
      ในหน้า Wikipedia ของไลบรารีกราฟ JavaScript ก็ไม่มี และผมไปรู้จักโดยบังเอิญผ่าน Apache Superset

  • ในเดโมเว็บแบบเร็ว ๆ มีแค่ไลบรารีนี้ที่ทำให้ดูและจัดการกราฟขนาดใหญ่มากแบบโต้ตอบได้ด้วยคอมโพเนนต์ GraphGL
    ดูเหมือนจะไม่ใช่ไลบรารี visualization ที่เป็นที่รู้จักมากนัก แต่ก็น่าสนใจทีเดียว

  • กำลังเพิ่งดูไลบรารีกราฟสำหรับ React/React Native อยู่พอดี และ Apache ECharts ดูเป็นตัวเลือกที่ดีสำหรับการทำ data visualization ข้ามแพลตฟอร์ม
    ทั้ง react-echarts(https://github.com/hugocxl/react-echarts) และ react-native-echarts(https://github.com/wuba/react-native-echarts) ที่ลองค้นดูเหมือนจะยังพัฒนาอย่างแข็งขัน และการอยู่ภายใต้ Apache ก็เป็นข้อได้เปรียบใหญ่ในแง่อนาคตการพัฒนาและการบำรุงรักษา