ECharts标题样式深度解析：实现自定义颜色与阴影效果

option = {
  title: {
    text: "Main Title",       // 主标题文本
    subtext: "Sub Title",     // 副标题文本
    left: "left",             // 标题水平对齐方式
    top: "center",            // 标题垂直对齐方式
    show: true                // 是否显示标题，默认为 true
  },
  // ... 其他图表配置
};

option = {
  title: {
    text: "Main Title",
    subtext: "Sub Title",
    left: "left",
    top: "center",
    textStyle: {
      color: "red",     // 设置主标题文本颜色为红色
      fontSize: 40      // 设置主标题字号
    },
    subtextStyle: {
      fontSize: 20      // 设置副标题字号
    }
  },
  // ... 其他图表配置
};

option = {
  title: {
    text: "Main Title",
    subtext: "Sub Title",
    left: "left",
    top: "center",
    // 激活阴影的关键：设置非透明背景色
    backgroundColor: "white", 

    // 阴影配置
    shadowBlur: 5,            // 阴影模糊程度
    shadowColor: "red",       // 阴影颜色
    shadowOffsetX: 25,        // 阴影水平偏移
    shadowOffsetY: 25,        // 阴影垂直偏移

    textStyle: {
      color: "red",
      fontSize: 40
    },
    subtextStyle: {
      fontSize: 20
    }
  },
  // ... 其他图表配置
};

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false
});

var option = {
  title: {
    text: "ECharts 自定义标题示例",       // 主标题文本
    subtext: "颜色与阴影效果",             // 副标题文本
    left: "center",                     // 标题居中
    top: "top",                         // 标题在顶部

    // 标题组件背景色，用于激活阴影显示
    backgroundColor: "#f0f0f0", // 浅灰色背景，与图表背景区分

    // 阴影效果配置
    shadowBlur: 10,                     // 阴影模糊程度
    shadowColor: "rgba(0, 0, 0, 0.5)",  // 黑色半透明阴影
    shadowOffsetX: 5,                   // 阴影水平偏移
    shadowOffsetY: 5,                   // 阴影垂直偏移

    // 主标题文本样式
    textStyle: {
      color: "#333",                    // 主标题文本颜色
      fontSize: 28,                     // 主标题字号
      fontWeight: 'bold'                // 主标题加粗
    },
    // 副标题文本样式
    subtextStyle: {
      color: "#666",                    // 副标题文本颜色
      fontSize: 16
    }
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  yAxis: {},
  series: [{
    name: "销量",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20]
  }]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);