如何用Apache ECharts设置红色标题与阴影框？

问题出在标题样式属性的配置层级错误：你把color、shadowBlur这类样式属性直接放在了title根节点下，但ECharts中标题的文本样式（包括颜色、阴影）需要配置在textStyle（主标题）和subtextStyle（副标题）内部。

修正后的代码如下：

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

var option;

option = {
  title: {
    show: true,
    text: "Main Title",
    subtext: "Sub Title",
    left: "left",
    top: "center",
    textStyle: {
      fontSize: 30,
      color: "red", // 主标题颜色移至此处
      shadowBlur: 5, // 主标题阴影模糊度
      shadowColor: "red", // 阴影颜色
      shadowOffsetX: 25, // 阴影X轴偏移量
      shadowOffsetY: 25 // 阴影Y轴偏移量
    },
    subtextStyle: {
      fontSize: 20,
      // 若副标题需要相同样式，可在此添加对应属性
      // color: "red",
      // shadowBlur: 5,
      // shadowColor: "red",
      // shadowOffsetX: 25,
      // shadowOffsetY: 25
    }
  }
};

// 应用配置并渲染图表
if (option && typeof option === 'object') {
  myChart.setOption(option);
}

补充说明：

• 主标题的所有文本样式属性必须嵌套在textStyle对象中才会生效
• 副标题样式需通过subtextStyle单独配置
• 原代码遗漏了myChart.setOption(option)这一步，这也是配置无法生效的潜在原因

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