技术栈
echars
雪芽蓝域zzs
19 天前
vue.js
·
echars
第26章：ECharts 自定义主题 + 页面一键切换主题（深色 / 浅色两套）
业务场景：后台管理平台，支持全局 / 单张图表切换深色、浅色主题，若依自带暗黑模式联动，复用我们封装好的 useEcharts。 原理：ECharts 支持预注册主题，初始化图表时指定 theme 名称；我们做两套主题，增加按钮一键切换。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第22章：ECharts 图表联动（多图表交互联动）
功能说明：页面放置2 个独立图表，点击第一个图表的数据项，第二个图表自动刷新对应明细数据；同时复用我们已经封装好的 useEcharts，自带防抖 resize、实例就绪等待、导出功能。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第18章：ECharts 折线图 + 标记点、标记线，自定义 tooltip
业务场景：趋势分析折线图，常用于展示流量、销售额随时间变化。本节学习标记最大值最小值、基准线，自定义提示框内容，保留之前封装的点击事件、防抖 resize，echartHelper.js 无需修改。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第24章：ECharts 地图组件（基础行政区地图，若依 Vue3）
业务场景：后台看板展示各省 / 地区数据分布，比如区域销售额、用户分布。 ⚠️注意：echarts 5.x 之后地图需要单独引入 echarts/map/js/china.js 或者使用 geojson，我们用引入 china 地图的方式。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第25章：地图下钻交互（点击省份，切换到对应省份城市地图）
业务场景：全国地图点击省份，自动加载该省的市级 GeoJSON 地图，实现地图下钻；支持返回全国地图按钮，复用我们封装好的useEcharts。 前置准备：
雪芽蓝域zzs
19 天前
vue.js
·
echars
第19章：ECharts 组合图（折线 + 柱状混合图，双 Y 轴）
业务场景：一张图表同时展示两种不同量级的数据，例如：柱子展示销售额，折线展示增长率。双 Y 轴分别对应不同单位，是后台数据看板高频图表。继续复用我们封装好的useEcharts，不需要修改echartHelper.js。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第17章：ECharts 饼图自定义样式（扇区颜色、轮廓、标签配置 + 空状态兼容）
业务场景：若依后台常用占比统计饼图 / 环形饼图。本节自定义每个扇区颜色、边框轮廓、标签文字位置、字体大小，同时保留之前封装好的点击事件、防抖 resize，兼容空数据场景。echartHelper.js 无需改动。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第15章：ECharts 图表事件交互（若依 Vue3）
业务场景：点击柱状图柱子 / 饼图扇区，拿到当前点击的数据，弹出弹窗、跳转页面，后台管理看板高频使用。基于上一节封装好的 useEcharts 组合式函数，新增事件绑定。
雪芽蓝域zzs
19 天前
vue.js
·
echars
第20章：ECharts 图表主题切换 + 自定义颜色渐变
业务场景：若依本身支持深色 / 浅色主题切换，本节实现 ECharts 图表跟随系统主题切换，同时演示柱状图、折线图渐变填充效果，复用已有useEcharts封装，无需修改 echartHelper。
雪芽蓝域zzs
20 天前
vue.js
·
echars
第 7 章：双 Y 轴组合图（柱状 + 折线，看板高频场景）
本章目标：实现业务最常用的组合看板图：左 Y 轴展示销售额（柱状），右 Y 轴展示同比增长率（折线），双轴独立刻度，复用我们封装好的useEcharts。
雪芽蓝域zzs
20 天前
echars
第 2 章：封装 ECharts 通用 Composable（echartHelper.js）
本章目标：把图表初始化、resize 自适应、实例销毁、更新 option 方法全部抽离封装，后续页面直接复用，不用重复写 onMounted/onUnmounted。 文件路径：src/composables/echartHelper.js（遵循你偏好的 xxxHelper 命名规范）
雪芽蓝域zzs
20 天前
echars
第 3 章：单页面多个 ECharts 图表共存（柱状图 + 折线图）
本章目标：在同一个页面创建 2 张独立图表，复用useEcharts。 核心要点：多次调用 useEcharts ()，每次调用都会生成独立的 ref 和图表实例，互不干扰。
雪芽蓝域zzs
20 天前
vue.js
·
echars
第 12 章：一页多图表看板（多 BaseEchart 组件共存，后台首页大屏效果）
本章目标：在一个页面同时放 3 个独立图表（柱状图、饼图、组合图），用 Element Plus 栅格布局，模拟真实后台首页数据看板。 全部复用我们封装好的 BaseEchart 组件，零重复代码。
雪芽蓝域zzs
20 天前
vue.js
·
echars
第 10 章：大屏看板自动轮播高亮（ECharts 大屏经典效果）
本章目标：实现图表自动轮播高亮，鼠标悬浮暂停，离开继续，页面销毁自动清理定时器。 这是数据大屏、运营看板最常用的动效，复用我们之前的组合图代码。
雪芽蓝域zzs
20 天前
vue.js
·
echars
第 11 章：封装通用 BaseEchart 基础图表组件（Vue3 + 若依，全局复用）
本章目标： 将前面所有通用逻辑（实例初始化、resize、销毁、导出图片、自动轮播）抽离成独立可复用组件 BaseEchart.vue 之后任何页面，只需要写一行<BaseEchart />，传入option即可渲染图表，不用重复写 ref、onMounted、定时器清理等重复代码。
雪芽蓝域zzs
20 天前
vue.js
·
echars
第 13 章：对接后端真实接口（Axios 请求，替换 Mock 数据，完整业务闭环）
本章目标：说明：@/utils/request 是若依自带的 axios 封装，自带 token、响应拦截，直接复用。
我是有底线的