ECharts Configuration‑Driven Development: From Basics to Advanced Component Design

The article begins by noting that ECharts has become a de‑facto standard third‑party library for front‑end developers, often listed on resumes as a "proficient" skill, and explains the author’s motivation to test candidates’ real understanding of the library.

It then asks why ECharts should be chosen for big‑screen projects, emphasizing low cost and high efficiency thanks to a mature community, abundant demo resources, and a rich set of built‑in components.

Key concepts of ECharts are introduced: it is a JavaScript‑based open‑source visualization library capable of charts, maps, and graphic rendering. Its three core features are configuration‑driven, event‑driven, and graphic capabilities.

Configuration‑driven means that updating the chart is as simple as calling chart.setOption(newOption). A minimal example shows switching from state A to state B by calling chart.setOption(optionA) and later chart.setOption(optionB).

The article provides a Vue 3 component template that initializes an ECharts instance and updates it every second with new random data, illustrating the dynamic nature of configuration‑driven updates.

Next, the graphic module is presented as a lightweight way to add custom images and text to charts. Sample code shows how to add an image and two text elements using the graphic array:

option = {
  graphic: [
    { type: 'image', style: { image: 'https://pic.zhangshichun.top/pic/circle.png', width: 150, height: 150 }, top: 'middle', left: 'center' },
    { type: 'text', style: { x: 100, y: 150, text: `鸡你太美`, fill: '#fff', textAlign: 'center', fontSize: 14 } },
    { type: 'text', style: { x: 100, y: 180, text: `唱跳rap`, fill: '#fff', textAlign: 'center', fontSize: 14 } }
  ]
}

Animation capabilities are then explored. A keyframe animation example rotates an image element continuously:

{
  transition: 'rotation',
  originX: 75,
  originY: 75,
  keyframeAnimation: {
    duration: 3000,
    loop: true,
    keyframes: [
      { percent: 0.5, easing: 'linear', rotation: Math.PI },
      { percent: 1,   easing: 'linear', rotation: Math.PI * 2 }
    ]
  }
}

Another example shows how to generate random rotation values on each interval, demonstrating enter/leave/update animations.

The article then outlines the design of a reusable base component ( BaseECharts) that adapts to container size, supports theming, and displays a placeholder when data is empty. Important features include:

Automatic width/height adaptation using ResizeObserver or a Vue hook like useElementSize.

Theme registration via ECharts.registerTheme('dark', theme) and usage in ECharts.init(chartEl, 'dark').

Empty‑state handling with a boolean empty prop and v-show toggling between the chart container and a NoData component.

Finally, the article summarizes the learning outcomes: understanding configuration‑driven thinking, mastering basic ECharts concepts, using graphic and animation, and building a flexible base component that can accelerate large‑screen dashboard development.