点击上方“IT那活儿”公众号,关注后了解更多内容,不管IT什么活儿,干就完了!!!
Echarts中Option常用属性设置
test() {
var myChart = echarts.init(document.getElementById("main"));
let option = {
color: ["#c23531"],
series: [
{
type: "bar",
// 此系列自己的调色盘
color: ["#dd6b66"],
// ...
},
{
type: "pie",
// 此系列自己的调色盘
color: ["#37A2DA"],
// ...
},
],
title: {
x: "left", // 'left' | 'right' | 'center' | '100px'
y: "4%", // 'top' | 'bottom' | 'center' | '100px'
// 标题
show: true, //是否显示
text: "标题内容",
textStyle: {
color: "#fff", // 主标题文字的颜色
fontStyle: "normal", // 主标题文字字体的风格
fontWeight: "normal", // 主标题文字字体的粗细
fontFamily: "sans-serif", // 主标题文字的字体系列
fontSize: 18, // 字体大小
lineHeight: "30", // 行高
textBorderColor: "transparent", // 文字本身的描边颜色
textBorderWidth: 0, // 文字本身的描边宽度
textShadowColor: "transparent", // 文字本身的阴影颜色
textShadowBlur: 0, // 文字本身的阴影长度
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移
},
subtext: "副标题内容", // 副标题文本
subtextStyle: {
color: "red",
fontSize: "16",
}, //副标题样式
textAlign: "auto", //水平对齐
textVerticalAlign: "auto", // 垂直对齐
triggerEvent: false, // 是否触发事件
padding: 5, // 标题内边距
itemGap: 10, //主副标题之间的间距
left: 10, // 距离 left top right bottom
x: "center", // 水平安放位置,默认为左对齐
y: "4%", // 垂直安放位置,默认为全图顶端
backgroundColor: "pink", // 标题背景色
borderColor: "#ccc", // 标题的边框颜色
borderWidth: 5, // 标题的边框线宽
borderRadius: 2, // 圆角半径
shadowBlur: 10, //图形阴影的模糊大小
shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
shadowOffsetX: 5, // 阴影水平方向上的偏移距离
shadowOffsetY: 5, //阴影垂直方向上的偏移距离
},
tooltip: {
trigger: "axis", //触发类型
triggerOn: "click", //提示框触发的条件
showContent: true, //是否显示提示框浮层
alwaysShowContent: true, //是否永远显示提示框内容
showDelay: 0, //浮层显示的延迟,单位为 ms
hideDelay: 100, //浮层隐藏的延迟,单位为 ms
enterable: false, //鼠标是否可进入提示框浮层中
confine: false, //是否将 tooltip 框限制在图表的区域内
transitionDuration: 0.4, //提示框浮层的移动动画过渡时间,单位是 s
position: ["50%", "50%"], //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置
formatter: "{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器
backgroundColor: "transparent", //标题背景色
borderColor: "#ccc", //边框颜色
borderWidth: 0, //边框线宽
padding: 5, //图例内边距
textStyle: mytextStyle, //文本样式
axisPointer: { // 鼠标放在
type: "cross", //默认为line,line直线,cross十字准星,shadow阴影
crossStyle: {
color: "#fff",
},},},
};
myChart.setOption(option);
},

本文作者:池思敏(上海新炬王翦团队)
本文来源:“IT那活儿”公众号

文章转载自IT那活儿,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。




