Vue 3中Vue-Echarts自定义主题未完全生效：标题颜色不生效

问题根源 #

ECharts自定义主题的配置字段并非titleColor，你误用了字段名。通过ECharts主题编辑器导出的project.json格式主题中，标题文本颜色需要配置在title.textStyle.color路径下，而非顶层的titleColor字段。

解决步骤 #

1. 修正主题JSON结构
   打开你的purple-passion.project.json，将单独的titleColor: "#ffffff"替换为符合ECharts主题规范的结构：

   {
     "theme": "purple-passion",
     "backgroundColor": "rgba(91,92,110,1)",
     "title": {
       "textStyle": {
         "color": "#ffffff"
       }
     },
     // 保留其他原有主题配置（如color数组、tooltip样式等）
   }
   

2. 确保主题正确注册
   在组件或项目入口文件中，完成自定义主题的注册：

   import { use } from 'echarts/core';
   import purplePassionTheme from '@/css/echarts-themes/purple-passion.project.json';
   
   // 注册主题到ECharts
   use(purplePassionTheme);
   

3. 正确绑定主题到v-chart
   模板中直接使用主题名称（对应JSON里的theme字段值），无需额外包装对象：

   <v-chart theme="purple-passion" :option="chartOption" />
   

额外说明 #

如果你的chartOption中已经显式定义了title但未设置textStyle，ECharts会优先使用默认标题样式覆盖主题配置；若需要主题完全生效，避免在option中重复定义未配置完整的title字段。

内容的提问来源于stack exchange，提问作者user14884631