echarts 折线图 实现多坐标轴指示器且多图联动
echarts 折线图 实现多坐标轴指示器，目标是两个坐标轴指示器形成一个区间，可以比对数据。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.dydlTuecharts {
margin-top: 20px;
}
.echartsBox {
width: 1000px;
height: 280px;
}
style>
head>
<body>
<div class="dydlTuecharts">
<div id="echarts6" class="echarts-6 echartsBox">div>
<div id="echarts7" class="echarts-7 echartsBox">div>
div>
body>
<script src="https://cdn.staticfile.org/echarts/4.6.0/echarts.min.js">script>
<script>
var color = ["#42dabf", "#f9327a", '#fe9d00'];
var legend = {
x: "1280px",
top: "0",
bottom: "25px",
type: "scroll",
icon: "rect",
width: 1500,
heigth: 450,
show: true,
left: "right",
textStyle: {
color: '#fff'
}
}
var grid = {
containLabel: false,
left: 60,
bottom: 40,
right: 60,
top: "20%",
height: "65%",
}
var dataZoom1 = [
]
var dataZoom = [
]
var textColor = '#fff'
var axisLine = {
show: true,
lineStyle: {
color: '#fff',
}
}
var axisLabel = {
show: true,
color: '#fff',
fontSize: 14,
}
var textStyle = {
color: '#fff',
fontSize: 14,
}
var nameTextStyle = {
color: '#fff',
fontSize: 14
}
var tooltip = {
show: true,
trigger: 'axis', //
triggerOn: 'click', // 触发方式
alwaysShowContent: true, // 是否一直显示
transitionDuration: 0,
confine: false,
borderRadius: 4,
showContent: true,
borderWidth: 1,
borderColor: '#333',
backgroundColor: 'rgba(255,255,255,0.9)',
textStyle: {
fontSize: 12,
color: '#333'
},
}
echartsInit()
function echartsInit() {
var SszxAxisData = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35']
var SszSxdySeries = {
data: [
['00', '-17'],['01', '-5'],['02', '5'],
['03', '16'],
['04', '29'],
['05', '39'],
['06', '48'],
['07', '58'],
['08', '68'],
['09', '81'],
['10', '89'],
['11', '98'],
['12', '107'],
['13', '114'],
['14', '121'],
['15', '127'],
['16', '130'],
['17', '136'],
['18', '138'],
['19', '139'],
['20', '139'],
['21', '139'],
['22', '139'],
['23', '140'],
['24', '141'],
['25', '141'],
['26', '140'],
['27', '139'],
['28', '123'],
['29', '119'],
['30', '114'],
['31', '105'],
['32', '96'],
['33', '86'],
['34', '78'],
['35', '70']
],
name: "A 相",
showSymbol: false,
smooth: true,
symbol: "none",
type: "line"
}
var SszSxdlSeries = {
"name": "A相",
"type": "line",
"symbol": "none",
"showSymbol": false,
"smooth": true,
"data": [
["00", "1"],
["01", "1"],
["02", "1"],
["03", "1.1"],
["04", "1"],
["05", "0.8"],
["06", "0.7"],
["07", "0.3"],
["08", "-0.5"],
["09", "-0.8"],
["10", "-1"],
["11", "-1.2"],
["12", "-1.2"],
["13", "-1.2"],
["14", "-1.1"],
["15", "-1.1"],
["16", "-1"],
["17", "-1"],
["18", "-1"],
["19", "-1"],
["20", "-1.1"],
["21", "-1.1"],
["22", "-1.3"],
["23", "-1.4"],
["24", "-1.4"],
["25", "-1.5"],
["26", "-1.5"],
["27", "-1"],
["28", "-1.8"],
["29", "-1.8"],
["30", "-1.9"],
["31", "-1.9"],
["32", "-1.8"],
["33", "-1.8"],
["34", "-1.7"],
["35", "-1.6"]
]
}
getEcharts6(SszxAxisData, SszSxdySeries);
getEcharts7(SszxAxisData, SszSxdlSeries);
}
function xAxisFn(xAxisData) {
return [{
boundaryGap: false,
type: "category",
name: "时间",
xAxisIndex: 0,
axisLine: axisLine,
data: xAxisData,
splitLine: {
show: true,
lineStyle: {
opacity: 0.2
}
},
splitNumber: 12,
axisLabel: {
show: true,
color: '#fff',
fontSize: 14,
formatter: function(data) {
for(var i = 0; i < xAxisData.length; i++) {
if(xAxisData[i] == data) {
return i
}
}
}
},
axisPointer: {
type: 'line',
snap: true,
handle: {
show: true,
margin: 30,
color: 'red'
},
lineStyle: {
width: 2,
color: 'green'
},
value: xAxisData[Math.ceil(xAxisData.length / 2)]
}
},
{
show: true,
boundaryGap: false,
axisLine: axisLine,
xAxisIndex: 1,
type: "category",
name: '时间',
data: xAxisData,
position: 'top',
splitLine: {
show: false,
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitNumber: 12,
axisPointer: {
type: 'line',
snap: true,
handle: {
show: true,
margin: 30,
color: '#B80C00'
},
lineStyle: {
width: 2,
color: 'red'
},
value: xAxisData[Math.ceil(xAxisData.length / 3)]
}
}
]
}
function yAxisFn(yAxisName) {
return [{
axisLine: this.axisLine,
axisTick: {
show: true,
},
axisLabel: this.axisLabel,
splitLine: {
show: true,
lineStyle: {
opacity: 0.2
}
},
nameLocation: "center",
nameGap: 45,
nameRotate: 90,
type: "value",
name: "电压值(kV)",
nameTextStyle: this.nameTextStyle,
}, ]
}
var echarts6 = {}
var echarts7 = {}
function getEcharts6(xAxisData, SeriesArr) {
echarts6 = echarts.init(document.getElementById('echarts6'));
var option = {
color: color,
backgroundColor: '#092773',
title: {
text: '电压',
left: 10,
textStyle: textStyle,
},
legend: legend,
grid: grid,
yAxis: yAxisFn("电压值(kV)"),
xAxis: xAxisFn(xAxisData),
dataZoom: dataZoom1,
axisPointer: {
triggerOn: 'click',
triggerTooltip: true,
},
tooltip: tooltip,
series: SeriesArr,
};
echarts6.setOption(option);
}
function getEcharts7(xAxisData, SeriesArr) {
echarts7 = echarts.init(document.getElementById('echarts7'));
var option = {
color: color,
backgroundColor: '#092773',
title: {
text: '电流',
left: 10,
textStyle: textStyle,
},
legend: legend,
grid: grid,
yAxis: yAxisFn("电流值(A)"),
xAxis: xAxisFn(xAxisData),
dataZoom: dataZoom,
axisPointer: {
triggerOn: 'click',
triggerTooltip: true,
},
tooltip: tooltip,
series: SeriesArr,
};
echarts7.setOption(option);
echarts.connect([echarts6, echarts7])
}
script>
html>
目前红色指示器不能联动且不能显示tooltip
用评论 发代码吧 他这个提问 发代码 会吞 标签的闭合标签 。直接复制很麻烦，还得改
axisPointer: {
link: [{
xAxisIndex: 'all'
}]
}
感谢提供了一个多个axispointer的方法