Large screen data display implementation

Data Visualization Requirements Analysis

The core objective of dashboard data display is to intuitively present key business metrics, typically requiring the following common needs:

1. Real-time Requirements: Monitoring dashboards require second-level data updates
2. Multi-dimensional Display: Simultaneously present trend analysis, distribution proportions, geographic information, etc.
3. Interactive Capabilities: Support operations like drill-down, filtering, and linkage
4. Responsive Layout: Adapt to display devices of different sizes

An e-commerce dashboard case includes the following modules:

• Real-time transaction amount (digital flip counter)
• Sales trend (line chart)
• Category distribution (donut chart)
• Regional distribution (heat map)
• Top 10 products (bar chart)

ECharts Core Configuration Analysis

ECharts configures charts through the option object, with a typical structure as follows:

const option = {
  title: {
    text: 'Sales Trend',
    subtext: 'Last 30 days data',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Online', 'Offline'],
    top: 50
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', ...]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Online',
      type: 'line',
      smooth: true,
      data: [120, 132, ...]
    }
  ]
};

Key configuration items explained:

• grid: Controls the position and size of the chart drawing area
• dataZoom: Implements zooming functionality
• visualMap: Used for visual mapping in heat maps, etc.
• toolbox: Built-in tools like exporting images and data views

Dynamic Data Update Solutions

Three typical methods for real-time data updates:

WebSocket Push Solution

const socket = new WebSocket('wss://api.example.com/realtime');
socket.onmessage = (event) => {
  const newData = JSON.parse(event.data);
  myChart.setOption({
    series: [{
      data: newData.series
    }]
  });
};

Polling Solution

function fetchData() {
  fetch('/api/latest').then(res => res.json())
    .then(data => {
      myChart.setOption({...});
      setTimeout(fetchData, 5000);
    });
}

Differential Data Update

// Only update changed data points
function updateChart(prevData, newData) {
  const changes = [];
  newData.forEach((item, idx) => {
    if (item.value !== prevData[idx].value) {
      changes.push({idx, value: item.value});
    }
  });
  myChart.setOption({
    series: [{
      data: changes
    }]
  });
}

Dashboard Layout Techniques

Responsive Adaptation Solution

.chart-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.chart-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Multi-Chart Linkage Example

// Unified handling of click events across multiple charts
charts.forEach(chart => {
  chart.on('click', (params) => {
    const filterValue = params.name;
    charts.forEach(c => {
      c.dispatchAction({
        type: 'highlight',
        name: filterValue
      });
    });
  });
});

Performance Optimization Practices

Large Data Volume Rendering Solution

// Use large data mode
series: [{
  type: 'line',
  large: true,
  largeThreshold: 2000,
  data: [...largeData]
}]

Canvas vs. SVG Rendering Choice

// Select renderer based on scenario
const chart = echarts.init(dom, null, {
  renderer: dataPoints > 1000 ? 'canvas' : 'svg'
});

Memory Management Techniques

// Dispose instances promptly
window.addEventListener('resize', () => {
  chart.resize();
});

// Pause rendering when page is not visible
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    chart.dispose();
  } else {
    chart = echarts.init(dom);
  }
});

3D Visualization Extension

ECharts GL for 3D Charts:

option = {
  globe: {
    environment: 'starfield',
    baseTexture: '/textures/world.jpg',
    heightTexture: '/textures/bathymetry_bw.png',
    displacementScale: 0.1,
    shading: 'realistic',
    light: {
      ambient: {
        intensity: 0.1
      },
      main: {
        intensity: 1.5
      }
    }
  },
  series: {
    type: 'bar3D',
    coordinateSystem: 'globe',
    data: [...],
    barSize: 0.6
  }
}

Theme Customization Development

Custom Theme Implementation Steps:

1. Create theme file custom-theme.js

echarts.registerTheme('custom', {
  color: ['#dd4444', '#fec42c', '#80F1BE'],
  backgroundColor: '#1a1a1a',
  title: {
    textStyle: { color: '#fff' }
  },
  legend: {
    textStyle: { color: '#aaa' }
  }
});

2. Apply the theme

const chart = echarts.init(dom, 'custom');

3. Dynamic theme switching

function changeTheme(themeName) {
  chart.dispose();
  chart = echarts.init(dom, themeName);
  chart.setOption(option);
}

Exception Handling Mechanism

Common Error Handling Solutions:

// Empty data state handling
myChart.setOption({
  graphic: {
    type: 'text',
    left: 'center',
    top: 'middle',
    style: {
      text: 'No data available',
      fill: '#999',
      fontSize: 16
    }
  }
});

// Error catching
try {
  myChart.setOption(complexOption);
} catch (e) {
  console.error('Configuration error:', e);
  showFallbackUI();
}

// Network exception handling
fetch('/api/data').catch(error => {
  myChart.showLoading('failed', {
    text: 'Data loading failed',
    color: '#ff4d4f'
  });
});

Mobile Adaptation Solutions

Touchscreen Interaction Optimization Code:

// Disable default gestures
chart.getZr().on('touchstart', (e) => {
  e.event.preventDefault();
});

// Pinch-to-zoom implementation
let startDistance;
chart.getZr().on('touchstart', (e) => {
  if (e.touches.length > 1) {
    startDistance = getDistance(e.touches[0], e.touches[1]);
  }
});

chart.getZr().on('touchmove', (e) => {
  if (e.touches.length > 1) {
    const currentDistance = getDistance(e.touches[0], e.touches[1]);
    const scale = currentDistance / startDistance;
    chart.dispatchAction({
      type: 'dataZoom',
      start: 100 - scale * 100,
      end: scale * 100
    });
  }
});

Server-Side Rendering Solution

Node.js Chart Image Generation:

const echarts = require('echarts');
const { createCanvas } = require('canvas');

// Create virtual Canvas
const canvas = createCanvas(800, 600);
const chart = echarts.init(canvas);

// Set options and render
chart.setOption({
  title: { text: 'Server-side Rendered Chart' },
  series: [{ type: 'bar', data: [12, 28, 6, 34] }]
});

// Output PNG image
const buffer = canvas.toBuffer('image/png');
require('fs').writeFileSync('output.png', buffer);

Accessibility Support

ARIA Attribute Enhancement Example:

// Add accessibility descriptions to charts
chart.setOption({
  aria: {
    enabled: true,
    description: 'This chart shows the sales trend over the past six months, including comparisons between online and offline channels...'
  },
  series: [
    {
      name: 'Online Channel',
      aria: {
        enabled: true,
        decal: {
          show: true,
          decals: ['→']
        }
      }
    }
  ]
});

// Keyboard navigation support
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') {
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: (currentIndex + 1) % dataLength
    });
  }
});