HTML仪表盘柱状混合本质是选对库、配对配置、避开语义冲突；Chart.js需同坐标系下设bar/line类型并区分y轴，ECharts靠dataset驱动动态混合，Canvas手写需手动映射坐标；饼图不可混入因视觉认知冲突。
HTML仪表盘里做“柱状混合”，本质是选对库、配对配置、避开语义冲突——不是所有“混合”都合理，也不是所有库都支持同坐标系下混用。
Chart.js 混合柱状图 + 折线图：必须用同一坐标系
Chart.js 支持 type: 'bar' 和 type: 'line' 在同一个 new Chart() 实例里共存，但前提是它们共享笛卡尔坐标系（即 x/y 轴），且不能引入 type: 'pie'——饼图压根不走这套坐标逻辑。
- 每个
datasets项需显式声明type，否则默认继承 chart-level 的type - y 轴要区分左右：用
yAxisID: 'y'和yAxisID: 'y1'，并在scales中分别定义 -
drawOnChartArea: false对右轴网格线很关键，否则折线图的网格会盖住柱子 - 注意
barPercentage和categoryPercentage，默认值会让多组柱子挤在一起，建议设为0.6和0.8保证间距
ECharts 动态混合：靠 series.type 切换 + dataset 驱动
ECharts 5+ 更适合做带时间维度的混合图表，比如“柱状图展示销量、折线图叠加同比增速”，它用 dataset 统一管理数据源，series 只负责渲染逻辑，更新时只需改 dataset 内容，调用 chart.setOption() 即可触发重绘。
- 不同
series可独立设yAxisIndex，支持双 y 轴甚至隐藏某轴刻度 - 若要做“动态排名柱状图 + 折线趋势线”，必须确保两组数据的时间戳或分类标签完全对齐，否则折线会断开或错位
- 移动端缩放易导致柱宽归零，加
barWidth: '12'（像素值）比百分比更可控 - 动画卡顿？关掉
animation: false或设animationDuration: 300，避免每帧都重算布局
Canvas 手写混合图：自由度高但得自己管坐标映射
不用库也能做，但你要亲手把原始数据转成画布坐标：ctx.fillRect() 画柱子，ctx.beginPath()+ctx.lineTo() 连折线点，再手动计算 y 值缩放比例、x 间隔、文字位置。
- 别直接用数据值当
y坐标——Canvas 原点在左上，数值越大画得越靠下，得做y = height - value * scale映射 - 柱子宽度和折线点半径要按 canvas 宽高动态算，硬编码
20px在 Retina 屏上会糊 - 没有内置 tooltip，hover 检测得自己写
isPointInPath()或矩形包围盒判断 - 响应式重绘时，记得先
ctx.clearRect(0,0,width,height)，否则旧图残留
为什么不要强行塞饼图进混合？
这不是技术做不到，而是视觉认知崩塌。柱状图和折线图回答“多少”和“怎么变”，饼图回答“占多少比例”。把三者叠在同一张图里，用户第一反应不是读数，而是困惑“这饼是哪部分的占比？是整根柱子？还是某个数据点？”——仪表盘要降低理解成本，不是增加解谜环节。
真正容易被忽略的是坐标系一致性：ECharts 的 yAxis 和 Chart.js 的 scales.y 看似一样，但 ECharts 默认启用 scale: true 自动截断离群值，Chart.js 默认全量显示，混用时数据范围稍有差异，图就“看起来不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
