ECharts标题文本颜色与阴影效果配置详解

option = {
  title: {
    text: "主标题文本",
    subtext: "副标题文本",
    left: "center",
    textStyle: {
      color: "red", // 正确：设置主标题文本颜色为红色
      fontSize: 30
    },
    subtextStyle: {
      color: "#007bff", // 正确：设置副标题文本颜色为蓝色
      fontSize: 20
    }
  }
};

option = {
  title: {
    text: "带有阴影效果的标题",
    subtext: "请注意背景色设置",
    backgroundColor: "white", // 关键：设置非透明背景色，使阴影可见
    shadowBlur: 10, // 阴影模糊度
    shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色及透明度
    shadowOffsetX: 5, // 阴影水平偏移
    shadowOffsetY: 5, // 阴影垂直偏移
    left: "center",
    textStyle: {
      color: "#333",
      fontSize: 28
    },
    subtextStyle: {
      color: "#666",
      fontSize: 18
    }
  }
};

// 获取DOM元素并初始化ECharts实例
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas", // 推荐使用canvas渲染器
  useDirtyRect: false // 禁用脏矩形渲染，适用于特定场景
});

// 定义图表配置项
var option = {
  title: {
    text: "红色标题与阴影", // 主标题文本
    subtext: "ECharts标题样式演示", // 副标题文本
    backgroundColor: "white", // 关键：设置标题背景色为白色，确保阴影可见
    shadowBlur: 5, // 阴影模糊度
    shadowColor: "red", // 阴影颜色设置为红色
    shadowOffsetX: 25, // 阴影水平偏移量
    shadowOffsetY: 25, // 阴影垂直偏移量
    left: "center", // 标题水平居中
    top: "top", // 标题位于顶部
    textStyle: {
      color: "red", // 主标题文本颜色设置为红色
      fontSize: 30 // 主标题字体大小
    },
    subtextStyle: {
      color: "#666", // 副标题文本颜色
      fontSize: 20 // 副标题字体大小
    }
  },
  // 以下是图表的其他配置，例如X轴、Y轴和系列数据
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    name: '销售额'
  }]
};

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