1.柱状图偏移：
image.png
!!!注意：影响全局type为bar的偏移，蛋疼的地方。
2.散点图偏移：
很简单，使用symbolOffset即可
参考官方api：https://echarts.apache.org/zh/option.html#series-scatter.symbolOffset
3.折线图偏移：
这个比较蛋疼，官方也有symbolOffset属性，不过使用之后发现：线没偏移，线上的点儿偏移了。。
所以，这个属性不知道有什么用处。。
解决：
动态增加了一个隐藏的x轴（show：false），用来引导折线图的点的位置，核心代码
var option = {
...省略
"name": "当前应力浅孔/Mpa",
xAxisIndex: 1,//主要在此处指定下面的xAxis
"smooth": true,
...省略
}
option.xAxis[1] = {
type: 'value',
//max: option.xAxis[0].data.length * 100,
show: false
}
option.series[1].data = option.series[1].data.map((x, i) => [30 + i * 100, x]);//30为偏移量
option.series[4].data = option.series[4].data.map((x, i) => [70 + i * 100, x]);//70为偏移量
效果：
偏移前效果：
image.png
偏移后效果：
image.png
完整代码：
option = {
"color": ["#8D18F0", "#188DF0", "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"],
"legend": {
"top": -10
},
"tooltip": {},
"xAxis": [{
"data": ["测点1", "测点2", "测点3", "测点4", "测点5"],
"axisLabel": {
"textStyle": {
"color": "#000"
}
},
"axisTick": {
"show": false
},
"axisLine": {
"show": false
},
"z": 10
}],
"yAxis": [{
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"type": "value",
"name": "变化率(%)",
"min": 0,
"max": 50,
"interval": 5,
"axisLabel": {
"formatter": "{value}"
}
}, {
"axisLine": {
"show": false
},
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"plitLine": {
"show": false
},
"axisLabel": {
"formatter": "{value}",
"textStyle": {
"color": "#999"
}
},
"type": "value",
"name": "MPA",
"min": 0,
"max": 10
}],
"series": [{
"name": "深孔/%",
"type": "bar",
"barGap": 0,
"data": [9.41, 0, 14.93, 19.4, 26.42],
"markLine": {
"symbol": "none",
"data": [{
"lineStyle": {
"color": "blue",
"type": "solid"
},
"yAxis": 50,
"label": {
"show": true,
"formatter": "深孔变化率弱"
}
}, {
"lineStyle": {
"color": "orange",
"type": "solid"
},
"yAxis": 75,
"label": {
"show": true,
"formatter": "深孔变化率中"
}
}, {
"lineStyle": {
"color": "red",
"type": "solid"
},
"yAxis": 100,
"label": {
"show": true,
"formatter": "深孔变化率强"
}
}]
}
}, {
"name": "当前应力深孔/Mpa",
xAxisIndex: 1,
"smooth": true,
"type": "line",
"areaStyle": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "#9470DC"
}, {
"offset": 0.5,
"color": "#B57EDC"
}, {
"offset": 1,
"color": "#DA70D5"
}]
},
"opacity": 0.2,
"origin": "start"
},
"yAxisIndex": 1,
"itemStyle": {
"color": "#0ce30c"
},
"data": [8.1, 0, 7.7, 7.8, 5.4],
"markLine": {
"symbol": "none",
"data": [{
"lineStyle": {
"color": "blue",
"type": "solid"
},
"yAxis": 10,
"label": {
"show": true,
"formatter": "深孔当前应力弱",
"padding": [0, 0, 10, -85]
}
}, {
"lineStyle": {
"color": "orange",
"type": "solid"
},
"yAxis": 14,
"label": {
"show": true,
"formatter": "深孔当前应力中",
"padding": [0, 0, 10, -85]
}
}, {
"lineStyle": {
"color": "red",
"type": "solid"
},
"yAxis": 16,
"label": {
"show": true,
"formatter": "深孔当前应力强",
"padding": [0, 0, 10, -85]
}
}]
}
}, {
"name": "最大应力深孔/Mpa",
"type": "scatter",
"smooth": true,
"symbolSize": 10,
"symbolOffset": [-27.5, 0],
"yAxisIndex": 1,
"itemStyle": {
"color": "blue"
},
"data": [8.3, 6.7, 7.7, 8, 6.7],
"markLine": {
"symbol": "none",
"data": []
}
}, {
"name": "浅孔/%",
"type": "bar",
"barGap": 0,
"data": [4, 0, 8.97, 1.19, 16.44],
"markLine": {
"symbol": "none",
"data": [{
"lineStyle": {
"color": "green"
},
"yAxis": 50,
"label": {
"show": true,
"formatter": "浅孔变化率弱",
"padding": [0, 0, 10, -700]
}
}, {
"lineStyle": {
"color": "orange"
},
"yAxis": 75,
"label": {
"show": true,
"formatter": "浅孔变化率中",
"padding": [0, 0, 10, -700]
}
}, {
"lineStyle": {
"color": "red"
},
"yAxis": 100,
"label": {
"show": true,
"formatter": "浅孔变化率强",
"padding": [0, 0, 10, -700]
}
}]
}
}, {
"name": "当前应力浅孔/Mpa",
xAxisIndex: 1,
"smooth": true,
"type": "line",
"areaStyle": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "#017CB7"
}, {
"offset": 0.5,
"color": "#028FD6"
}, {
"offset": 1,
"color": "#6EC5F2"
}]
},
"opacity": 0.2,
"origin": "start"
},
"yAxisIndex": 1,
"itemStyle": {
"color": "#0ce30c"
},
"data": [5.1, 0, 8, 8.4, 7.3],
"markLine": {
"symbol": "none",
"data": []
}
}, {
"name": "最大应力浅孔/Mpa",
"type": "scatter",
"smooth": true,
"symbolSize": 10,
"symbolOffset": [27.5, 0],
"yAxisIndex": 1,
"itemStyle": {
"color": "blue"
},
"data": [0.1, 8.5, 8.5, 8.5, 8.5],
"markLine": {
"symbol": "none",
"data": [{
"lineStyle": {
"color": "green"
},
"yAxis": 9,
"label": {
"show": true,
"formatter": "浅孔当前应力弱",
"padding": [0, 0, 10, -700]
}
}, {
"lineStyle": {
"color": "orange"
},
"yAxis": 11,
"label": {
"show": true,
"formatter": "浅孔当前应力中",
"padding": [0, 0, 10, -700]
}
}, {
"lineStyle": {
"color": "red"
},
"yAxis": 13,
"label": {
"show": true,
"formatter": "浅孔当前应力强",
"padding": [0, 0, 10, -700]
}
}]
}
}]
}
option.xAxis[1] = {
type: 'value',
//max: option.xAxis[0].data.length * 100,
show: false
}
option.series[1].data = option.series[1].data.map((x, i) => [30 + i * 100, x])
option.series[4].data = option.series[4].data.map((x, i) => [70 + i * 100, x])