坐标轴的反向echarts value配置项内容和展示
再用双Value轴的时候，在我用X坐标轴的反向的时候，Y轴跑到了右边。 怎样让X轴反向而Y轴保持不变在左侧。
配置项如下
var json = [{
"name": "超保证水面线",
"list": [{
"name": "石鼓",
"haiba": 4100,
"value": 2000
}, {
"name": "攀枝花",
"haiba": 3800,
"value": 1080
}, {
"name": "寸滩",
"haiba": 2800,
"value": 560
}, {
"name": "三峡",
"haiba": 2200,
"value": 440
}, {
"name": "宜昌",
"haiba": 1800,
"value": 320
}, {
"name": "城陵矶",
"haiba": 1500,
"value": 260
}, {
"name": "汉口",
"haiba": 900,
"value": 200
}, {
"name": "九江",
"haiba": 500,
"value": 160
}, {
"name": "大通",
"haiba": 300,
"value": 140
}]
}, {
"name": "超警戒水面线",
"list": [{
"name": "石鼓",
"haiba": 4100,
"value": 1900
}, {
"name": "攀枝花",
"haiba": 3800,
"value": 980
}, {
"name": "寸滩",
"haiba": 2800,
"value": 460
}, {
"name": "三峡",
"haiba": 2200,
"value": 340
}, {
"name": "宜昌",
"haiba": 1800,
"value": 220
}, {
"name": "城陵矶",
"haiba": 1500,
"value": 160
}, {
"name": "汉口",
"haiba": 900,
"value": 100
}, {
"name": "九江",
"haiba": 500,
"value": 60
}, {
"name": "大通",
"haiba": 300,
"value": 40
}]
}, {
"name": "河道水面线",
"list": [{
"name": "石鼓",
"haiba": 4100,
"value": 1800
}, {
"name": "攀枝花",
"haiba": 3800,
"value": 880
}, {
"name": "寸滩",
"haiba": 2800,
"value": 360
}, {
"name": "三峡",
"haiba": 2200,
"value": 200
}, {
"name": "宜昌",
"haiba": 1800,
"value": 120
}, {
"name": "城陵矶",
"haiba": 1500,
"value": 60
}, {
"name": "汉口",
"haiba": 900,
"value": 10
}, {
"name": "九江",
"haiba": 500,
"value": 5
}, {
"name": "大通",
"haiba": 300,
"value": 2
}]
}];
var chaobaozheng = [];
var chaojingjie = [];
var hedao = [];
var names = [];
function loadData(data) {
data.map(function(item, i, arr) {
if (item.name == '超保证水面线') {
item.list.map(function(item, i, arr) {
var arr1 = [];
arr1.push(item.haiba);
arr1.push(item.value);
names.push(item.name)
chaobaozheng.push(arr1)
})
} else if (item.name == '超警戒水面线') {
item.list.map(function(item, i, arr) {
var arr2 = [];
arr2.push(item.haiba);
arr2.push(item.value);
chaojingjie.push(arr2)
})
} else {
item.list.map(function(item, i, arr) {
var arr3 = [];
arr3.push(item.haiba);
arr3.push(item.value);
hedao.push(arr3)
})
}
})
}
loadData(json);
var option = {
backgroundColor: '#14314E',
color: ['#DF9325', '#5FAD33', '#03A9A7'],
tooltip: {
trigger: 'axis',
formatter: function(params) {
var str = "";
params.map(function(item, i, arr) {
str += item.seriesName;
str += ":";
str += item.data.value[1];
str += '</br>';
})
return str;
},
axisPointer: {
lineStyle: {
color: '#325c80'
}
}
},
legend: {
show: true,
right: 'left',
itemWidth: 24,
itemHeight: 8,
textStyle: {
color: '#CCFFFF'
},
data: [{
name: "超保证水面线"
}, {
name: "超警戒水面线"
}, {
name: "河道水面线"
}]
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'value',
name: "",
boundaryGap: false,
splitNumber: 10,
min: 0,
max: 4200,
inverse: false,
show: false,
},
{
type: 'value',
name: "",
boundaryGap: false,
splitNumber: 10,
min: 0,
max: 4200,
inverse: true,
position: 'bottom',
axisLabel: {
margin: 10,
formatter: function(value, index) {
if (value === 0) {
return 0 + ' 千米';
} else {
return value;
}
},
textStyle: {
fontSize: 14
}
},
axisLine: {
show: true,
lineStyle: {
color: '#2EBBEC'
}
},
axisTick: {
show: true
},
splitLine: {
show: false
}
}
],
yAxis: [{
type: 'value',
name: "水位（米）",
min: 0,
max: 2500,
splitNumber: 5,
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#2EBBEC'
}
},
axisLabel: {
show: true,
//margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
show: false
}
}],
series: [{
name: '超保证水面线',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 0,
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
silent: true,
itemStyle: {
normal: {
color: '#DF9325'
},
},
lineStyle: {
normal: {
//color:'#DF9325',
type: 'dashed',
width: 3
}
},
label: {
normal: {
show: true,
position: [0, -30],
offset: [0, 0],
formatter: '{b}',
textStyle: {
color: "#CCFFFF"
},
}
},
markArea: {
silent: true,
itemStyle: {
normal: {
color: "#434344",
opacity: 0.9
},
},
data: [
[{
name: '',
xAxis: 2400
}, {
xAxis: 1500
}]
]
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
data: [{
value: chaobaozheng[0],
//name: names[0]
}, {
value: chaobaozheng[1],
//name: names[1]
}, {
value: chaobaozheng[2],
//name: names[2]
}, {
value: chaobaozheng[3],
//name: names[3]
}, {
value: chaobaozheng[4],
//name: names[4]
}, {
value: chaobaozheng[5],
//name: names[5]
}, {
value: chaobaozheng[6],
//name: names[6]
}, {
value: chaobaozheng[7],
//name: names[7]
}, {
value: chaobaozheng[8],
//name: names[8]
}]
}, {
name: '超警戒水面线',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 0,
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
silent: true,
itemStyle: {
normal: {
color: '#5FAD33'
},
},
lineStyle: {
normal: {
//color:'#5FAD33',
type: 'dashed',
width: 3
}
},
markArea: {
silent: true,
itemStyle: {
normal: {
color: "#3E2D43",
opacity: 0.9
},
},
data: [
[{
name: '',
xAxis: 1500
}, {
xAxis: 1100
}]
]
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
data: [{
value: chaojingjie[0],
//name: names[0]
}, {
value: chaojingjie[1],
//name: names[1]
}, {
value: chaojingjie[2],
//name: names[2]
}, {
value: chaojingjie[3],
//name: names[3]
}, {
value: chaojingjie[4],
//name: names[4]
}, {
value: chaojingjie[5],
//name: names[5]
}, {
value: chaojingjie[6],
//name: names[6]
}, {
value: chaojingjie[7],
//name: names[7]
}, {
value: chaojingjie[8],
//name: names[8]
}]
}, {
name: '河道水面线',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 0,
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
silent: true,
itemStyle: {
normal: {
color: '#03A9A7'
},
},
lineStyle: {
normal: {
//color: "#03A9A7",
width: 3
}
},
markPoint: {
symbolOffset: [0, -40],
silent: true,
label: {
normal: {
position: "insideTop",
formatter: function(params) {
var param = params.data;
var name = param.name;
var value = param.coord[1].toString();
if (value.length > 6) {
return value.slice(0, 3) + "\n" + value.slice(3, 6) + "\n" + value.slice(6) + "\n" + "\n" + name + '\n' + '|' + '\n' + '|';
} else if (value.length > 3) {
return value.slice(0, 3) + "\n" + value.slice(3) + "\n" + "" + "\n" + name + '\n' + '|' + '\n' + '|';
} else {
return value + "\n" + "" + "\n" + "" + "\n" + name + '\n' + '|' + '\n' + '|';
}
},
textStyle: {
color: '#CCFFFF',
}
}
},
itemStyle: {
normal: {
color: "#009DD9"
},
},
data: [{
coord: hedao[0],
name: names[0],
itemStyle: {
normal: {
color: "#009DD9"
},
},
}, {
coord: hedao[1],
name: names[1],
itemStyle: {
normal: {
color: "#009DD9"
},
},
}, {
coord: hedao[2],
name: names[2],
itemStyle: {
normal: {
color: "#009DD9"
},
},
}, {
coord: hedao[3],
name: names[3],
itemStyle: {
normal: {
color: "#FF8B21"
},
},
}, {
coord: hedao[4],
name: names[4],
itemStyle: {
normal: {
color: "#FF8B21"
},
},
}, {
coord: hedao[5],
name: names[5],
itemStyle: {
normal: {
color: "#E71F19"
},
},
}, {
coord: hedao[6],
name: names[6],
itemStyle: {
normal: {
color: "#009DD9"
},
},
}, {
coord: hedao[7],
name: names[7],
itemStyle: {
normal: {
color: "#009DD9"
},
},
}, {
coord: hedao[8],
name: names[8],
itemStyle: {
normal: {
color: "#009DD9"
},
},
}]
},
markLine: {
symbol: "arrow",
label: {
normal: {
show: true,
position: 'middle',
textStyle: {
color: '#B5F8F9',
}
}
},
lineStyle: {
normal: {
color: "#6B7D90",
width: 2,
type: "solid"
}
},
data: [
[{
name: '上游',
coord: [4200, 2500]
}, {
coord: [2000, 2500]
}],
[{
name: '中游',
coord: [2000, 2500]
}, {
coord: [900, 2500]
}],
[{
name: '下游',
coord: [900, 2500]
}, {
coord: [0, 2500]
}]
]
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
data: [{
value: hedao[0],
//name: names[0]
}, {
value: hedao[1],
//name: names[1]
}, {
value: hedao[2],
//name: names[2]
}, {
value: hedao[3],
name: names[3]
}, {
value: hedao[4],
//name: names[4]
}, {
value: hedao[5],
//name: names[5]
}, {
value: hedao[6],
//name: names[6]
}, {
value: hedao[7],
//name: names[7]
}, {
value: hedao[8],
//name: names[8]
}]
}]
};
截图如下
