前言:Echarts 在我的可视化数据开发印象中,它的配置和实例是真的很强大,配置文档很详情!很详细!但因为很详细,所以很繁琐,这里简单记录一下文档来方便平时开发。
一、标题的 option 属性配置
// title 标题
const option = {
title: {
id: '1', // 指定组件
show: true, // 是否显示标题
text: '主\n标题', // 主标题文本内容,支持 \n 换行
link: '地址链接', // 指定主标题文本点击跳转的地址
target: 'self', // 指定打开主标题链接方式 self本窗口 或者 blank 新建窗口
// 主标题样式
textStyle: {
color: 'red', // 颜色
fontStyle: 'normal', // 字体风格
fontWeight: 500, //或者 'noraml', // 字体粗细
fontSize: 16, // 字体大小
lineHeight: 20, // 行高
textBorderWidth: 20, // 文本描边宽度
textBorderColor: 'red', //描边颜色
textBorderType: 'solid', //描边类型
textBorderDashOffset: 20, // 虚线偏移量
textShadowBlur: 20, // 文字阴影长度
textShadowOffsetX: 20, //阴影相当于 X 轴偏移量
textShadowOffsetY: 20, //阴影相当于 Y 轴偏移量
overflow: 'truncate', //文字超出宽度如何处理 break 换行
ellipsis: '...' // 配合 overflow 截断时,展示 ···
},
subtext: '副\n标题', // 副标题内容
subtarget: '地址链接', //指定副标题文本点击跳转的地址
// 副标题样式
subtextStyle: {
color: 'red', // 颜色
fontStyle: 'normal' // 字体风格
// ··· 请直接参考主标题样式
},
triggerEvent:true, // 是否触发事件
padding : 5, //标题内边距
itemGap:10, // 标题直接间距 不能为负
zlevel:1, // 所有图形的 层级度 zlevel 值,高图层和低图层区别
z:2, // 组件的所有图形的 z 值 ,优先级低于zlevel
left: 'auto', // 或者 200 标题组件在容器中的定位
top:'auto', // 或者 200 标题组件在容器中的定位
right:'auto', // 或者 200 标题组件在容器中的定位
bottom :'auto', // 或者 200 标题组件在容器中的定位
backgroundColor :'red', // 整个标题的背景颜色
borderWidth:20, // 标题边框线宽
borderColor :'red', // 标题的边框颜色
borderRadius :10, // 或者[5, 5, 0, 0] 圆角半径
shadowBlur: 10, //图形阴影模糊程度
shadowColor: 'red', //阴影颜色
shadowOffsetX:200, //阴影水平方向上的偏移
shadowOffsetY:200, //阴影竖直方向上的偏移
}
};
二、解剖图
后续会继续更新其它属性配置