console
//<![CDATA[
var colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['2015 降水量', '2016 降水量']
},
grid: {
top: 70,
bottom: 50
},
xAxis: [{
type: 'category',
axisLabel:{
margin:16,
},
axisTick: {
length:12,
alignWithLabel: true
},
splitLine: {
show: true
},
axisLine: {
show: false,
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
formatter: function(params) {
return '降水量 ' + params.value + (params.seriesData.length ? ':' + params.seriesData[0].data: '');
}
}
},
data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
},
{
type: 'category',
axisLabel:{
show:false,
},
axisTick: {
length:12,
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
width:0,
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function(params) {
return '降水量 ' + params.value + (params.seriesData.length ? ':' + params.seriesData[0].data: '');
}
}
},
data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
}],
yAxis: [{
type: 'value',
axisLabel: {
margin: 15
},
axisLine: {
show: false
},
axisTick: {
length: 12,
}
},
{
max: 250,
min: 0,
type: 'value',
axisLabel: {
show: false
},
splitLine:{
show:false
},
axisLine: {
show: false
},
axisTick: {
length: 12,
}
}],
series: [{
name: '2015 降水量',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [22.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8]
},
{
name: '2016 降水量',
type: 'line',
smooth: true,
data: [13.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 13.4,]
}]
};
var myChart = echarts.init(document.getElementById('main'),null, {renderer: 'svg'});
myChart.setOption(option);
var myChart = echarts.init(document.getElementById('main2'),null, {renderer: 'svg'});
option.xAxis[0].boundaryGap = false,
option.xAxis[1].boundaryGap = false,
myChart.setOption(option);
console.clear();
var main = document.querySelector('#main')
var paths = main.querySelectorAll('svg path');
var ticks=[];
var y = 6;
var x = 12;
var lines=[];
paths.forEach((path,i)=>{if(i>=y&&i<=(y+x))lines.push(path);if(i>(x+y+2*y+1)){
if(ticks.length<x);
ticks.push(path);
}});
lines[lines.length-1].remove();
lines.forEach((x,i)=>{
var d = x.getAttribute('d').split(' ');
var offset = ticks[i].getAttribute('d').split(' ')[1];
d[1]=offset;
d[4]=offset;
x.setAttribute('d',d.join(' '));
});
ticks.forEach(x=>{
console.log(x.getAttribute('d'));
d =x.getAttribute('d').split(' ');
//d[2]=Number(d[2])+5;
//d[5]=Number(d[5])+5;
x.setAttribute('d', d.join(' '))
})
//console.log(paths);
<div id="main" style="width: 100%; height: 400px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"></div>
<div id="main2" style="width: 100%; height: 400px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"></div>