英文:
Creating a red title and a shadow box with Apache ECharts?
问题
在这个演示中，我试图将标题变为红色并创建一个阴影模糊效果，但是设置没有产生任何效果。
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
color: "red",
show: true,
shadowBlur: 5,
shadowColor: "red",
shadowOffsetX: 25,
shadowOffsetY: 25,
text: "Main Title",
subtext: "Sub Title",
left: "left",
top: "center",
textStyle: {
fontSize: 30
},
subtextStyle: {
fontSize: 20
}
}
};
有任何想法吗？
英文:
In this demo I'm trying to make the title red and create a shadow blur, however the settings are not having any effect.
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
color: "red",
show: true,
shadowBlur: 5,
shadowColor: "red",
shadowOffsetX: 25,
shadowOffsetY: 25,
text: "Main Title",
subtext: "Sub Title",
left: "left",
top: "center",
textStyle: {
fontSize: 30
},
subtextStyle: {
fontSize: 20
}
}
};
Any ideas?
答案1
得分: 1
标题文本的颜色必须在 textStyle 下设置；副标题也是如此，需在 subtextStyle 下设置。
阴影不显示是因为背景颜色默认为 'transparent'；您可以将其设置为图表的背景颜色，即白色，以启用。
因此，选项应该类似于以下代码：
option = {
title: {
//show: true, // 默认
backgroundColor: "white",
shadowBlur: 5,
shadowColor: "red",
shadowOffsetX: 25,
shadowOffsetY: 25,
text: "主标题",
subtext: "副标题",
left: "left",
top: "center",
textStyle: {
color: "red",
fontSize: 40
},
subtextStyle: {
fontSize: 20
}
}
};
英文:
The color of the title text has to be set under textStyle; the same goes for subtitle and subtextStyle.
The shadow doesn't show because the background color is by default 'transparent'; you may set it to the chart's background color,
white, to activate.
So the option should be something on the lines of
option = {
title: {
//show: true, // default
backgroundColor: "white",
shadowBlur: 5,
shadowColor: "red",
shadowOffsetX: 25,
shadowOffsetY: 25,
text: "Main Title",
subtext: "Sub Title",
left: "left",
top: "center",
textStyle: {
color: "red",
fontSize: 40
},
subtextStyle: {
fontSize: 20
}
}
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论