如何在项目中集成 Apache ECharts？最新开源库功能解析

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js">script>

<div id="chart" style="width: px; height: px;">div>

const chart = echarts.init(document.getElementById('chart'));
const option = {
  title: { text: '简单柱状图' },
  xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
  yAxis: {},
  series: [{ type: 'bar', data: [, , , , , , ] }]
};
chart.setOption(option);

npm install echarts --save

import * as echarts from 'echarts';

// 创建图表实例
const chart = echarts.init(document.getElementById('chart'));
// 设置配置项
chart.setOption(option);

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

// 初始化和配置图表

const chart = echarts.init(document.getElementById('chart'), null, {
  useCoarsePointer: true, // 开启所有平台的指针吸附
  pointerSize:  // 设置吸附范围（默认 44px）
});

import * as echarts from 'echarts';
import 'echarts-gl';

const option = {
  series: [{
    type: 'scatter3D',
    data: [[, , ], [, , ], [, , ]],
    coordinateSystem: 'cartesian3D'
  }]
};

const option = {
  series: [{
    type: 'line',
    sampling: 'lttb', // 使用 LTTB 算法降采样
    data: largeDataArray // 大规模数据数组
  }]
};

npm install react-echarts --save

import React, { useRef, useEffect } from 'react';
import echarts from 'echarts';

const EChartsComponent = ({ option }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption(option);
    return () => chart.dispose();
  }, [option]);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default EChartsComponent;

npm install echarts --save

import { Injectable } from '@angular/core';
import * as echarts from 'echarts';

@Injectable({ providedIn: 'root' })
export class EChartsService {
  createChart(element: HTMLElement, option: echarts.EChartsOption) {
    const chart = echarts.init(element);
    chart.setOption(option);
    return chart;
  }
}

import { Component, ViewChild, ElementRef } from '@angular/core';
import { EChartsService } from './echarts.service';

@Component({
  selector: 'app-chart',
  template: '
'
})
export class ChartComponent {
  @ViewChild('chartContainer') chartContainer: ElementRef;

  constructor(private echartsService: EChartsService) {}

  ngAfterViewInit() {
    const chart = this.echartsService.createChart(
      this.chartContainer.nativeElement,
      { /* 配置项 */ }
    );
  }
}

<script src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥">script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js">script>

const map = new BMap.Map('mapContainer');
map.centerAndZoom(new BMap.Point(116.404, 39.915), );

const chart = echarts.init(map.getContainer());
const option = {
  series: [{
    type: 'heatmap',
    coordinateSystem: 'bmap',
    data: heatmapData // 热力图数据
  }]
};
chart.setOption(option);

// 异步加载数据
fetch('heatmap-data.json')
  .then(response => response.json())
  .then(data => {
    // 降采样处理
    const sampledData = lttb(data, ); // 假设降采样到 1000 个点
    chart.setOption({ series: [{ data: sampledData }] });
  });

let dataIndex = ;
const dataChunkSize = ;

function loadNextChunk() {
  const chunk = largeDataArray.slice(dataIndex, dataIndex + dataChunkSize);
  chart.appendData({
    seriesIndex: ,
    data: chunk
  });
  dataIndex += dataChunkSize;
  if (dataIndex < largeDataArray.length) {
    setTimeout(loadNextChunk, ); // 控制加载频率
  }
}
loadNextChunk();

// 主线程
const worker = new Worker('data-processor.js');
worker.postMessage(largeDataArray);
worker.onmessage = (event) => {
  chart.setOption({ series: [{ data: event.data }] });
};

// data-processor.js
self.onmessage = (event) => {
  const processedData = processData(event.data);
  self.postMessage(processedData);
};

const option = {
  legend: {
    type: 'scroll',
    itemWidth: ,
    bottom: 
  }
};