ECharts 标题文本与阴影样式配置指南

option = {
  title: {
    color: "red", // 此处的 color 不会生效
    text: "主标题",
    // ... 其他属性
  }
};

option = {
  title: {
    text: "主标题",
    subtext: "副标题",
    textStyle: {
      color: "red", // 正确设置主标题颜色
      fontSize: 30
    },
    subtextStyle: {
      color: "blue", // 正确设置副标题颜色
      fontSize: 20
    },
    left: "left",
    top: "center"
  }
};

option = {
  title: {
    backgroundColor: "white", // 必须设置非透明背景色以激活阴影
    shadowBlur: 5,           // 阴影模糊程度
    shadowColor: "red",      // 阴影颜色
    shadowOffsetX: 25,       // 阴影水平偏移
    shadowOffsetY: 25,       // 阴影垂直偏移
    text: "带有阴影的主标题",
    subtext: "带有阴影的副标题",
    left: "left",
    top: "center",
    textStyle: {
      color: "red",
      fontSize: 40
    },
    subtextStyle: {
      fontSize: 20
    }
  }
};

// 获取 DOM 元素
var dom = document.getElementById("chart-container");
// 初始化 ECharts 实例
// 注意：如果容器大小可变，建议在初始化后监听 resize 事件并调用 myChart.resize()
var myChart = echarts.init(dom, null, {
  renderer: "canvas", // 推荐使用 canvas 渲染器，性能通常更好
  useDirtyRect: false // 根据实际需求决定是否开启脏矩形渲染优化
});

var option;

// 配置 ECharts 选项
option = {
  title: {
    // 必须设置非透明背景色，才能使 shadow 属性生效
    backgroundColor: "white",
    // 阴影效果配置
    shadowBlur: 5,
    shadowColor: "red",
    shadowOffsetX: 25,
    shadowOffsetY: 25,

    // 标题文本
    text: "Apache ECharts 标题样式演示",
    // 副标题文本
    subtext: "自定义颜色与阴影效果",

    // 标题位置
    left: "center", // 居中显示
    top: "top",     // 顶部显示

    // 主标题文本样式配置
    textStyle: {
      color: "#333", // 主标题文本颜色
      fontSize: 28,  // 主标题字体大小
      fontWeight: 'bold' // 字体粗细
    },
    // 副标题文本样式配置
    subtextStyle: {
      color: "#666", // 副标题文本颜色
      fontSize: 18,  // 副标题字体大小
      fontStyle: 'italic' // 字体样式
    }
  },
  // 可以在这里添加其他图表组件的配置，例如 xAxis, yAxis, series 等
  series: [
    {
      name: '示例数据',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130]
    }
  ]
};

// 应用配置项
if (option && typeof option === 'object') {
  myChart.setOption(option);
}

// 监听页面大小变化，使图表自适应
window.addEventListener('resize', function() {
  myChart.resize();
});