echarts如何使用：前端图表落地实操

echarts如何使用分为CDN引入、npm包引入两种主流接入方式，你需要准备一个具备固定宽高的DOM容器，初始化实例后传入配置项option，配置项里包含图表类型、x轴、y轴、系列数据、提示框等字段，修改数据时调用setOption方法更新，CDN方式适合快速演示、简单后台页面，npm方式适配Vue、React工程化项目，该方法的适用边界是页面环境支持JavaScript运行，静态纯文本页面、关闭JS的浏览器环境无法渲染图表。

echarts如何使用：CDN快速引入流程

你在HTML页面的head标签内，通过script标签引入ECharts官方CDN地址，引入完成后页面全局会挂载echarts对象。在body中创建一个div标签，必须设置width和height样式，单位可以是px或者百分比，百分比容器需要保证父元素存在明确高度，否则图表渲染区域尺寸为0，看不到图形。在script代码块里用echarts.init(dom节点)创建图表实例，再定义option对象，把图表类型series.type、坐标轴数据、series.data填充进去，最后调用实例.setOption(option)完成渲染。

示例基础option结构可以直接复制，series是数组，一个对象对应一组图表系列，type设为bar就是柱状图，line为折线图，pie为饼图，饼图不需要配置xAxis和yAxis。tooltip控制鼠标悬浮提示，legend控制图例显示位置，grid调整图表和容器边缘的间距，减少文字被截断的情况。你修改数据只需要修改option内对应data数组，再次执行setOption即可刷新图表，不需要重复执行init初始化。

echarts如何使用：npm工程化接入流程

你在项目根目录执行npminstallecharts安装依赖包，安装完成后在组件脚本顶部import*asechartsfrom'echarts'引入完整包，完整包体积偏大，追求加载速度时可以按需引入模块，只加载需要的图表类型和组件。Vue项目要在DOM挂载完成的生命周期钩子内执行初始化，React项目放在useEffect钩子中，钩子依赖数组为空，避免重复生成多个实例，重复实例会造成图表重叠、内存占用上升。容器DOM销毁前，调用实例.dispose()释放资源，防止内存持续堆积。

按需引入写法可以缩减打包体积，你先引入echarts核心模块，再单独引入柱状图组件、提示框组件等，注册之后再初始化。这种方式适合移动端项目、页面多图表的管理后台，页面加载速度会有一定提升，按需引入的代码行数比全量引入更多，临时调试页面优先选择全量引入。

监听窗口大小变化，让图表自动适配容器尺寸，你在初始化之后添加window.resize监听事件，回调函数里调用实例.resize()，窗口缩放时图表会跟着自动调整。如果页面存在侧边栏折叠、弹窗弹出这类改变容器尺寸的交互，交互完成后也手动调用一次resize，图表布局才能同步更新。

异步接口数据对接是高频需求，你发起axios请求拿到后端返回的数据集，在请求成功回调里面构造option，再执行setOption。接口返回的数据格式一般是数组，你需要单独提取x轴类目数组和数值数组，对应赋值给xAxis.data和series.data，后端字段名称和ECharts要求不一致时，提前做数据映射转换。

不要在还没渲染到页面上的DOM节点执行init。

常见交互配置可以直接写在option内，dataZoom组件实现区域缩放，visualMap组件实现数值映射颜色，每个组件都有独立配置项，官方示例中心可以直接筛选对应图表，复制配置片段到自己的option里调试。ECharts官方示例中心提供大量可运行代码片段，你可以对照修改字段，降低调试成本。

多图表共存时，每个图表对应独立DOM容器和独立实例变量，变量不要复用，否则后初始化的图表会覆盖前面的图表实例。如果需要联动效果，可以监听一个图表的事件，拿到选中参数，修改另一个图表的option并setOption，实现图表之间数据联动筛选。