Grid introduction:
One of the components used to define the chartdrawing area, used todetermine In the coordinate system area of the Echarts container, theposition, size and scale of each graph are published, so that each graph can Definemultiple grids, each grid is usedindependently coordinate system, and control the grid position and size through attributes such as x, y, width, height, etc., and realize the graph evenly or according to your own development requirements, moreproblems. displaydifferent positionsgraphicspieces
Precautions:
①When defining canvas color backgroundColor, must Setshow:true in the grid to take effect.
1. Legend option attribute configuration
// 网格 grid
option={
// 单系列图表就 直接写成 grid:{} ,多个就可以写成 grid:[{},{},{}]
grid:[
{
id:'1', //组件ID
show:true, //是否显示坐标系网格
zlevel:1, //所有图形的 层级大小
z:2, //该组件中所有图形的z值
left:'10%', //网格距离容器左侧的距离
right:'10%', //网格距离容器右侧的距离
top:'10%', //网格距离容器顶部的距离
botto:'10%', //网格距离容器底部的距离
width:'auto', //网格宽度
height:'auto', //网格高度
containLabel:true, //网格区域是否将坐标轴的刻度标签容纳在内，并一起定位，防止标签溢出
backgroundColor: "rgba(156, 29, 29, 1)", //网格的背景颜色
borderWidth:2, //网格边框线宽
borderColor:"rgba(156, 29, 29, 1)", //网格的边框颜色
shadowColor:"rgba(156, 29, 29, 1)", //网格的阴影颜色
shadowBlur: 7, //网格的阴影程度
shadowOffsetX:10, //阴影在水平方向上的偏移量
shadowOffsetY:10, //阴影在竖直方向上的偏移量
// 在本坐标系特定的 tooltip
tooltip:{
show:true, // 是否显示提示组件
trigger:'item', // 触发类型
//坐标指示器配置项
axisPointer:{
type:"line", //指示器类型
axis:'auto', //指示器的坐标轴
snap:true, //指示器是否自动吸附到点上
z:1, //指示器的 z 值
animation:true, //是否开启动画
animationThreshold:2000, //动画的阈值，单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration:1000, //初始动画的时长
animationEasing:'cubicOut', //初始动画的缓动效果
animationDelay:2000, //初始动画的延迟
animationDurationUpdate:1000, //数据更新动画的时长
animationEasingUpdate:200, //数据更新动画的缓动效果
animationDelayUpdate:200, //数据更新动画的延迟
//指示器文本标签样式(文本容器样式)
label:{
show:true, // 是否显示文本标签
// 以下内容需要在 show 设置为 true 才生效
precision:'auto', //显示文本值的小数点
formatter:"显示文字", //文本标签显示设置，可写方法
margin:3, //label 距离轴的距离
color: "rgba(234, 21, 21, 1)",
//文字颜色
fontStyle:'normal', //字体风格
fontWeight:'normal', //字体粗细
fontFamily:'sans-serif', //文字字体
fontSize:15, //字体大小
lineHeigh:10, //行高
width:10, //文字显示宽度
height:10, //文字显示高度
textBorderColor:'red', //文本描边颜色
textBorderWidth:10, //文本描边宽度
textBorderType:'solid', //描边类型
textBorderDashOffset:10, //描边为虚线时的偏移量
textShadowColor:'transparent', //文字阴影颜色
textShadowBlur:10, //文字阴影长度
textShadowOffsetX:10, //文字阴影水平偏移量
textShadowOffsetY:10, //文字阴影竖直偏移量
overflow:'none', //文字超出是否截断
ellipsis:'···', //文字截断时末尾显示内容
padding:[5,5,5,5], //文本标签内边距
backgroundColor:'auto', //文本标签的背景颜色
borderColor:'red', //文本标签的边框颜色
borderWidth:20, //文本标签的边框宽度
shadowBlur:20, //文本标签阴影大小
shadowColor:'red', //阴影颜色
shadowOffsetX:20, //文本标签的阴影水平偏移
shadowOffsetY:20, //文本标签的阴影竖直偏移
}
// 指示器 竖直 标记线的样式
lineStyle:{
color:'red', //线的颜色。
width:10, //线宽
type:10, //线的类型
dashOffset:10, //虚线的偏移量
cap:'butt', //线段末端的形状
join:'bevel', //线段相连部分形状
miterLimit:10, // join 为 miter 设置斜接面限制比例
shadowBlur:10, //线的阴影大小
shadowColor:'red', //线的阴影颜色
shadowOffsetX:20, //阴影水平偏移
shadowOffsetY:20, //阴影竖直偏移
opacity:0.5, //线的透明度
}
// 指示器 水平 标记线的样式
crossStyle:{
// 配置和上面的一样
}
// 当指示器的类型 type ='shadow' 生效 阴影指示器
shadowStyle:{
color: "rgba(194, 91, 91, 1)", //填充颜色
shadowBlur:10, //图形的阴影模糊程度
shadowColor:10, //阴影颜色
shadowOffsetX:10, //阴影水平偏移距离
shadowOffsetY:10, //阴影水平偏移距离
opacity:0.5, //图形透明度
}
},
// 提示 悬浮层的样式，仅当 trigger 设置为 item 时生效，设置为 axis 样式是由坐标轴触发
position:['50%','50%'], //提示框浮层的位置
formatter:'文字内容转化', //提示框浮层内容格式器，可写方法
valueFormatter:(value) => '$' + value.toFixed(2), //tooltip 中数值显示部分的格式化回调函数。
borderColor:'red', //提示框浮层的边框颜色
borderWidth:5, //提示框浮层的边框宽
padding:10, //提示框浮层内边距
//悬浮层内文本样式
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 截断时，展示 ···
}
}
}
]
}2. Anatomy diagram
3. Data series binding grid, basic use
A simpler understanding of the grid is to define two small canvas areas separately in the Echarts container canvas to implement drawing.
The basic usage of binding the canvas area is as follows:
option=[
grid:[
{
··· //网格一配置
},
{
··· //网格二配置
}
]
//定义坐标轴在那个网格中
xAxis:[
{ //系列一
gridIndex:0, //定义在网格一中
type:'category',
···
},
{//系列二
gridIndex:1, //定义在网格二中
type:'category',
···
}
],
yAxis: [
{
gridIndex:0, //定义在网格一中
type: 'value'
},
{
gridIndex:1, //定义在网格二中
type:'value'
}
],
series:[
{
//定义在网格一中,第一个网格可不写
//xAxisIndex:0,
//yAxisIndex:0,
name:'Email' ,
type:'line',
···
},
{
//定义在网格二中
xAxisIndex:1,
yAxisIndex:1,
name:'Email' ,
type:'line',
···
}
]
]