1.echarts的基本用法一、安装# 完整引入 npm install echarts # 推荐按需引入减小体积 npm install echarts二、基础四步核心原理准备容器DOM 容器必须设置宽高初始化实例echarts.init(dom)配置 option图表配置项xAxis、yAxis、series、tooltip 等渲染图表setOption(option)三、原生 JS 最简示例div idchart stylewidth: 600px;height:400px;/div script srcecharts.js/script script // 1.获取dom const dom document.getElementById(chart) // 2.初始化实例 const myChart echarts.init(dom) // 3.配置 const option { title: { text: 柱状图 }, xAxis: { type: category, data: [A,B,C] }, yAxis: { type: value }, series: [{ type: bar, // bar柱状 line折线 pie饼图 data: [10,20,30] }] } // 4.渲染 myChart.setOption(option) /script四、Vue3 ECharts 标准写法template !-- 容器一定要设置宽高 -- div refchartRef stylewidth:100%;height:400px;/div /template script setup import { ref, onMounted, onUnmounted } from vue import * as echarts from echarts const chartRef ref(null) let myChart null // 初始化 function initChart() { myChart echarts.init(chartRef.value) const option { tooltip: {}, xAxis: { type: category, data: [周一,周二,周三] }, yAxis: { type: value }, series: [ { type: line, data: [12,22,33] } ] } myChart.setOption(option) } // 窗口自适应 function resizeChart() { myChart myChart.resize() } onMounted(() { initChart() window.addEventListener(resize, resizeChart) }) // 组件销毁销毁实例、移除监听防止内存泄漏面试高频坑 onUnmounted(() { window.removeEventListener(resize, resizeChart) myChart?.dispose() myChart null }) /script五、核心常用配置说明tooltip鼠标悬浮提示框title标题legend图例xAxis / yAxis坐标轴grid图表与容器边距series系列数据核心type: bar柱状图type: line折线图type: pie饼图type: map地图data图表数据源六、精简版使用 ECharts 分为四步准备带宽高 DOM 容器echarts.init 初始化实例编写 option 配置setOption 渲染图表Vue 中需要在 onMounted 初始化onUnmounted 调用 dispose 销毁实例避免内存泄漏监听窗口 resize 执行 resize () 实现自适应异步获取新数据直接再次调用 setOption 更新图表。窗口缩放图表变形监听resize调用myChart.resize()组件销毁内存泄漏onUnmounted使用dispose()销毁 echarts 实例清除 resize 监听异步接口更新数据怎么做拿到新数据后直接调用myChart.setOption(newOption)容器隐藏后再显示图表不渲染元素从 display:none 变为可见后手动执行 resize ()多次调用 init 会生成多个实例最佳实践先判断实例是否存在不存在再初始化2.Echarts如何画图准备 DOM 容器必须指定宽高初始化 ECharts 实例echarts.init(dom)组装 option 配置项坐标轴、系列、数据等调用 setOption (option) 渲染图表所有图表折线、柱状、饼图、雷达、地图全部遵循这套流程区别仅在于series.type和配置。柱状图type: bar折线图type: line饼图type: pie饼图不需要 xAxis、yAxis数据格式为[{name:, value:}]!-- Vue3 script setup -- template !-- 容器必须设置宽高 -- div refchartRef stylewidth:100%;height:360px/div /template script setup import { ref, onMounted, onUnmounted } from vue import * as echarts from echarts const chartRef ref(null) let myChart null // 初始化绘图 function drawChart() { // 1. 获取dom初始化实例 myChart echarts.init(chartRef.value) // 2. 配置option绘图核心 const option { tooltip: { trigger: axis }, legend: { data: [销量] }, xAxis: { type: category, data: [1月,2月,3月,4月] }, yAxis: { type: value }, // series绘图系列控制画什么图 series: [ { name: 销量, type: bar, // bar柱状 / line折线 / pie饼图 data: [120, 200, 150, 80] } ] } // 3. 渲染绘图 myChart.setOption(option) } // 自适应 const resize () myChart?.resize() onMounted(() { drawChart() window.addEventListener(resize, resize) }) // 销毁实例防止内存泄漏 onUnmounted(() { window.removeEventListener(resize, resize) myChart?.dispose() }) /script// 饼图简易示例 option { series: [{ type: pie, radius: 50%, data: [ { name: A, value: 100 }, { name: B, value: 200 } ] }] }1.异步后端数据如何画图拿到接口数据后重新执行setOption更新不需要重复 initasync function loadData() { const res await api.getChartData() myChart.setOption({ xAxis: { data: res.xData }, series: [{ data: res.seriesData }] }) }首先创建带宽高 DOM 容器使用 echarts.init 获取图表实例组装 option 配置通过 series.type 确定图表类型填入坐标轴和业务数据调用 setOption 完成绘图 Vue 项目在 onMounted 初始化onUnmounted 执行 dispose 销毁实例窗口变化调用 resize 实现自适应异步拿到新数据直接再次调用 setOption 更新图表。