ECharts样式定制需通过color调色盘、组件级配置（如itemStyle）或registerTheme注册主题实现，直接给DOM容器加CSS类名无效，因其内部SVG/Canvas元素不响应外部CSS选择器。
自定义样式不能只靠 CSS 类名关联
直接给 echarts.init 绑定的 DOM 容器加一个 CSS 类名（比如 class="my-chart"），并不会自动让 ECharts 图表元素继承该类下的样式规则。ECharts 渲染的是 SVG 或 Canvas，内部元素不直接受外部 CSS 类选择器控制（除非用 zrender 低层 API 手动干预）。
真正生效的三种自定义样式方式
ECharts 提供了三类可落地的样式定制路径，按优先级和可控性排序：
-
全局调色盘（
color配置项）：影响所有系列默认颜色，适合统一品牌色。例如：option = { color: ['#1890ff', '#52c418', '#faad14'] } -
组件级样式配置（
itemStyle、label、lineStyle等）：在series或axisLabel等子配置中显式设置，粒度细、优先级高。例如饼图扇区边框：itemStyle: { borderColor: '#fff', borderWidth: 2 } -
主题（
theme）注册与加载：适用于整站风格切换。必须通过echarts.registerTheme注册后，再传入init的第二个参数，如echarts.init(dom, 'vintage')；仅靠 HTML class 名无法触发主题切换
为什么给容器加 class 后样式没变
常见错误是以为写一段 CSS 就能覆盖 ECharts 内部元素，比如：
.my-chart .echarts-pie-sector {
stroke: red;
}
这基本无效，原因有三：
立即学习“前端免费学习笔记（深入）”；
- ECharts 默认使用 Canvas 渲染时，根本没有
.echarts-pie-sector这类 DOM 类名，全是位图绘制 - 即使开启 SVG 渲染（
renderer: 'svg'），生成的 class 名也不是固定可预测的，且带 hash 后缀 - 内部元素未暴露标准语义化 class，CSS 选择器无法稳定锚定
想用 CSS 控制，唯一可行的入口点
只有两个位置支持常规 CSS 介入：
-
图表容器本身：比如设置
border-radius、box-shadow、background，这些会作用在包裹<div id="main"> 的外层 DOM 上 <li> <strong>tooltip / legend 等浮层的自定义 HTML 模板</strong>：通过 <code>tooltip.formatter返回字符串或 DOM 节点，并配合全局 CSS 类选择器控制样式。注意需启用tooltip.confine = true防止溢出
其他所有图表图形样式，必须走 ECharts 自身的配置项，而不是外部 CSS。
