初始化ECharts实例

初始化ECharts实例

ECharts实例是使用ECharts进行数据可视化的基础。通过初始化实例，可以将图表与DOM容器绑定，为后续的配置和渲染做好准备。初始化过程需要考虑容器选择、主题设置、渲染方式等多个因素。

基本初始化方法

最基本的初始化方式是通过echarts.init()方法创建实例。这个方法接收一个DOM元素作为参数：

// 获取DOM元素
const domContainer = document.getElementById('chart-container');

// 初始化ECharts实例
const myChart = echarts.init(domContainer);

如果使用jQuery等库，也可以直接传递jQuery对象：

const myChart = echarts.init($('#chart-container')[0]);

初始化参数详解

init()方法实际上支持三个参数：

echarts.init(
  dom: HTMLDivElement|HTMLCanvasElement,
  theme?: string|Object,
  opts?: {
    devicePixelRatio?: number,
    renderer?: 'canvas'|'svg',
    width?: number|string,
    height?: number|string,
    locale?: string
  }
)

主题参数

第二个参数用于指定主题，可以是内置主题名称或自定义主题对象：

// 使用内置dark主题
const chart = echarts.init(dom, 'dark');

// 使用自定义主题
const customTheme = {
  color: ['#c23531','#2f4554','#61a0a8'],
  backgroundColor: '#f5f5f5'
};
const chart = echarts.init(dom, customTheme);

初始化选项

第三个参数opts提供更多初始化配置：

const chart = echarts.init(dom, null, {
  renderer: 'svg',  // 使用SVG渲染器
  devicePixelRatio: 2,  // 适配高清屏
  width: 800,  // 强制宽度
  height: 600  // 强制高度
});

多实例管理

在单页面应用中可能需要管理多个ECharts实例：

const charts = {};

function initChart(containerId) {
  const dom = document.getElementById(containerId);
  charts[containerId] = echarts.init(dom);
  return charts[containerId];
}

function disposeChart(containerId) {
  if (charts[containerId]) {
    charts[containerId].dispose();
    delete charts[containerId];
  }
}

响应式处理

初始化后通常需要处理容器大小变化：

const chart = echarts.init(document.getElementById('chart'));

window.addEventListener('resize', function() {
  chart.resize();
});

// 或者在Vue等框架中
{
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
}

错误处理

初始化时应该添加错误处理：

try {
  const chart = echarts.init(document.getElementById('non-existent'));
  chart.setOption({/*...*/});
} catch (error) {
  console.error('初始化失败:', error);
  // 显示备用内容或错误提示
}

高级初始化场景

延迟初始化

对于动态加载的容器：

// 使用MutationObserver监听DOM变化
const observer = new MutationObserver((mutations) => {
  if (document.getElementById('dynamic-chart')) {
    const chart = echarts.init(document.getElementById('dynamic-chart'));
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Web组件中的初始化

在Web Components中初始化需要注意shadow DOM的隔离：

class MyChart extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div id="chart" style="width:100%;height:400px"></div>
    `;
  }
  
  connectedCallback() {
    const chart = echarts.init(this.shadowRoot.getElementById('chart'));
    // ...配置图表
  }
}

customElements.define('my-chart', MyChart);

性能优化建议

对于大量图表的页面：

// 使用requestIdleCallback延迟初始化非首屏图表
requestIdleCallback(() => {
  const charts = document.querySelectorAll('.lazy-chart');
  charts.forEach(container => {
    echarts.init(container);
  });
});

服务端渲染注意事项

在SSR环境中需要特殊处理：

// 检查是否在浏览器环境
if (typeof window !== 'undefined') {
  const chart = echarts.init(document.getElementById('chart'));
  // ...其他操作
}

销毁实例

正确销毁实例释放资源：

const chart = echarts.init(document.getElementById('chart'));

// 使用完毕后
chart.dispose();

// 清除所有事件监听器
chart.off('click');

实例复用

避免重复初始化：

function getOrCreateChart(containerId) {
  let chart = echarts.getInstanceByDom(document.getElementById(containerId));
  if (!chart) {
    chart = echarts.init(document.getElementById(containerId));
  }
  return chart;
}